@font-face {
    font-family: "primary";
    src: url("assets/fonts/fira_sans_regular.ttf") format("truetype");
}
html {
	scroll-behavior     : smooth;
	container-type      : scroll-state;
    container-name      : scroller;
}
:root {
    --base              : #fff   ;
    --invert            : #000   ;
    --light             : #eef5fa;
    --light2            : #DBE9F3;
    --light3            : #b5cedf;
    --dark              : #437ca3;
    --tagsBar-width     : 20%;
    --gap               : 1vh;
}

body {
    background-color    : var(--light2);
    font-family         : "primary", sans-serif;
    margin              : 0;
}
* {
    font-family         : "primary", sans-serif;
}
#universal {
    /* hmm... */
    display             : grid;
    grid-template-rows  : 1fr auto;
    gap                 : var(--gap);
    margin-top          : var(--gap);
    margin-bottom       : var(--gap); /* buffer from bottom */
    height              : auto;
}
.panel {
    background-color    : var(--base);
    box-sizing          : border-box;
    padding             : var(--gap);
    border              : var(--light3) 1px solid;
    border-radius       : 10px;
}
.bar {
    width               : 100%;
    background-color    : var(--light);
    padding             : 8px;
    border-radius       : 10px;
    align-items         : center;
    height              : 100%;
    box-sizing          : border-box;
    gap                 : calc(var(--gap) / 2);
}
.bar select, .bar button, .bar input {
    border              : 2px solid;
    border-color        : var(--light3);
    border-radius       : 10px;
    background-color    : var(--base);
    box-sizing          : border-box;
    padding             : 4px;
    font-size           : clamp(0.5em, 14px, 1em);
    align-items         : center;
    width               : 100%;
}
.bar button:disabled {
    color               : var(--base);
}

.navbar {
    list-style-type     : none;
    margin              : 0;
    padding             : var(--gap);
    overflow            : hidden;
  
}
.navbar, .libar {
    float               : left;
}

.navbar, .libar {
    display             : block;
    color               : var(--base);
    text-align          : center;
    padding             : var(--gap);
    text-decoration     : none;
}

.navbutton {
    appearance          : none;
    background-color    : var(--invert);
    border              : 2px solid var(--invert);
    border-radius       : 5px;
    box-sizing          : border-box;
    color               : var(--base);
    cursor              : pointer;
    display             : inline-block;
    font-family         : Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size           : 16px;
    font-weight         : 600;
    line-height         : normal;
    margin              : 0;
    min-height          : 60px;
    min-width           : 0;
    outline             : none;
    padding             : 16px 30px;
    text-align          : center;
    text-decoration     : none;
    transition          : all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select         : none;
    -webkit-user-select : none;
    touch-action        : manipulation;
    width               : 100%;
    will-change         : transform;
}

.navbutton:disabled {
  pointer-events        : none;
}

.navbutton:hover {
  box-shadow            : rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform             : translateY(-2px);
  background-image      : url('assets/static.gif');  
}

.navbutton:active {
  box-shadow            : none;
  transform             : translateY(0);
}

#gallerybox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 12px;
  padding: 14px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--light3);
  border-radius: 14px;
  background: #EEF5FA;
}

.homebutton {
        appearance          : none;
        background-color    : white;
        border              : 2px solid var(--invert);
        border-radius       : 20px;
        box-sizing          : border-box;
        color               : #24333F;
        cursor              : pointer;
        display             : inline-block;
        font-family         : Roobert,-apple-system,BlgrayMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        font-size           : 20px;
        font-weight         : 600px;
        line-height         : normal;
        margin              : 0;
        min-height          : 60px;
        min-width           : 0;
        outline             : none;
        padding             : 16px 30px;
        text-align          : center;
        text-decoration     : none;
        transition          : all 300ms cubic-bezier(.23, 1, 0.32, 1);
        user-select         : none;
        -webkit-user-select : none;
        touch-action        : manipulation;
        width               : 250px;
        will-change         : transform;
        border: 3px solid #7297b9;
        margin-bottom: 20px;
        margin-top: 10px;
}

.homebutton:disabled {
  pointer-events        : none;
}

.homebutton:hover {
  box-shadow            : rgba(0, 0, 0, 0.25) 0 3px 10px;
  transform             : translateY(-2px);
  background: #98b4d4;
  color: white;
}

.homebutton:active {
  box-shadow            : none;
  transform             : translateY(0);
}

.image-container {
  border: 1px solid #bdd3e1;
  border-radius: 14px;
  padding: 8px;
  text-align: center;
  max-width: 220px;
  background: var(--light1);
  box-shadow: 0 4px 12px rgba(20, 42, 60, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background-color: #ecf4fa;
}
.image-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(20, 42, 60, 0.14);
}
.image-container img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 9px;
}

