@font-face {
    font-family: 'Cal Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/CalSans-Regular.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/fonts/Outfit-VariableFont_wght.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(/assets/fonts/Comfortaa-VariableFont_wght.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --primary: #00a6ff;
    --secondary: #ffa3e8;
    --invert: 212,212,212;
    --visibility: 1;
    --foreground: 0,0,0;
    --background: 245,250,255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --invert: 0,0,0;
        --visibility: 0;
        --foreground: 255,255,255;
        --background: 0,8,24;
    }
}

* {
    font-family: "Cal Sans", sans-serif;
    box-sizing: border-box;
    color: rgb(var(--foreground));
    transition: .32s cubic-bezier(0.165, 0.84, 0.44, 1);
}

html {
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--foreground),.1) transparent;
    background-color: rgb(var(--background));
    animation: init-html 1s cubic-bezier(0.075, 0.82, 0.165, 1) both;
}

body {
    height: 100vh;
    margin: 0;
    padding: 1rem;
    animation: init-body 1s cubic-bezier(0.075, 0.82, 0.165, 1) both;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 28vh 1rem;
}

h1 {
    font-size: 2rem;
    letter-spacing: 0.12rem;
    margin: 1rem;
}

p {
    line-height: 1.32rem;
}

.font-outfit {
    font-family: "Outfit", sans-serif;
}

.font-cal-sans {
    font-family: "Cal Sans", sans-serif;
}

.font-comfortaa {
    font-family: "Comfortaa", sans-serif;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border-top: 2px solid rgb(var(--foreground),.1);
    backdrop-filter: blur(32px);
    padding: 24px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a,
span {
    font-family: monospace;
    font-size: 12px;
    opacity: 0.64;
    color: rgb(var(--foreground));
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.link {
    color: var(--primary);
    padding: 4px 8px;
    background-color: rgb(var(--foreground),.1);
    border-radius: 24rem;
}


.logo {
    --size: 4.8rem;
    --weight: 0.64rem;
    width: var(--size);
    height: var(--size);
    min-width: var(--size);
    min-height: var(--size);
    display: block;
    position: relative;
    margin: 1.2rem;

    .hero {
        position: absolute;
        top: 0;
        left: 0;
        width: 92%;
        height: 92%;
        border-radius: 100%;
        border: var(--weight) solid var(--primary);
    }
    .dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-color: var(--secondary);
        width: var(--weight);
        height: var(--weight);
    }
}

.block {
    border: 2px solid rgb(var(--invert), calc(var(--visibility) * 0.06));
    background-color: rgb(var(--invert), 0.12);
    padding: 2.4rem;
    border-radius: 2.4rem;
    max-width: 386px;
    :first-child {
        margin-top: 0;
    }
    :last-child {
        margin-bottom: 0;
    }
}
ul:hover {
    li:not(:hover) {
        opacity: 0.32;
        .block {
            border-color: transparent;
            background-color: rgb(var(--invert), 0.32);
        }
    }
    li:hover .block {
        background-color: rgb(var(--foreground),0.06);
        border-color: rgb(var(--foreground),.04);
        transform: translateY(-6px);
        box-shadow: 0px 6px 32px rgb(var(--foreground),.04);
    }
}

@keyframes init-html {
}

@keyframes init-body {
}

.animate-fade-up {
    animation: fade-up 0.64s cubic-bezier(0.075, 0.82, 0.165, 1) both;
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(32px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}