@import "fonts/Px-Grotesk.css";

:root {
    --a: #dee;
    --b: rgb(0, 179, 156);
    --b: color(display-p3 0.234 0.691 0.613);
    --c: rgb(0, 138, 120);
    --c: color(display-p3 0.168 0.532 0.471);
    --d: #333;
    --e: var(--c);
    --f: var(--b);
    --u: 20px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --a: #18191f;
        --b: rgb(0, 217, 177);
        --b: color(display-p3 0.04 0.835 0.702);
        --c: rgb(0, 95, 83);
        --c: color(display-p3 0.117 0.366 0.325);
        --d: #eee;
        --e: var(--b);
        --f: var(--c);
    }
}

@media (min-device-width: 960px) {
    :root {
        --u: 28px;
    }
}

html {
    min-height: 100svh;
}

body, h1, h4, figure, ul, li, p {
    margin: 0;
    padding: 0;
}

body {
    background: var(--a);
    color: var(--d);
    font-family: Px Grotesk, sans-serif;
    font-size: calc(var(--u) * 0.75);
    font-weight: 400;
    font-feature-settings: "ss01";
    line-height: var(--u);
}

main {
    position: relative;
    width: calc(var(--u) * 16);
    margin-inline: auto;
    margin-block: calc(var(--u) * 4);
}

h1 {
    font-size: calc(var(--u) * 2.9);
    letter-spacing: calc(var(--u) / -4);
    line-height: calc(var(--u) * 2);
    margin-block: calc(var(--u));
    margin-left: calc(var(--u) * -1);
    text-indent: calc(var(--u) * 0.6);
    font-weight: 900;
}

section {
    margin-block: var(--u);
}

li {
    list-style-type: none;
}

a {
    color: var(--e);
    text-decoration-color: var(--f);
    text-underline-offset: calc(var(--u) / 6);
    text-decoration-thickness: calc(var(--u) / 12);
}

#sls {
    display: inline-block;
    position: absolute;
    width: calc(var(--u) * 4);
    height: calc(var(--u) * 4);
    right: 0;
    bottom: calc(var(--u) * -6);
}

#sls:before, #sls:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    mask: url(sls.svg) center no-repeat;
    -webkit-mask: url(sls.svg) center top no-repeat;
    content: "";
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out;
    transform: rotate(.12rad);
}

#sls:before {
    background: var(--c);
    left: 0;
    top: 0;
}

#sls:after {
    background: var(--b);
    left: 0;
    top: 0;
}

#sls img {
    width: 100%;
    height: 100%;
    opacity: 0;
}

#sls:hover:after {
    transform: none;
}

#sls:hover:before {
    top: calc(var(--u) * 0.125);
    transform: none;
}