/*#region*/ /* Meta */

/* Variables */
:root {
    --gridSize: 80px; /* [gridSize] = Size of imaginary tile grid that determines the size of various elements */
    --theCurve: cubic-bezier(.22,.72,.28,1); /* [theCurve] = Optimal timing curve for all movement animations */
}

/* Fonts */
@font-face {
    font-family: 'Mont6';
    src: url('../montserrat.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'Mont5';
    src: url('../montserrat.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Mont4';
    src: url('../montserrat.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Consolas';
    src: url('../consola.ttf') format('truetype');
}



/* #region */ /* Main */

/* Void */
html {
    background-color: black;
}

/* Global CSS */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;

    font-family: 'Mont6';
    color: white;
    font-size: 16px;
}



/*#region*/ /* General elements */


/* Links */
a {
    color: white;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
    
    position: relative;
    z-index: 0;

    transition: .2s;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: -1;
        transform: scaleX(0);
        transform-origin: left;
        transition: .2s;

    }

    &:hover {
        color: #0077eb;
    }

    &:hover::after {
        transform: scaleX(1);
    }

    &.selected {
        color: #0077eb;
    }

    &.selected::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: -1;
    }

}

/* Layer */
.layer {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: none;
    overflow: hidden;
}




/*#region*/ /* Console layer */
/* Console holds the fake console that plays during the intro */

.consoleLayer {
    padding: 40px;
}

.console {
    width: calc(100% - 80px);
    height: calc(100% - 80px);

    font-family: 'Consolas';
    white-space: pre;

    overflow: hidden;
}





/*#region*/ /* Start layer */
/* Start is just the "click anywhere to start" and stuff */

.startLayer div {

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: 'Mont5';
    font-size: 48px;
    text-align: center;

    color: rgb(105, 105, 105);

    padding: 20px;
}

.startLayer a {
    font-size: 12px;
    margin-top: 10px;

    color: rgb(67, 67, 67);
}



/*#region*/ /* Background layer */
/* Background provides a #0077EB background for all the layers of the actual website */

.backgroundLayer {
    background-color: #0077eb;
}



/*#region*/ /* Matrix layer */
/* Matrix is all the decorative stuff behind the content */

.matrixLayer {
    opacity: 1;
}

.grid {

    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 0);
    background-size: 40px 40px;
    background-position: -19px -19px;

    position: absolute;

    width: 150%;
    height: 150%;

}

.matrixLayer .square {
    position: absolute;
    opacity: .6;

    width: 40px;
    height: 40px;

    animation-name: matrixSquareInAnim;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;

}

.matrixLayer .square.disappear {
    animation-name: matrixSquareOutAnim !important;

}

@keyframes matrixSquareInAnim {
    0% {
        opacity: 0;
    }

    /* 100% is default state */
}

@keyframes matrixSquareOutAnim {
    /* 0% is default state */

    100% {
        opacity: 0;
    }
}


/*#region*/ /* Content layer */
/* Content holds the content box, the box at the center of the screen hosting the actual website content */

.contentLayer {
    flex-direction: column;
    align-items: center;
}


/* Container of entire box at the center */
.contentBox {
    
    width: 100%;
    height: 100%;
    max-width: 760px;

    margin-top: var(--gridSize);

    display: flex;
    flex-direction: column;
}


/* Attribute to add visible white border to div */
.whiteBorder {
    border: 1px solid white;
    box-shadow: 0px 0px 0px 1px white;
}

/* Top / navbar of content box */
.contentHead {
    background-color: #0077eb;
    height: var(--gridSize);
    display: flex;
}

/* contentHead nav div */
.contentHead nav {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;

    margin-right: calc(var(--gridSize) / 2);
}

/* contentHead nav links */
.contentHead nav a {
    text-decoration: none;
    margin-left: 60px;
    user-select: none;
}


/* Second div in content box, which holds the website content itself */
.contentBody {
    background-color: #0077eb;
    height: calc(100vh - (var(--gridSize) * 3));
    overflow: hidden;

    box-sizing: border-box; 
}

/* <embed> in contentBody */
.contentBody iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Third div of content box to hold bottom text */
.contentFoot {
    height: var(--gridSize);
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    font-family: 'Mont5';
    font-size: 12px;

    background-color: #0077eb;
    transform: translateY(1px);
}

.contentFoot div {
    opacity: 50%;
}

/* Div for ch logo in contentHead */
.headLogo {
    width: var(--gridSize);
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: .3s var(--theCurve);
    cursor: pointer;
}

.headLogo.selected {
    background-color: white;
}

/* ch logo in contentHead */
.headLogo img {
    width: var(--gridSize);
    
    user-select: none;
    transition: .3s var(--theCurve);

    scale: .5;
}

.headLogo img:hover {
    scale: .7;
}

.headLogo.selected img {
    content: url("../images/headLogoBlue.png");
    scale: .9;

}



/*#region*/ /* Transition layer */
/* Transition holds the overlaying animation that plays when transitioning between pages */

.transitionLayer {
    pointer-events: none;

    flex-direction: column;
    align-items: center;
}

/* Container of entire box at the center */
.transitionBox {

    width: 100%;
    height: 100%;
    max-width: 760px;

    margin-top: calc(var(--gridSize) * 2);
    margin-bottom: var(--gridSize);

    display: flex;
    flex-direction: column;

    transform: translateY(2px)
}

.transitionPixel {
    background-color: white;
    position: absolute;

    opacity: 0;
    transition: all .1s;
}

.transitionPixel.vis {
    opacity: 1;
}


/*#region*/ /* Debug layer */
/* Debug holds the debug box, which displays things like error messages directly on the website */

.debugLayer {
    pointer-events: none;
}

.debugBox {

    margin: var(--gridSize);
    padding: 40px;

    background-color: white;
    border: black 3px solid;
    width: 300px;
    max-width: 300px;
    max-height: 300px;

    overflow: scroll;

    color: black;
    font-family: 'Mont5';

}

.debugBox h1 {
    font-family: 'Mont6';
    margin-top: 0;
}

.debugBox img {
    width: 40%;
}


/*#region*/ /* Invisible layer */
/* Invisible holds elements that shouldn't be visible, like <audio> */

.invisibleLayer {
    display: none !important;
}



/* #region */ /* Intro Anim */


/* Background layer */

@keyframes backgroundIntroAnim {
    0% {
        opacity: 0;
    }
    /* 100% is default state */
}

.backgroundLayer.introAnim {
    animation-name: backgroundIntroAnim;
    animation-duration: 1s;
    animation-timing-function: linear;
}


/* Matrix layer */

@keyframes matrixIntroAnim {
    0% {
        clip-path: circle(0%);
    }
    100% {
        clip-path: circle(150%);
    }
}

.matrixLayer.introAnim {
    animation-name: matrixIntroAnim;
    animation-duration: 10s;
    animation-timing-function: var(--theCurve);
}


/* Content layer */

@keyframes contentIntroAnim {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    /* 100% is default state */
}

.contentLayer.introAnim {
    animation-name: contentIntroAnim;
    animation-duration: 2s;
    animation-timing-function: var(--theCurve);
}





/* #region */ /* Mobile */

@media (max-width: 600px) {

    .matrixLayer { /* Hide matrix */
        opacity: 0;
    }
    .contentBox { /* Delete content top gap */
        margin-top: 0;
    }
    .contentHead nav a { /* Shrink navbar */
        margin-left: 20px;
    }
    .transitionBox { /* Reposition transBox */
        margin-top: var(--gridSize);
    }

}

@media (max-width: 700px) {
    .startLayer { /* Shrink start text */
        font-size: 28px;
    }
}