:root {
    
}

* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    background: #020f12;
    background: conic-gradient(circle, rgba(2, 15, 18, 1) 0%, rgba(11, 20, 23, 1) 65%, rgba(29, 29, 33, 1) 100%);
    position: relative;

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

@keyframes disappear-animation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-2em);
        opacity: 0;
    }
}

@keyframes appear-animation {
    0% {
        transform: translateY(2em);
        opacity: 0;
    }
    100% {
        transform: translateY(0em);
        opacity: 1;
    }
}

p {
    text-align: center;
    font-size: 2em;
    color: white;
}

#toggleable-content {
    max-width: 60%;
    position: relative;
    animation-fill-mode: forwards;
    opacity: 0;
}

#main-text {
    position: absolute;
    top: 0;
    display: block;
}

.invisible-chars {
    color: transparent;
}

#toggleable-content.appear {
    animation-name: appear-animation !important;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
}

#toggleable-content.disappear {
    animation-name: disappear-animation;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
}

@keyframes floating-anim {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

#continue-text {
    color: transparent;
    font-style: italic;
    position: absolute;
    bottom: 2em;
    animation: floating-anim 8s ease-in-out infinite, continue-shimmer 8s infinite ease-in;
    opacity: 1;
    transition: all 0.25s;
    cursor: default;
    background: #282E3E;
    background: linear-gradient(305deg,
    rgba(40, 46, 62, 1) 0% 50%, 
    #07262e 50% 55%,
    rgba(40, 46, 62, 1) 55% 60%,
    #07262e 60% 63%,
    rgba(40, 46, 62, 1) 63%);
    background-clip: text;
    background-size: 400% 400%;
    padding-inline: 1em;
}

#continue-text::after {
    content: 'tap to continue';
}

@media (any-hover: hover) {
    #continue-text::after {
        content: 'click to continue';
    }
}

#continue-text.hidden {
    opacity: 0;
}

@keyframes continue-shimmer {
    0% {background-position-x: 100%;}
    45% {background-position-x: 100%;}
    70% {background-position-x: 0%;}
    100% {background-position-x: 0%;}
}