@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");

:root {
    color-scheme: light dark;
}

body {
    font-family: "Rethink Sans", serif;
    background-color: light-dark(#fff, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    gap: 1rem;
}

.logo_wrapper {
    display: flex;
    align-items: center;
    flex-direction: row;
    font-family: monospace;
    font-size: 1.25rem;
    gap: 1rem;

    .social_logo {
        width: 2rem;
        height: 2rem;
    }

    .my_logo {
        width: 2rem;
        height: 2rem;

        path {
            fill: light-dark(#000, #fff);
        }
    }
}

.loader {
    --bg-size: 400%;
    --color-one: hsl(0, 0%, 80%);
    --color-two: hsl(0, 0%, 38%);
    background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 /
        var(--bg-size) 100%;
    color: transparent;
    background-clip: text;
    animation: move-bg 3.5s linear infinite;
}

@keyframes move-bg {
    to {
        background-position: var(--bg-size) 0;
    }
}

div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;

    .head {
        font-size: 1.5rem;
        letter-spacing: -0.025em;
    }

    .desc {
        opacity: 50%;
    }
}