/* * Site stuff */

#Sites {
    line-height: 3.5vh;
    font-family: var(--DefaultFont);
    color: white;
    text-align: center;
    position: fixed;
    font-size: 3vh;
    padding-top: 2vh;
    top: 21vh;
    right: 13vw;
    width: 13vw;
    height: 58vh;
    align-content: start;
    border: var(--Border) solid var(--GlassBG);
    backdrop-filter: blur(var(--GlassBlur));
    background: var(--BG-Gradient);
    border-radius: var(--Rounding);
    overflow-y:auto;
    scrollbar-color: var(--GlassBG) rgba(0,0,0,0);
}
#Sites a:hover {
    padding: 0px;
    line-height: 0px;
}
#Sites img{
    width: 88px;
    image-rendering: pixelated;
}
#Sites img:hover{
    transform: translateY(-3px);
    box-shadow: 0px 5px 4px 4px rgba(0, 0, 0, 0.442);
    outline: 1px dashed white;
}
#Sites img:active {
    transform: none;
    box-shadow: none;
}
#billnear {
    image-rendering:optimizeQuality;
}

/* * Navbar */
#Navbar {
    user-select: none;
    font-family: var(--DefaultFont);
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    color: white;
    text-align: center;
    position: fixed;
    font-size: 3vh;
    padding-top: 1vh;
    top: 16vh;
    left: 13vw;
    width: 60vw;
    height: 6vh;
    align-content: start;
    border: var(--Border) solid var(--GlassBG);
    backdrop-filter: blur(var(--GlassBlur));
    background: var(--BG-Gradient);
    border-radius: var(--Rounding);
    overflow-y:auto;
    scrollbar-color: var(--GlassBG) rgba(0,0,0,0);
}
#Navbar label{
    transition: .15s;
    display: inline-flex;
    position: relative;
    text-align: center;
    justify-content: center;
    justify-self: center;
    user-select: none;
    width: 90%;
    height: 100%;
    text-overflow: clip;
    overflow: hidden;
    background: var(--BG-Gradient);
    filter: contrast(0.8) brightness(1.5);
    border-radius: 8px;
    border: 2px black solid;
}

#Navbar label input{
    display: none;
}
#Navbar label:has(input:checked) {
    filter: contrast(0.8) brightness(3.5);
}

#Navbar label:hover {
    cursor: pointer;
}
@media screen and (max-width:900px){
    #Navbar label {
        text-align: left;
        justify-content: start;
        align-content: start;
    }
}
/* * Misc */
.Contentbox {
    line-height: 3.5vh;
    font-family: var(--DefaultFont);
    color: white;
    text-align: center;
    position: fixed;
    font-size: 3vh;
    padding-top: 5vh;
    top: 24vh;
    left: 13vw;
    width: 60vw;
    height: 54vh;
    align-content: start;
    border: var(--Border) solid var(--GlassBG);
    backdrop-filter: blur(var(--GlassBlur));
    background: var(--BG-Gradient);
    border-radius: var(--Rounding);
    overflow-y:auto;
    scrollbar-color: var(--GlassBG) rgba(0,0,0,0);
}

#Socials{
    view-transition-name: main-content;
}

/* * Socials */

#Socials {
    display: none;
}
#Navbar:has(#Nav1:checked) ~ #Socials {
    display: block;
}

.webicon {
    width: 2.5vh;
    letter-spacing: 3vw;
}

/* * Chat */
#Chatbox {
    line-height: 2.5vh;
    visibility: hidden;
    padding-top: 0vh;
    height: 59vh;
}
#Navbar:has(#Nav2:checked) ~ #Chatbox {
    visibility: visible;
}

#chattable {
    float: left;
    position: relative;
    left: 1vw;
    width: 45vw;
    height: 46vh;
    border: 3px solid #3a0055;
    border-radius: 15px;
}
#UserContainer {
    text-align: center;
    position: relative;
    float: left;
    left: 1.5vw;
    right: 2.5vw;
    top: 0vh;
    width: 12vw;
    height: 40vh;
    font-size: 2vh;
    font-family: gooddog;
    font-size: 3vh;
}
#OnlineUsers {
    font-family: gooddog;
    font-size: 3vh;
    margin-top: 0vh;
    position: relative;
    width: 10vw;
    height: 38vh;
    border-radius: 15px;
    background-color: #5200852d;
    border: 3px solid #3a0055;
}
#OnlineUsers li {
    position: relative;
    margin-right: 1.5vw;
    left: -3px;
    text-align: center;
}
#you{
    position: relative;
    left: -1.6vw;
    width: 11vw;
    top: 1vh;
    font-size: 2.4vh;
    color: dimgrey;
    font-family: dt;
    text-shadow: 0 0 10px black;
}
#UserContainer::after {
    content: "";
    clear: both;
}

/* * Extra */

#Extra {
    display: none;
}
#Navbar:has(#Nav3:checked) ~ #Extra {
    display: block;
}


/* * Changelog */

#Changelogbox {
    line-height: 2vh;
    display: none;
    padding-top: 1vh;
    height: 58vh;
}
#Navbar:has(#Nav4:checked) ~ #Changelogbox {
    display: block;
}

#Changelog {
    justify-self: center;
    justify-content: center;
    background-color: #00000048;
    padding: 5px;
    width: 93%;
    height: 87%;
    border-radius: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width:thin;
}

.log {
    background-color: #00000048;
    margin: 5px;
    padding: 21px;
    width: 96%;
    font-size: 22px;
    line-height: 26px;
    border-radius: 8px;
}