#gallery-heading{
    font-family: Roobert,-apple-system,BlgrayMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #1F3B52;
    margin: 20px 0 10px;
}

.title {
    display             : flex;
    flex-direction      : row;
    align-items         : center;
}
.title > img {
    height              : 50px;
    width               : 50px;
}
.title > label {
    padding             : var(--gap)
}
.banner {
    display             : flex;
    background          : url("assets/banner.jpg") fixed;
    background-clip     : border-box;
    background-size     : contain;
    height              : 12.5vh;
}
main {
    display             : grid;
    grid-template-columns
                        : 2fr 3fr;
    gap                 : var(--gap);
    width               : auto;
    height              : 900px;
}
.gallery, .details {
    gap                 : var(--gap);
}
.gallery {
    display             : grid;
    grid-template-rows  : 5% auto;
    align-items         : anchor-center;
}
.details {
    height              : auto;
    display             : grid;
    grid-template-rows  : 5% auto;
}
.explorer {
    display             : grid;
    grid-template-columns
                        : 1fr 1fr 1fr 1fr;
    background-color    : var(--light);
    border-radius       : 10px;

    padding             : var(--gap);
    height              : 100%;
    max-height          : 100%;
    max-width           : 100%;
    box-sizing          : border-box;
    overflow-y          : scroll;
    overflow-x          : none;
    scrollbar-width     : none;
}
.explorer > article {
    display             : flex;
    flex-direction      : column;
    gap                 : 3px;
    border              : 1.5px solid;
    border-color        : var(--light3);
    border-radius       : 5%;
    background-color    : var(--base);
    padding             : 12px;
}
img, video {
    width               : 100%;
    z-index             : 50;
}
img.thumbnail:hover, video.thumbnail:hover{
    transform           : scale(1.07);
    transition-duration : 0.2s;
}
.explorer > article button {
    all                 : unset;
}
.shown {
    display             : block;
}
.screen {
    pointer-events      : none;
    position            : fixed;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    padding             : 10%;
    padding-top         : 5%;
    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : center;
    box-sizing          : border-box;
}
.infobox {
    pointer-events      : all;
    display             : grid;
    grid-template-columns
                        : 2fr 5fr 2fr;
    grid-template-rows  : auto 1fr;
    grid-template-areas : "s title s2" "s iframe s2" "s credits s2";
    height              : 100%;
    width               : 100%;
    background-color    : var(--light2);
    padding             : var(--gap);
    gap                 : var(--gap);
    border-radius       : 10px;
}
.infobox > .iframe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-area: iframe;
    background-image: url("assets/bg.jpg");
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 100%;
}
.links {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: var(--light2) 2px solid;
    background-color: var(--base);
    overflow: hidden;
}
.links > div {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: calc(var(--gap) * 0.5);
    padding: calc(var(--gap) * 2);
}
.links .link {
    background-color: transparent;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 100%;
    width: 17.5%;
    box-sizing: border-box;
    height: 100%;
    gap: calc(var(--gap) * 0.5);
    font-size: 1.5vh;
    /*
    padding: var(--gap);
    display: grid;
    grid-template-rows: 4fr 1fr;
    grid-template-columns: auto;
    text-align: center;
    align-items: center;
    width: 20%;
    height: auto;
    box-sizing: border-box;
    */
}
.links label {
    font-size: clamp(0.5em, 1.5vh, 1em);
    font-weight: bold;
    text-align: center;
}
.links img {

    height: auto;
    width: 100%;
}


