@import url(themes/theme.css);

@font-face {
    font-family: main;
    src: url(fonts/main.ttf);
}

@font-face {
    font-family: para;
    src: url(fonts/para.ttf);
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #acb0be; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #8c8fa1; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #333; 
    cursor: -webkit-grab; 
    cursor: grab;
}

body {
    background: #dce0e8;
    color: #4c4f69;
    display: flexbox;
    margin: 0;
    text-align: center;
    font-family: "para", sans-serif;
}

.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 240px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #acb0be; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    /* padding-top: 20px; */
  }

.display {
    width: 90vw;
    text-align: center;
    max-width: fit-content;
    margin-left: 240px;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 5vh
}

.imgcon {
    background: #dce0e8;
    margin: 5px;
    transition: .3s;
    text-decoration: none;
    width: 40vh;
    height: 40vh;
}

.imgcon:hover {
    cursor: default;    
}

.imgcon > img {
    text-decoration: none;
    padding-top: 2em;
    padding-right: 2em;
    padding-left: 2em;
    background: #dce0e8;
    transition: .3s;
    max-width: 60vh;
    max-height: 40vh;
    /* image-rendering: pixelated; */
}

#header {
    overflow: hidden;
    background-color: #222;
    display: block;
    margin: 0;
    padding-left: 3em;
}

.subheader {
    font-size: 12px;
    padding: none;
    margin: none;
    color: #40a02b
}

.left {
    float: right;
    margin-top: 1%;
    padding-right: 3em;
}

.header {
    font-family: main;
    text-align: center;
    font-size: 30px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.headerimg {
    height: 80px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;
}

.hcontainer {
    background: #eff1f5;
    height: 100px;
}


#s {
    width: 200px;;
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
    font-family: "para", sans-serif;
    user-select: none;
    
}

#s:focus {
    background: var(--button);
}

input {
    outline: none;
    box-shadow: none;
    width: 200px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    background: #ccd0da;
    border-style: none;
    color: #6c6f85;
}

input:focus {
    outline: none;
}

.loginuser {
    outline: none;
    box-shadow: none;
    width: 80%;
    height: 20px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    background: #222;
    border-style: none;
    color: #ddd;
    text-align: center;
    margin: 6px;
}

#blacklist {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #111;
    width: 30vw;
    height: 30vh;
    display: none;
}

button:hover {
    cursor: pointer;
}

.b {
    text-align: center;
}

.button {
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
    margin-top: 0.5em;
    margin-bottom: 0em;
    width: 100px;
    font-family: "para", sans-serif;
    
}

.m {
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
    margin-top: 0.5em;
    margin-bottom: 0em;
    width: 100px;
    font-family: "para", sans-serif;
}

.bl {
    border-bottom-left-radius: 25px;
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
    margin-top: 0.5em;
    margin-bottom: 0em;
    width: 100px;
    font-family: "para", sans-serif;
}

.br {
    border-bottom-right-radius: 25px;
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
    margin-top: 0.5em;
    margin-bottom: 0em;
    width: 100px;
    font-family: "para", sans-serif;
}

.controlbox {
    width: 240px;
    margin-right: auto;
    margin-left: auto;
}

.controlbox > button {
    margin-top: 5px;
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
    min-width: 200px;
}

.controlbox > div > button {
    margin-top: 5px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
    min-width: 200px;
}

.userbox > button {
    margin-top: 5px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    outline: none;
    background: #ccd0da;
    box-shadow: none;
    border-style: none;
    color: #6c6f85;
}

.userbox {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 240px;
    background-color: #eff1f5;
    color: #4c4f69;
    text-align: center;
    padding-bottom: 10px;
}

.controlbox > p {
    margin: 0;
}

.controlbox > div > p {
    margin: 0;
}

.subheading {
    font-size: 10px;
    color: var(--subheader);
}

.perks {
    font-size: 10px;
    color: var(--subheader);
    margin: 0;
    text-align: center;
}

.logincontainter {
    z-index: 10000000;
    width: 100%;
    height: 100%;
    display: none;
}

.login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #111;
    width: 30vw;
    height: 30vh;
    display: none;
}

.navfooter {

}

.intro {
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.logged {
    margin: 5px;
    margin-top: 20px;
}

#showvideos {
    height: 15px;
}

.checkb {
    height: 10px;
    font-size: 10px;
    line-height: 0px;
    margin: 10px;
    text-align: center;
}

.checks {
    width: 200px;
    text-align: center;
    padding: 0;
}