:root {
    --blue: #3B395D;
    --purple: #9085BC;
    --rose: #F2CBE0;
    --pink: #CB6D9A;
    --magenta: #8F477B;

    --blue-transparent: rgba(59, 57, 93, 0.3);
    --purple-transparent: rgba(144, 133, 188, 0.3);
    --rose-transparent: rgba(242, 203, 224, 0.3);
    --pink-transparent: rgba(203, 109, 154, 0.3);
    --magenta-transparent: rgba(143, 71, 123, 0.3);

    --blue-faded: rgba(59, 57, 93, 0.15);
    --purple-faded: rgba(144, 133, 188, 0.15);
    --rose-faded: rgba(242, 203, 224, 0.15);
    --pink-faded: rgba(203, 109, 154, 0.15);
    --magenta-faded: rgba(143, 71, 123, 0.15);
}

* {
    margin: 0;
    padding: 0;
    cursor: none;
}

body {
    margin: 0 10%;
    height: 100vh;
    font-family: "Henri Didot", serif;
    /* Base background color */
    background-image:
            radial-gradient(250px at 20% 30%, var(--rose-transparent), transparent),
            radial-gradient(300px at 80% 70%, var(--pink-transparent), transparent),
            radial-gradient(350px at 50% 50%, var(--purple-transparent), transparent),
            radial-gradient(270px at 10% 80%, var(--magenta-transparent), transparent),
            radial-gradient(300px at 90% 20%, var(--blue-transparent), transparent),

            radial-gradient(400px at 30% 40%, var(--rose-faded), transparent),
            radial-gradient(450px at 70% 60%, var(--pink-faded), transparent),
            radial-gradient(500px at 40% 70%, var(--purple-faded), transparent),
            radial-gradient(420px at 15% 85%, var(--magenta-faded), transparent),
            radial-gradient(450px at 85% 15%, var(--blue-faded), transparent);
}

a {
    text-decoration: none;
    color: inherit;
}

header {
    font-family: "FoglihtenNo07", serif;
    font-size: 28px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
}

div {
    margin: auto;
    max-width: 800px;
    font-size: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

main div span:first-child {
    align-self: flex-start;
}

main div span:last-child {
    align-self: flex-end;
    margin-top: -80px;
}


.cursor {
    position: absolute;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50%;
    pointer-events: none;
    z-index: 7777;

    background: radial-gradient(circle, var(--pink) 30%, var(--magenta) 70%);
    box-shadow: 0 0 1px var(--pink), 0 0 1px var(--magenta);

    transition: transform 0.1s linear;
    mix-blend-mode: difference;
}