/*===============================================
== Variables
=================================================*/

:root {
    --transitionSpeed: 0.1s;
    --altHoverSpeed: 0.5s;
    --animationSpeed: 2s;

    /* Sizes */
    --padding: 10px;
    --shadowSize: 4px;
    --borderSize: 2px;
    --radius: 8px;
    --buttonSize: 20px;
    --sidebarSize: 350px;

    /* Text colors */
    --textColor-lightContrast: rgb(240, 240, 250);
    --textColor-light: rgb(180, 180, 190);
    --textColor-dark: rgb(20, 20, 24);
    --textColor-darkContrast: rgb(4, 4, 6);

    /* Panel colors */
    --color-highlight: rgb(130, 130, 146);
    --color-midTint: rgb(80, 80, 94);
    --color-mid: rgb(44, 44, 48);
    --color-base: rgb(30, 30, 34);
    --color-dark: rgb(18, 18, 20);

    /* Accent colors */
    --color-blue: rgb(233, 124, 0);
    --color-lightblue: rgb(255, 231, 126);
    --color-indigo: rgb(91, 111, 133);
    --color-purple: rgb(113, 117, 179);

    /* Transparent colors */
    --color-shadow: rgba(0, 0, 0, 0.5);
    --page-height: 5000px;
}

/*===============================================
== Fonts
=================================================*/

@font-face {
    font-family: 'TellYouWhat';
    src: url(./src/TellYouWhatv1b.woff);
}

@font-face {
    font-family: 'TellYouWhat-light';
    src: url(./src/TellYouWhatlight.woff);
}

/*===============================================
== Animations
=================================================*/

@keyframes fly-in-right {
    from {
        opacity: 0;
        top: 100px;
        left: -100vw;
        transform: rotate(-20deg);
    }
    to {
        opacity: 1;
        top: 0px;
        left: 0px;
        transform: rotate(0deg);
    }
}

@keyframes fly-in-left {
    from {
        opacity: 0;
        top: 100px;
        left: 100vw;
        transform: rotate(20deg);
    }
    to {
        opacity: 1;
        top: 0px;
        left: 0px;
        transform: rotate(0deg);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        top: 20px;
    }
    to {
        opacity: 1;
        top: 0px;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        top: 0px;
    }
    to {
        opacity: 0;
        top: 20px;
    }
}

.fly-right {
    animation-name: fly-in-right;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-duration: var(--animationSpeed);
}

.fly-left {
    animation-name: fly-in-left;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-duration: var(--animationSpeed);
}

.fade-in {
    animation-name: fade-in;
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-duration: var(--animationSpeed);
}

.fade-out {
    animation-name: fade-in;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-duration: var(--animationSpeed);
}

/*===============================================
== Comon
=================================================*/

body {
    padding: 0px;
    margin: 0px 0px 50px;

    background-color: #110c08;
    /* background-image: linear-gradient(var(--color-base), var(--color-dark)); */
    /* background-image: url(./src/SpaceBG.jpg); */
    background-attachment: fixed;

    color: var(--textColor-light);
    font-family: 'TellYouWhat-light';
    font-size: 16px;

    text-align: center;
    /* overflow: hidden; */
    height: var(--page-height);
}

h1 {
    position: relative;
    display: block;

    margin: 2vw 1vw;

    background: linear-gradient(var(--color-blue), var(--color-lightblue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* font-family: 'TellYouWhat'; */
    font-weight: bolder;
    /* font-size: 4em; */
    font-size: 5vw;

    z-index: 10;
}

h2 {
    font-weight: normal;
    font-size: 40px;
}

a {
    position: relative;
    margin: auto 0.25vw;
    z-index: 10;
}

.button-group > a {
    display: inline-block;
    position: relative;

    height: 2vw;

    text-decoration: none;
    color: var(--textColor-light);
    line-height: 2vw;
    white-space: nowrap;

    vertical-align: middle;

    border-bottom: 2px solid #ffffff00;
    transition: 0.2s;
}

.button-group > a:hover {
    border-bottom: 2px solid #ffffff88;
}

.button-group > a > img {
    width: 100%;
    height: 100%;
}

/*===============================================
== Background
=================================================*/

@keyframes parallax {
    to {
        transform: translateY(calc(var(--parallax-speed) * 1000px));
    }
}

.parallax {
    position: relative;
    min-height: 68vw;
    display: grid;
    grid-template-areas: "stack";
}

.parallax > * {
    grid-area: stack;
    animation: parallax linear;
    animation-timeline: scroll();
}

.parallax > img {
    width: 100%;
    user-select: none;
    pointer-events: none;

    filter: sepia(0.2);
}

.header {
    position: absolute;
    top: 7vw;
    right: 17vw;
    width: 31vw;

    filter: invert();
    
    /* --parallax-speed: 2; */
    /* z-index: 10; */
    --parallax-speed: 0.8;
    z-index: 1;
}

#header-content {
    position: relative;
    -webkit-filter: blur(0px);
    filter: blur(0px);
}

#header-content > img {
    width: 31vw;
}

#header-content .button-group {
    position: absolute;
    text-align: right;
    bottom: 2vw;
    right: 10vw;
}

#bg-far {
    --parallax-speed: 0.9;
    z-index: 0;

    position: absolute;
    top: -10vw;
}

#bg-mid {
    --parallax-speed: 0.35;
    z-index: 1;
}

#bg-close {
    --parallax-speed: 0;
    z-index: 2;
    position: absolute;
    top: 3vw;
}

#bg-foliage {
    --parallax-speed: -0.5;
    z-index: 3;

    position: absolute;
    top: 44.25vw;
}

/*===============================================
== Content
=================================================*/

.content {
    display: inline-block;
    position: relative;

    padding-top: var(--padding);

    width: 100%;
    /* height: auto; */
    /* height: 500vh; */
    height: 100%;

    z-index: 0;

    /* user-select: none; */
}

.embed-video {
    width: 80%;
    height: 45vw;
}

.footer {
    display: inline-block;
    position: absolute;
    
    width: 100%;
    height: 20px;

    bottom: 0px;
    left: 0px;

    color: var(--color-blue);

    /* background-color: white; */
}