@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --bg0: #1A1633;
    --bg1: #231E40;

    --violet: #7B2CFF;
    --violet2: #B48CFF;

    --ink: #F2EEFF;
    --ink2: rgba(242, 238, 255, 0.78);
    --ink3: rgba(242, 238, 255, 0.58);

    --container: 1120px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;

    width: 100%;
    overflow-x: hidden;
}

body {
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;

    background:
        radial-gradient(1100px 620px at 18% 22%, rgba(123, 44, 255, 0.32), transparent 65%),
        radial-gradient(980px 640px at 84% 18%, rgba(180, 140, 255, 0.24), transparent 68%),
        radial-gradient(1100px 700px at 60% 92%, rgba(123, 44, 255, 0.20), transparent 70%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.00)),
        linear-gradient(180deg, var(--bg0), var(--bg1));

    background-attachment: fixed;
}


body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.035), transparent 42%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.028), transparent 44%),
        radial-gradient(circle at 60% 75%, rgba(255, 255, 255, 0.022), transparent 46%);
    mix-blend-mode: screen;
    opacity: 0.50;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(1px 1px at 12% 22%, rgba(242, 238, 255, 0.55), transparent 60%),
        radial-gradient(1px 1px at 36% 18%, rgba(180, 140, 255, 0.45), transparent 60%),
        radial-gradient(1px 1px at 68% 26%, rgba(242, 238, 255, 0.45), transparent 60%),
        radial-gradient(1px 1px at 84% 40%, rgba(123, 44, 255, 0.45), transparent 60%),
        radial-gradient(1px 1px at 22% 68%, rgba(242, 238, 255, 0.40), transparent 60%),
        radial-gradient(1px 1px at 78% 74%, rgba(180, 140, 255, 0.40), transparent 60%);
    opacity: 0.75;
}

section {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.site-header,
.site-footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}