@font-face {
  font-family: Koulen;
  src: url(public/Assets/Koulen-Regular.ttf);
}

:root {
    --dark: #141414;
    --hero: #E59500; /*#00ff62*/
    --light: #E5DADA;
    --font: "Teko";
    --dark-mod: #202020;
    --light-mod: #ede4e4;
    --display-height: 100vh;
    --current-font-color: var(--light);
    --font-outline-width: 2px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--dark);
    color: green;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}


h1 {
    font-family: var(--font);
    font-weight: 800;
    line-height: .8em;
}


.writeup-container {
    position: absolute;
    background-color: var(--light-mod);
    color: var(--dark-mod);
    width: 100vw;
    height: 100vh;
    z-index: 800;
    font-family: var(--font);
    font-size: x-large;
    padding: 100px;
}

@keyframes remove_loader {

    1%   {background-color: var(--dark);}
    /* 25%  {background-color: yellow;}
    50%  {background-color: blue;} */
    99%  {background-color: var(--dark);}
    100% {visibility: collapse;}

}
#loader {
    width: 100vw;
    height: 100vh;
    background-color: var(--dark);
    position: absolute;
    z-index: 1000;
}

#loader.hidden {
    animation: remove_loader 2s linear forwards;
}

.stat-counter {
    left: calc(50% - 40px);
}



.section {
    position: fixed;
    width: 100vw;
    height: var(--display-height);
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.section.dark {
    background-color: var(--dark);
    color: var(--light);
}
.section.light {
    background-color: var(--light);
    color: var(--dark);
}
.section.inactive-section {
    visibility: hidden;
}
.section.staged-section {
    top: var(--display-height);
    z-index: 5;
}
.section.prior-section {
    top: var(--display-height);
    z-index: 5;
}



.section .info-pane-container {
    position: fixed;
    height: var(--display-height);
    display: flex;
    align-items: flex-end;
    z-index: 2;
}
.section .info-pane {
    position: fixed;
    font-family: var(--font);
    font-weight: 400;
    font-size: 16pt;
    line-height: 1em;
    width: 100vw;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 50px 50px;
    text-transform: uppercase;
}
.section .info-pane * {
    padding: 0px 10px;
}
.section .info-pane p {
    margin: 0px;
    /* padding: 0px; */
}

.section .info-pane .info-grid {
    display: grid;
    grid-template-columns: 20px auto auto;
    grid-column-gap: 10px;
}
.section .info-pane .contact {
    text-align: right;
}
.section .info-pane .write-up {
    text-align: right;
}




.herocanvas {
    width: 100%;
    height: 100%;
    top: 0;
    position: relative;
}

.hero-title {
    font-size: 150pt;
    width: 100vw;
    position: fixed;
    text-align: left;
    margin-bottom: 0px;
    height: 100pt;
    padding-left: 50px;
}
.hero-title.larger {
    /* font-size: 110pt; */
    margin-left: 4pt;
    padding-top: 3pt;
}

#hero {
    position: fixed;
}
#hero .custombtn {
    margin: auto;
}


.custombtn {
    width: fit-content;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    align-content: center;
    display: flex;
    transition: all ease-in 100ms;
    padding: 0px 0px;
}
.custombtn:hover {
    backdrop-filter: blur(5px);
    border-bottom: 5px solid white;
}
.custombtn.left {
    padding-left: 90px;
}
.custombtn.right {
    padding-right: 90px;
}
.custombtn p {
    margin: auto;
    font-family: 'Teko', sans-serif;
    font-size: 30pt;
}



.background-image {
    position: fixed;
}

.border-lines {
    background-color: rgba(0,0,0,0);
    width: 100vw;
    height: var(--display-height);

    position: fixed;
    display: grid;
    justify-content: space-around;
    grid-template-columns: auto auto auto;
    align-content: space-evenly;
}
.border-lines div {
    -webkit-mask: url(/Assets/add-svgrepo-com.svg) no-repeat center;
    mask: url(/Assets/add-svgrepo-com.svg) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 50px;
    height: 50px;
}
.dark .border-lines div {
    background-color: var(--dark-mod);
}
.light .border-lines div {
    transform: rotate(45deg);
    background-color: var(--light-mod);
}

.page-number {
    font-family: var(--font);
    font-size: 20pt;
    position: fixed;
    width: 100vw;
    text-align: center;
    margin-top: calc(var(--display-height) - 40pt);
    z-index: 2;
}
.dark .page-number {
    color: var(--light);
}
.light .page-number {
    color: var(--dark);
}

.dark .text-outline {
    text-shadow: -2px -2px 0 var(--dark-mod), 2px -2px 0 var(--dark-mod), -2px 2px 0 var(--dark-mod), 2px 2px 0 var(--dark-mod);
    color: var(--dark);
}

.light .text-outline {
    text-shadow: -2px -2px 0 var(--light-mod), 2px -2px 0 var(--light-mod), -2px 2px 0 var(--light-mod), 2px 2px 0 var(--light-mod);
    color: var(--light);
}
.light .background-number.text-outline {
    color: var(--light);
}


.background-number {
    color: var(--dark-mod);
    font-family: var(--font);
    font-weight: 800;

    position: absolute;
    font-size: 50vw;
    margin: 0px;
    margin-block: 0px;
    line-height: 0;
    margin-top: 80vh;
    
}

