body, html {
    background-color: var(--dark-blue);
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Roboto';
    scroll-behavior: smooth;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;

    position: relative;
    width: 100vw;
    height: 100%;
    min-height: -webkit-fill-available;
    overflow: hidden;
}

.light-theme {
    background-color: var(--light-gray);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat';
    font-weight: bold;
}

:root {
    --light-gray: #ebebeb;
    --pink: #d64b5b;
    --dark-blue: #0e0d1b;
    --yellow: #dca96c;
}

::-webkit-scrollbar {
    width: 0px;
}

.blob {
    width: 700px;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    translate: -50% -50%;
    z-index: 1;
    opacity: .5;
    transition: 1s ease-in-out;
    animation: rotate 20s linear infinite;
}

.blob svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
}

.blob.hidden {
    opacity: 0 !important;
}

.blur {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    translate: -50% -50%;
    z-index: 3;
    backdrop-filter: blur(70px);
}

@keyframes rotate {
    0% {rotate: 0deg;}
    100% {rotate: 360deg;}
}

.container {
    padding: 2.25rem 4rem;
    border-radius: 1rem;
    background: #ffffff02;
    position: relative;
    z-index: 5;
    box-shadow:  11px 11px 22px #0a0a145a,
                -11px -11px 22px #1210225a;
    background: #0e0d1b93;
    backdrop-filter: blur(50px);
    text-align: center;
    width: 450px;
    box-sizing: border-box;
    opacity: 0;
    transition: .75s;
    animation: showUpContainer .75s .5s ease forwards;
    overflow: hidden;
    z-index: 100;
}

.decoding .container {height: 170px;}
.decoded .container {height: 190px;}

.title {position: relative; padding-top: 47px; transition: .5s;}
.decoded .title {padding-top: 0px;}
.decoding-title {margin: .5rem 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

.title, .decoded .subtitle, .decoded .links, .decoding-title {
    opacity: 0;
    animation: showUp .75s ease forwards;
}

.title h1 {animation-delay: .75s;}

.decoded .decoding-title {
    animation: dissapear .75s ease forwards;
}

h1, p {
    padding: 0;
    margin: 0;
}

.title h1 {
    margin-bottom: .75rem;
    font-size: 2.5rem;
    overflow: hidden;
    position: relative;
    color: white;
}

.subtitle {
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: .75rem;
}

.links > .link {
    color: var(--pink);
    text-decoration: none;
    transition: .3s;
    font-size: 1.5rem;
    margin: 0 5px;
}

.link:hover {color: white;}

@keyframes showUp {
    to {opacity: 1;}
}

@keyframes showUpContainer {
    to {opacity: 1;}
}

@keyframes dissapear {
    0% {opacity: 1;}
    66% {opacity: 0; display: block;}
    76% {opacity: 0; display: block;}
    100% {opacity: 0; display: none;}
}

.theme-switcher {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 1rem;
    padding: .75rem;
    margin: .5rem;
    border-radius: 1rem;
    color: white;
    background: #1b19345e;
    cursor: pointer;
    z-index: 10;
}

.light-theme .blob {
    opacity: 1;
}

.light-theme .theme-switcher {
    color: var(--dark-blue);
    background: #ffffff66;
}

.light-theme .container {
    box-shadow:  11px 11px 22px #d9d9d94e,
    -11px -11px 22px #ffffff4e;
    background-color: #ebebeb4f;
    backdrop-filter: blur(50px);
}

.light-theme .title h1, .light-theme .subtitle, .light-theme .link:hover, .light-theme .decoding-title {
    color: var(--dark-blue);
}

.decoding .links, .decoding .subtitle {opacity: 0;}

@media only screen and (max-width: 768px) {
    .blob {
        top: 45% !important;
        left: 60% !important;
        width: 600px;
    }

    .blur {
        backdrop-filter: blur(100px);
    }

    .container {
        width: 90%;
    }

    .title h1 {
        font-size: 2rem;
    }

    .decoding .container {height: calc(100px + 4rem);}
    .decoded .container {height: calc(110px + 4rem);}
}