.iframe > .face {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30vh;
}
.infobox > .title2 {
    grid-area           : title;
    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : center;
    height              : 100%;
    width               : 100%;
}
.infobox > .title2 > img {
    width: auto;
    max-width: 100%;
    max-height: 6vh;
}
.infobox > .sidebar2 {
    grid-area           : s;
    height              : 100%;
    width               : 100%;
}
.infobox > .sidebar3 {
    grid-area           : s2;
    height              : 100%;
    width               : 100%;
}
.infobox > .credit {
    grid-area           : credits;
    height              : 100%;
    width               : 100%;
    display             : grid;
    grid-template-rows  : 1fr;
}
.infobox > .close {
    position            : absolute;
    bottom              : -10%;
    left                : 40%;
    width               : 20%;
    height              : 10%;
    align-items         : center;
    border-radius       : inherit;
    border-top-left-radius
                        : 0;
    border-top-right-radius
                        : 0;
    border              : 8px solid var(--light2);
    border-top          : 0;
    background-color    : var(--light2);
}
.infobox > button > img {
    margin-top          : 2%;
    height              : 90%;
}
.search {
    display             : grid;
    grid-template-columns
                        : 40% auto;
    justify-content     : space-between;
}
.search > nav {
    gap                 : inherit;
    display             : grid;
    grid-template-columns
                        : 60px 1fr auto 1fr 60px;
    height              : auto;
    box-sizing          : border-box;
}
.search2 {
    display             : grid;
    grid-template-columns
                        : 2fr 4fr 2fr;
}
#search_tagsbutton {
    z-index: 101;
}
#tag_searching {
    display             : grid;
    padding             : 8px;
}
.search span {
    font-size           : clamp(0.5em, 14px, 1em);
}
.src {
    display             : grid;
    grid-template-columns
                        : 7fr 3fr;
}
.div_id {
    text-align          : right;
    font-size           : clamp(0.5em, 20px, 1em);
}
.tags {
    display             : flex;
    flex-direction      : row;
    flex-wrap           : wrap;
    box-sizing          : border-box;
    width               : 100%;
    gap                 : 3px;
    border-radius       : 10px;
    background-color    : var(--light);
    padding             : 4%;
}
.tags > button {
    all                 : unset;
}
#viewer > .tags {
    width               : 96%;
    margin              : 2%;
    padding             : 2%;
}
#viewer {
    display             : flex;
    flex-direction      : column;
}
.tag {
    display             : flex;
    flex-direction      : row;
    align-items         : center;
    gap                 : 4px;
    padding             : 4px 11px 4px 8px;
    font-size           : clamp(0.75em, 12px, 1em);
    color               : var(--invert);
    background-color    : transparent;
    border              : 1.5px solid;
    max-height          : 16px;
    border-color        : var(--dark);
    border-radius       : 999px;
    vertical-align      : center;
}
.tag:hover, .link a:hover > img {
    transform           : scale(1.1);
    transition-duration : 0.2s;
}
.tag > span {
    font-size           : 24px;
    pointer-events      : none;
}
.sidebar {
    position            : fixed;
    top                 : 0px;
    right               : 0px;
    height              : 100%;
    width               : var(--tagsBar-width);
    background-color    : var(--base);
    padding             : 20px;
    box-sizing          : border-box;
    border-radius       : 10px;
    overflow            : hidden;
    box-sizing          : border-box;
    display             : none;
}

.sidebar.in {
    animation-name      : slideIn;
    animation-duration  : 0.5s;
}
.sidebar.out {
    animation-name      : slideOut;
    animation-duration  : 0.5s;
}
.tagsMenu {
    display             : flex;
    flex-direction      : column;
    row-gap             : 6px;
    overflow            : scroll;
    scrollbar-width     : none;
    box-sizing          : border-box;
    height              : 100%;
}
.sidebar h1 {
    font-size           : 30px;
    margin-block        : 6px;
}
.sidebar h2 {
    font-size           : 18px;
    margin-block-start  : 10px;
    margin-block-end    : 4px;
}

div.to-top {
	position            : fixed;
	bottom              : 20px;
	right               : 10px;
	display             : flex;
    flex-direction      : column-reverse;
    row-gap             : 4px;
}
div.notification {
    position            : fixed;
	bottom              : 20px;
	left                : 10px;
    display             : flex;
    flex-direction      : column-reverse;
    row-gap             : 4px;
}
.notification > label {
    font-size           : 14px;
    padding             : 10px;
    border-radius       : 10px;
    background-color    : var(--base);
    border              : 2px solid var(--light3);
    pointer-events      : none;
    box-sizing          : border-box;
}
.to-top > button {
    all                 : unset;
}
a.to-top, button.to-top {
	display             : flex;
	justify-content     : center;
	align-items         : center;
	height              : 50px;
	width               : 50px;
	background          : var(--base);
	border              : 2px solid var(--light3);
	cursor              : pointer;
	border-radius       : 50%;
}