.light .background-number {
    color: var(--light-mod);
}

#scrollPos {
    color: var(--hero);
    font-family: var(--font);
    font-weight: 800;
    font-size: 25pt;
    left: 20px;
    top: 20px;
    margin: 0px;
    cursor: pointer;

    user-select: none;
}


#upPage {
    visibility: hidden;
}

#downPage {
    bottom: 0;
}

.nav-button {
    color: var(--current-font-color);
    position: absolute;
    z-index: 50;
    font-family: var(--font);
    font-weight: 800;
    font-size: 20pt;
    margin: auto;
    width: 100vw;
    border: none;
    background-color: rgba(255, 0, 0, 0);
    cursor: pointer;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}



#about-link {
    color: var(--hero);
    position: absolute;
    font-family: var(--font);
    font-weight: 800;
    font-size: 25pt;
    right: 20px;
    top: 20px;
    text-decoration: none;
    z-index: 500;
    text-transform: uppercase;
}



@media only screen and (max-width: 700px) {
    .page-number {
        font-family: var(--font);
        font-size: 20pt;
        text-align: center;
        top: 35vh;
        right: 0;
        z-index: 2;
        position: absolute;
        font-weight: 500;
        width: unset;
        margin-top: 0px;
        transform: rotate(-90deg);
    }
    .hero-title {
        font-size: 6em;
        padding-top: 50px;
        text-align: center;
        margin-left: 0px;
        padding-left: 0px;
    }
    .section .info-pane {
        text-transform: uppercase;
        flex-direction: column;
        align-items: normal;
        padding: 50px 10px;
    }
    .section .info-pane > p,div {
        margin-bottom: 20px;
    }
    .section .info-pane-container {
        width: 100vw;
        justify-content: center;
        z-index: 2;
    }
    .section .info-pane {
        width: unset;
    }

    .section .info-pane :last-child {
        margin-bottom: 0px;
    }
    .background-number {
        font-size: 80vw;
    }
    h1.random-code {
        visibility: hidden;
        padding: 20px;
        font-size: 50pt;
        padding-top: calc(75px);
        z-index: -5;
        text-wrap: wrap;
        /* z-index: -5;
        font-size: 50pt;
        padding: 5px;
        overflow: hidden;
        text-wrap: nowrap;
         */
    }
    .dark h1.random-code {
        text-shadow: -1px -1px 0 var(--dark-mod), 1px -1px 0 var(--dark-mod), -1px 1px 0 var(--dark-mod), 1px 1px 0 var(--dark-mod);
        color: var(--dark);
        }

    .light h1.random-code {
        text-shadow: -1px -1px 0 var(--light-mod), 1px -1px 0 var(--light-mod), -1px 1px 0 var(--light-mod), 1px 1px 0 var(--light-mod);
        color: var(--light);
    }
}

@media only screen and (max-height: 530px) {
    .hero-title {
        margin-top: 0px;
        font-size: 5em;
    }
    .section .info-pane {
        font-size: 1em;
    }
    .page-number {
        font-size: 1em;
        margin-top: calc(var(--display-height) - 20pt);
    }
}



.section.dark.dotted {
    --dot-size: 3px;
    --dot-space: 100px;

    background: 
        linear-gradient(90deg, var(--dark) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center,
        linear-gradient(var(--dark) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center, var(--dark-mod);
    background-size: var(--dot-space) var(--dot-space);
}

.section.light.dotted {
    --dot-size: 4px;
    --dot-space: 100px;

    background: 
        linear-gradient(90deg, var(--light) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center,
        linear-gradient(var(--light) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center, var(--light-mod);
    background-size: var(--dot-space) var(--dot-space);
}


.info-slider-container {
    width: 100vw;
    height: var(--display-height);
    position: absolute;
    display: flex;
    align-items: center;
}
.info-slider {
    /* clip-path: polygon(100% 20%, 90% 0, 0% 0%, 0% 100%, 90% 100%, 100% 80%);    background-color: white; */
    position: absolute;
    width: 250px;
    height: calc(var(--display-height) / 3);
    margin-bottom: 0;
    z-index: 500;
    background-color: rgba(0,0,0,0);
    backdrop-filter: blur(10px);
    cursor: pointer;
    border: 1px solid var(--hero);
    border-left: none;
}
.info-slider.closed {
    left: -200px;
}
.info-slider h2 {
    left: 175px;
    margin-top: 45px;

    pointer-events: none;
    position: absolute;
    rotate: 90deg;
    white-space:nowrap;
    font-family: var(--font);
}

.writeup-content {
    font-family: var(--font);
    width: 80%;
    padding: 10px;
    font-size: large;
    overflow-y: auto;
    height: calc(100% - 40px);
    cursor: default;
}

@media only screen and (min-width: calc(450px)) {
    .info-slider {
        width: 400px;
        margin-top: 120px;
    }
    .info-slider.closed {
        left: -350px;
    }
    .info-slider h2 {
        left: 325px;
    }

}

.light .random-code {
    color: var(--light-mod);
}

.dark .random-code {
    color: var(--dark-mod);
}

.random-code {
    font-size: 30pt;
    position: relative;
    bottom: 0;
    margin-block: 0;
    padding: 50px;
    padding-top: 205pt;
}

.side {
    rotate: 90deg;
}