@font-face {
    font-family: roboto-flex;
    src: url("RobotoFlex.ttf");
}

body {
    --bg: #223;
    --transparent: rgba(0, 0, 0, 0.29);
    --transparent2: rgba(0, 0, 0, 0.5);
    --accent: #5500ff;
    --accent2: #8649ff;

    --grad1: #5757ff;
    --grad2: #9679ff;
    --grad3: #578cff;
    --grad4: #2e2eff;
    --grad5: #5858dc;

    --base-size: calc(1vw + 1vh);
    --foreground: #fff;
    --easing: linear(0, 0.002 0.4%, 0.009 0.9%, 0.019 1.3%, 0.035 1.8%, 0.056 2.3%, 0.08 2.8%, 0.139 3.8%, 0.201 4.7%, 0.277 5.7%, 0.592 9.5%, 0.725 11.2%, 0.844 12.9%, 0.94 14.5%, 0.981 15.3%, 1.017 16.1%, 1.05 16.9%, 1.08 17.8%, 1.103 18.6%, 1.124 19.5%, 1.14 20.4%, 1.151 21.3%, 1.159 22.4%, 1.162 23.5%, 1.159 24.7%, 1.152 25.9%, 1.143 27%, 1.128 28.3%, 1.05 34.3%, 1.031 35.9%, 1.016 37.4%, 1 39.2%, 0.989 40.9%, 0.981 42.7%, 0.976 44.5%, 0.974 46.8%, 0.975 49.4%, 0.997 60.7%, 1.004 67.3%, 1.004 72.8%, 1 88.7%, 1);

    background: var(--bg);
    color: var(--foreground);
    accent-color: var(--accent);
    font-family: roboto-flex;
}

*:focus {
    outline: white 1px solid;
}

.hidden {
    display: none;
}

::placeholder {
    color: rgba(255, 255, 255, 0.5)
}

@keyframes squish {
    0% {
        transform: scale(0.7, 1);
        opacity: 0;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.intro {
    animation: squish 1s var(--easing);
}

button {
    font-family: roboto-flex;
    color: var(--foreground);
    background: linear-gradient(0deg, var(--accent), var(--accent2));
    border: var(--foreground) 1px solid;
    transform-origin: top center;
    box-shadow: 0px 0px 0px var(--foreground);
    font-weight: 600;
    transition: all 1s var(--easing);
    font-size: calc(var(--base-size) * 1.5);
}

.box-fill {
    background: linear-gradient(0deg, var(--accent), var(--accent2));
    border: var(--foreground) 1px solid;
}

::backdrop {
    background: var(--transparent2);
}

input {
    font-family: roboto-flex;
    color: var(--foreground);
    background: linear-gradient(0deg, var(--accent), var(--accent2));
    border: var(--foreground) 1px solid;
    transform-origin: top center;
    box-shadow: 0px 0px 0px var(--foreground);
    font-weight: 600;
    transition: all 1s var(--easing);
    font-size: calc(var(--base-size) * 1.5);
}

.btn-large {
    font-size: calc(var(--base-size) * 2.3);
}

.secondary {
    background: var(--transparent);
    font-weight: 500;
}

input {
    background: var(--transparent);
    color: var(--foreground);
    font-weight: normal;
}

button:hover {
    font-weight: 800;
    scale: 1 0.95;
    box-shadow: 0px 3px 0px var(--foreground);
}

input:focus {
    scale: 1 0.95;
    box-shadow: 0px 3px 0px var(--foreground);
}

button:active {
    font-weight: 800;
    scale: 1 1;
    filter: brightness(110%);
    box-shadow: 0px 0px 0px var(--foreground);
}



h1 {
    font-size: calc(var(--base-size) * 4);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 10px;
    padding: 0;
}

.s-1 {
    font-size: calc(var(--base-size) * 3);
    font-weight: 600;
}

.s-2 {
    font-size: calc(var(--base-size) * 2);
    font-weight: 500;
}

.s-3 {
    font-size: calc(var(--base-size) * 1.5);
    font-weight: 500;
}

.s-4 {
    font-size: calc(var(--base-size) * 1);
    font-weight: 400;
}

.s-5 {
    font-size: calc(var(--base-size) * 0.5);
    font-weight: 400;
}

.pad {
    padding: 3px;
    margin: 6px;
}

dialog {
    animation: scaley 1s var(--easing);
    outline: var(--foreground) 2px solid;
    background: var(--transparent2);
    backdrop-filter: blur(5px);
    text-align: center;
    border: none;
}

@keyframes scaley {
    0% {
        opacity: 0;
        transform: scale(0.7);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

.box {
    border: var(--foreground) 1px solid;
    padding: 5px;
    background: var(--transparent2) !important;
    backdrop-filter: blur(10px);
}

@keyframes grad {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.centered {
    text-align: center;
    align-content: center;
}