:root {
    --header-height: 64px;
}


@keyframes shine {
    0% {
        left: -100px;
    }

    60% {
        left: 100%;
    }

    to {
        left: 100%;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    background-color: black;
    overflow-x: hidden;
}

#background-canvas {
    position: absolute;
    top: -100px;
    left: -100px;

    width: 100px;
    height: 100px;

    z-index: 0;
    pointer-events: none;
}


#header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100vw;
    height: var(--header-height);

    padding: 0 48px;

    background-color: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    will-change: backdrop-filter;

    font-family: "Nunito", sans-serif;

    z-index: 2;
}

#header>* {
    transition: transform .6s;
}

#header>*:hover {
    transform: scale(1.1)
}


#logo-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

#logo-icon {
    width: calc(var(--header-height) * .5);
    height: calc(var(--header-height) * .5);
}

#logo-title {
    color: white;
    text-decoration: none;

    font-family: "Oleo Script Swash Caps", sans-serif;
    font-size: calc(var(--header-height) * .4);
}

#login-button {
    color: white;
    text-decoration: none;

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

    font-size: calc(var(--header-height) * .5);
}

#login-button span {
    font-size: calc(var(--header-height) * .5);
}


#content {
    width: 100vw;
    height: 100vh;

    position: relative;
    /* transform: translateY(calc(var(--header-height) * -1)); */
    padding: 0 var(--header-height) var(--header-height) var(--header-height);

    /* background-color: rgba(255, 255, 255, .025); */
    color: white;


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

    gap: 5vh;

    pointer-events: none;
}

#content::before {
    content: "";
    position: absolute;
    top: -var(--header-height);
    /* This will visually shift #content */
    left: 0;
    width: 100%;
    height: var(--header-height);
    /* background-color: red; */
}

#content>* {
    pointer-events: all;
}

#text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5vh;

    text-align: center;
}

#slogan {
    font-family: "Nunito", sans-serif;
    font-size: var(--header-height);
}


.word.highlight {
    border-bottom-width: calc(var(--header-height) * .1);
    border-bottom-style: solid;
}


#message {
    font-family: "Nunito", sans-serif;
    font-size: calc(var(--header-height) * .3);
    color: rgb(190, 190, 190);
}


#buttons {
    display: flex;
    gap: 1vw;
}

.base-button {
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    vertical-align: center;

    font-family: "Nunito", sans-serif;
    font-weight: bold;
    color: white;

    cursor: pointer;
}


#open-app,
#see-more {
    height: calc(var(--header-height) * .6);
    padding: 0 calc(var(--header-height) * .4);

    border-radius: calc(var(--header-height) * .6);

    font-size: calc(var(--header-height) * .25);
}


#open-app {
    position: relative;
    background-color: rgb(30, 30, 30);

    display: flex;
    gap: calc(var(--header-height) * .125);

    overflow: hidden;
    transition: transform .3s;
}

#open-app * {
    font-size: calc(var(--header-height) * .25);
}

#open-app:hover {
    transform: scale(1.05);
}

#open-app:hover::before {
    animation: shine 1.5s ease-out infinite;
}

#open-app::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0) 70%);
    top: 0;
    left: -100px;
    opacity: 0.6;
}


#see-more {
    --shadow-color: rgb(0, 140, 255);
    background-color: white;
    color: black;
    box-shadow: 0 0 25px var(--shadow-color);

    transition: box-shadow .1s, transform .1s;
}

#see-more:hover {
    box-shadow: 0 0 5px var(--shadow-color),
        0 0 25px var(--shadow-color),
        0 0 50px var(--shadow-color),
        0 0 100px var(--shadow-color);
    transform: scale(1.05);
}

#nokey {
    position: absolute;
    top: 0;
    left: 0;

    /* pointer-events: none; */
    z-index: 0;
}

#go-to-bottom-button {
    position: absolute;

    bottom: calc(var(--header-height) * .6);
    left: 50%;
    transform: translateX(-50%);

    height: calc(var(--header-height) * .8);
    width: calc(var(--header-height) * .8);

    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: calc(var(--header-height) * .25);
    color: black;

    background-color: white;
    border: none;
    border-radius: calc(var(--header-height) * .6);

    overflow: hidden;
    transition: width .3s, height .3s, font-size .3s;

    cursor: pointer;
}

#go-to-bottom-button:hover {
    height: calc(var(--header-height) * .9);
    width: calc(var(--header-height) * .9);
    font-size: calc(var(--header-height) * .35);
}



#more-info {
    position: relative; 
    /* transform: translateY(calc(var(--header-height) * -1)); */

    width: 100vw;
    height: 100vh;

    color: white;

    display: flex;
    flex-direction: column;

    padding: 48px;

    z-index: 2;

    pointer-events: none;
}

#more-info > * {
    pointer-events: all;
}


.topic {
    width: 50%;
    height: 100%;

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

.topic.left {
    align-self: flex-end;
}

.topic-title {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
}

.topic-text {
    font-family: "Nunito", sans-serif;
    font-size: 16px;
    color: #eee;

    width: 70%;
    text-align: center;
}

#functions-list {
    display: flex;
    flex-direction: column;
    justify-self: center;

    width: max-content;
    text-align: start;
    list-style: lower-alpha;
}


#go-to-top {
    width: 100vw;
    height: calc(100vh - var(--header-height));

    position: relative;

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

    pointer-events: none;
}

#go-to-top > * {
    pointer-events: all;
}

#go-to-top-button {
    height: calc(var(--header-height) * .6);
    padding: 0 calc(var(--header-height) * .4);

    display: flex;
    gap: calc(var(--header-height) * .125);

    font-size: calc(var(--header-height) * .25);
    color: black;

    background-color: white;
    border: none;
    border-radius: calc(var(--header-height) * .6);

    overflow: hidden;
    transition: transform .3s;
}

#go-to-top-button:hover {
    transform: scale(1.05);
}


#footer {
    width: 100vw;
    height: var(--header-height);

    position: relative;

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

    color: white;
    font-family: "Nunito", sans-serif;

    background-color: black;
}