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

:root {
    --factor: 1;
    --bg-color: #bf3;
    --bg-mask-color: rgba(127, 255, 0, 0.5);
    --bg-mask-size: calc(var(--factor) * 50vw);
}

@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bg-color: color(display-p3 0.7 1.0 0.2);
        --bg-mask-color: color(display-p3 0.5 1.0 0.0 / 1);
    }
}

html {
    background: var(--bg-color);
    font-family: Px Grotesk, sans-serif;
    font-feature-settings: "ss01";
    font-size: calc(var(--factor) * 2vw);
    font-weight: 400;
    line-height: 1.5;
    color: #360;
}

html, body {
    margin: 0;
    padding: 0;
}

body::before {
    position: absolute;
    content: "";
    inset: 0;
    z-index: -1;
    animation: 90s linear 0s infinite running slide;
    background: var(--bg-mask-color);
    mask-image: url(ss.svg);
    mask-mode: alpha;
    mask-size: var(--bg-mask-size);
    -webkit-mask-image: url(ss.svg);
    -webkit-mask-mode: alpha;
    -webkit-mask-size: var(--bg-mask-size);
}

main {
    display: flex;
    flex-direction: column;
    margin: calc(15vw / var(--factor)) calc(30vw / var(--factor));
}

h1 {
    font-size: calc(var(--factor) * 6vw);
    font-weight: 900;
    line-height: calc(var(--factor) * 5vw);
    letter-spacing: calc(var(--factor) * -0.4vw);
    margin: 0;
    color: #130;
}

h4 {
    margin: calc(var(--factor) * 0.5vw) 0 0;
    font-weight: 400;
}

ul {
    list-style: none;
    margin: calc(var(--factor) * 2.5vw) 0 0;
    padding: 0;
}

a {
    color: #36f;
}

@keyframes slide {
    from {
        mask-position: calc(var(--factor) * 10vw) calc(var(--factor) * 20vw);
        -webkit-mask-position: calc(var(--factor) * 10vw) calc(var(--factor) * 20vw);
    }

    to {
        mask-position: 0 0;
        -webkit-mask-position: 0 0;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --factor: 1.5;
    }
}