.to-top img {
	width               : 30px;
}
.to-top.hovered {
    border-color        : var(--dark);
    background-color    : var(--light3);
}
button.to-top:hover, a.to-top:hover {
	border-color        : var(--dark);
    transition-duration : 0.2s;
    background-color    : var(--light3);
}
#tag_searching {
    position            : relative;
}
.expanded {
    width               : 100%;
}
.to-top, .sidebar, #infoBox, .notification {
    z-index: 200;
}
#overlay {
    pointer-events      : all;
    width               : 100%;
    height              : 100%;
    background-color    : #29476d90;
    position            : fixed;
    top                 : 0px;
    right               : 0px;
    display             : none;
    z-index: 100;
}
#overlay.in {
    animation-name      : fadeIn;
    animation-duration  : 0.5s;
}
#overlay.out {
    animation-name      : fadeOut;
    animation-duration  : 0.5s;
}
#infoBox {
    display             : none;
}
#infoBox.in {
    animation-name      : fadeIn;
    animation-duration  : 0.5s;
}
#infoBox.out {
    animation-name      : fadeOut;
    animation-duration  : 0.5s;
}
textarea {
    border              : var(--light3) 1.5px solid;
    border-radius       : 10px;
    font-family         : inherit;
    resize              : none;
    padding             : 2%;
}
@keyframes slideIn {
    from {
        right           : calc(-1 * var(--tagsBar-width));
    }
    to {
        right           : 0px;
    }
}
@keyframes slideOut {
    from {
        right           : 0px;
    }
    to {
        right           : calc(-1 * var(--tagsBar-width));
    }
}
@keyframes fadeIn {
    from {
        opacity         : 0%;
    }
    to {
        opacity         : 100%;
    }
}
@keyframes fadeOut {
    from {
        opacity         : 100%;
    }
    to {
        opacity         : 0%;
    }
}
button.interact {
    all                 : unset;
}
details {
    all                 : unset;
}
.tooltip {
    position            : relative;
}
.tooltip span {
    position            : absolute;
    visibility          : hidden;
    opacity             : 0;
    background-color    : var(--dark);
    color               : var(--base);
    text-align: center;
    font-size           : clamp(0.5em, 14px, 1em);
    padding             : 8px;
    border-radius       : 5px;
    box-sizing: border-box;
    z-index             : 75;
}
.to-top.tooltip span {
    right               : 110%;
    max-height          : 100%;
    width               : 250%;
}
nav > .skip.tooltip > span {
    top                 : 110%;
    left                : 0;
    width               : 200%;
}
nav > .tick.tooltip > span {
    top                 : 110%;
    left                : 0;
    width               : 100%;
}
.tooltip:hover span {
    visibility          : visible;
    opacity             : 100%;
    transition-duration : 0.2s;
}
dl {
    background-color    : var(--light2);
    padding             : var(--gap);
    box-sizing          : border-box;
    border-radius       : 10px;
}
dt {
    font-weight         : bold;
    margin-bottom       : 0.5em;
}
.pollss {
    display             : grid;
    grid-template-columns
                        : 1fr 1fr;
    grid-area: polls;
}

.comss {
    display             : grid;
    grid-area: coms;
    margin: 5px;
}

.drawgallery {
    display             : grid;
    grid-area: drawb;
    margin: 5px;
}

footer {
    margin-bottom: 20vh;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    grid-template-areas: "polls" "comms" "credit" ;
}
footer {
    margin-bottom: 20vh;
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "polls polls" "drawb drawb" "coms coms" "credit .";
    gap: var(--gap);
}
.pollss {
    display             : grid;
    grid-template-columns  
                        : 1fr 1fr;
    grid-area: polls;
}
.commss {
    display             : grid;
    grid-area           : coms;
}

.drawgallery {
    display             : grid;
    grid-area: drawb;
}

.credit1 {
    grid-area: credit;
    display: flex;
    flex-direction: column;

}
.credit1 > a {
    width: 33%;
    height: auto;
}
.credit1 > div {
    background-color: var(--light2);
    padding: var(--gap);
    border-radius: 10px;
    font-size: 1.5vh
}
.credit1 > a > img {
    transform: scale(-1, 1);
}
.credit1 b {
    color: #db7a2b;
}
.credit1 > a:hover > img {
    transform           : scale(3);
    transition-duration : 10s;
    transition-timing-function: linear(0, 0.025 99%, 1);
}
.toggle {
    width: 50px;
    height: 30px;
    display: inline-block;
    position: relative;
}
.toggle > input  {
    opacity: 0;
    height: 0;
    width: 0;
}
.toggle > span {
    background-color: var(--light3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.5s;
    cursor: pointer;
    border-radius: 10px;
}
.toggle > input:checked + span {
    background-color: #e7c91f;
}
.toggle > span:before {
    content: "";
    position: absolute;
    top: calc(100% * (1/6));
    left: 10%;
    height: calc(100% * (2/3));
    width: 40%;
    background-color: var(--base);
    border-radius: 5px;
    transition: 0.5s;
}
.toggle > input:checked + span:before {
    transform: translateX(100%);
}
.settings > div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    gap: var(--gap);
    align-items: center;
    font-size: 14px;
    background-color: var(--light);
    padding: var(--gap);
    border-radius: 10px;
}
.search2_options {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap);
}