@font-face {
    font-family: "brand";
    src: url(/src/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf) format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "display";
    src: url(/src/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf) format("truetype");
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "text";
    src: url(/src/fonts/WorkSans/WorkSans-Regular.ttf) format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "text";
    src: url(/src/fonts/WorkSans/WorkSans-Bold.ttf) format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: bold;
}

:root {
    /* -- Font -- */
    --brand-font: "brand", monospace, sans-serif;
    --display-font: "display", monospace, sans-serif;
    --text-font: "text", sans-serif;

    /* -- Sizing -- */
    font-size: 20px;
    --max-w: 700px;
    --max-w-2: 1000px;
    --whole-w: 1200px;

    --side-pad: 0px;
    --line-height: 1.6;

    --h1: 50px;
    --h2: 40px;
    --h3: 35px;
    --h4: 30px;
    --h5: 26px;
    --h6: 23px;
    --h7: 18px;
    --h8: 16px;
    --h9: 14px;

    --size-1: 5px;
    --size-2: 10px;
    --size-3: 20px;
    --size-4: 40px;
    --size-5: 130px;
    --size-6: 250px;

    /* -- Colors -- */
    --root: #000;
    --root-invert: #fff;

    --hue: 260;
    --hue-2: 200;
    --hue-3: 33;
    --hue-4: 29;

    /* Background */
    --bg-1-s: 15%;
    --bg-2-s: 40%;
    --bg-3-s: 15%;

    --bg-1-l: 10%;
    --bg-2-l: 15%;
    --bg-3-l: 10%;

    --bg: hsl(var(--hue), var(--bg-1-s), var(--bg-1-l));
    --bg-2: hsl(var(--hue-2), var(--bg-2-s), var(--bg-2-l));
    --bg-3: hsl(var(--hue-3), var(--bg-3-s), var(--bg-3-l));

    /* Foreground */
    --fg-1-s: 50%;
    --fg-2-s: 50%;
    --fg-3-s: 90%;

    --fg-1-l: 50%;
    --fg-2-l: 50%;
    --fg-3-l: 60%;

    --fg: hsl(var(--hue), var(--fg-1-s), var(--fg-1-l));
    --fg-2: hsl(var(--hue-2), var(--fg-2-s), var(--fg-2-l));
    --fg-3: hsl(var(--hue-3), var(--fg-3-s), var(--fg-3-l));

    --icon-1: hsl(250, 70%, 100%);
    --icon-2: hsl(220, 70%, 55%);
    --icon-3: hsl(220, 20%, 70%);

    /* Accent */
    --acc-1-s: 80%;
    --acc-2-s: 80%;
    --acc-3-s: 80%;

    --acc-1-l: 60%;
    --acc-2-l: 60%;
    --acc-3-l: 60%;

    --acc: hsl(var(--hue), var(--acc-1-s), var(--acc-1-l));
    --acc-2: hsl(var(--hue-2), var(--acc-2-s), var(--acc-2-l));
    --acc-3: hsl(var(--hue-3), var(--acc-3-s), var(--acc-3-l));

    /* Text */
    --txt-s: 80%;
    --txt-l: 90%;

    --txt: hsl(var(--hue), var(--txt-s), var(--txt-l));
    --txt-2: hsl(var(--hue-2), var(--txt-s), var(--txt-l));
    --txt-3: hsl(var(--hue-3), var(--txt-s), var(--txt-l));

    --txt-inv: var(--bg);
}

::selection {
    background-color: hsl(calc(var(--hue) - 100), var(--acc-1-s), var(--acc-1-l));
    color: var(--txt-inv)
}

* {
    box-sizing: border-box;
    line-height: normal;
    scroll-margin-top: 100px
}

html {
    display: flex;
    justify-content: center;

    scroll-behavior: smooth;
    overscroll-behavior-x: none;
}

body {
    margin: 0;
    width: 100%;

    position: relative;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--root);
    color: var(--txt);
    font-family: var(--text-font);
}

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: var(--txt);
    background-color: var(--bg);
}

footer {
    width: 100%;
}

.footer-pad {
    padding: 200px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 20px;
    z-index: 0;
    font-size: var(--h8);
}
.footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-socials > a {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    text-decoration: none;
    color: inherit
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: normal;
}

p {line-height: var(--line-height)}

h1, .h1 {font-size: var(--h1)}
h2, .h2 {font-size: var(--h2)}
h3, .h3 {font-size: var(--h3)}
h4, .h4 {font-size: var(--h4)}
h5, .h5 {font-size: var(--h5)}
h6, .h6 {font-size: var(--h6)}
.h7 {font-size: var(--h7)}
.h8 {font-size: var(--h8)}
.h9 {font-size: var(--h6)}

.container-hold {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, var(--root) 400px);
}

.container {
    width: 100%;
    max-width: var(--whole-w);
    min-height: 100vh;

    position: relative;

    display: flex;
    align-items: center;
    flex-direction: column;
}