:root {
    font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: "InterVariable", sans-serif;
        font-optical-sizing: auto;
        font-feature-settings: "ss01", "cv06", "cv11", "cv12", "cv13";
    }
}

@property --dark-color {
    syntax: "<color>";

    inherits: true;
    initial-value: #a5a1ee;
}

@property --light-color {
    syntax: "<color>";

    inherits: true;
    initial-value: #ed98b7;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    --dark-color: #a5a1ee;
    --light-color: #ed98b7;

    background-image: linear-gradient(
        to bottom right in oklch,
        var(--dark-color),
        var(--light-color)
    );
    background-attachment: fixed;

    min-height: 100dvh;

    padding-inline: calc(100dvw / sqrt(2) / 2);

    font-size: clamp(1.5rem, 1vh, 2rem);
    line-height: 1.5;

    display: grid;
    place-items: center;

    position: relative;

    color: oklch(from #9f7d9d 0.2 c h / 0.95);
}

@media (aspect-ratio < 1) {
    body {
        padding-inline: 15dvw;
    }
}

p {
    padding-block: 0.5em;
}

svg {
    top: 0;
    left: 0;

    position: absolute;

    z-index: -1;
}

main {
    padding-block: 10dvh;
}

h1 {
    padding-bottom: 0.75em;
}