:root {
    --violet: #5b4bff;
    --ink: #0e0d12;
    --pink: #ff6fd8;
    --lime: #CDFF47;
    --white: #ffffff;
    --sand: #f2f0e8;
    --text: #171717;
    --acid: #d3fb01;
    --muted: #abaaaf;
    --muted-ink: #5f5d57;
    --grey: #737373;
    --muted-lime: #5a8200;
    --ink-deep: #06050a;
    --paper: #fafafa;

    --noise: url('../img/noise.webp');
    --ink-25: rgba(14, 13, 18, 0.25);

    --f-body: 'Inter', sans-serif;
    --f-display: 'Impact', sans-serif;

    --max-w: 1440px;
    --pad: 80px;
    --pad-md: 48px;
    --pad-sm: 20px;
}

.content-wrap {
    --page-margin: var(--pad);
    max-width: var(--max-w);
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
    margin-left: auto;
    margin-right: auto;
}

.content-wrap--inner {
    --page-margin: 120px;
}

@media (max-width: 1380px) {
    .content-wrap--inner {
        --page-margin: var(--pad-md);
    }
}

@media (max-width: 767px) {
    .content-wrap--inner {
        --page-margin: var(--pad-sm);
    }
}

@media (max-width: 390px) {
    .content-wrap--inner {
        --page-margin: 16px;
    }
}

.decor-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

@media (max-width: 1280px) {
    .content-wrap {
        --page-margin: var(--pad-md);
    }
}

@media (max-width: 767px) {
    .content-wrap {
        --page-margin: var(--pad-sm);
    }
}

@media (max-width: 390px) {
    .content-wrap {
        --page-margin: 16px;
    }
}

body {
    position: relative;
    background: var(--white);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: clip;
}