@font-face {
    font-family: "brand";
    src: url(/src/fonts/aleo/Aleo-Regular.otf) format("opentype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "brand";
    src: url(/src/fonts/aleo/Aleo-Bold.otf) format("opentype");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}

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

@font-face {
    font-family: "text";
    src: url(/src/fonts/quicksand/Quicksand_Book.otf) format("opentype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "text";
    src: url(/src/fonts/quicksand/Quicksand_Bold.otf) format("opentype");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}

: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: 30px;
    --line-height: 1.6;

    --h1: 50px;
    --h2: 45px;
    --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: #fff;
    --root-invert: #000;

    --hue: 355;
    --hue-2: 200;
    --hue-3: 300;

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

    --bg-1-l: 95%;
    --bg-2-l: 95%;
    --bg-3-l: 95%;

    --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: 30%;
    --fg-3-s: 40%;

    --fg-1-l: 20%;
    --fg-2-l: 50%;
    --fg-3-l: 83%;

    --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-2), var(--fg-3-s), var(--fg-3-l));

    /* 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: 20%;

    --txt-inv-s: 80%;
    --txt-inv-l: 90%;

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

    --txt-2: hsl(var(--hue), 60%, 60%);
}

::selection {
    background-color: var(--acc);
    color: var(--txt)
}

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

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

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

body {
    margin: 0;
    width: 100%;

    position: relative;
    overflow-x: hidden;

    display: flex;
    justify-content: 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: 100px 0;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

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 {
    width: 100%;
    max-width: var(--whole-w);
    min-height: 100vh;

    position: relative;

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

/* -- Details -- */
.deco {
    position: absolute;
    left: 0;
    width: 100%;
}

.deco.top-sit {bottom: 100%}
.deco.top-hang {top: 0}
.deco.bot-sit {bottom: 0}
.deco.bot-hang {top: 100%}

svg.up {transform: translateY(min(-1px, -.03vw))}
svg.down {transform: translateY(max(1px, .03vw))}