body {
    margin: 0;
    min-height: 100vh;
    background:
            linear-gradient(to bottom,
                                #0a0a1a 0%,
                                #1a1a3a 79%,
                                #0a2a1a 80%,
                                #0a1a0a 100%);
    color: rgb(64, 188, 0);
    text-shadow: 0 0 1px black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
}

a {
    color: inherit;
    text-decoration: inherit;
    &:hover {
        text-decoration: underline;
    }
}


h1, p {
    user-select: none;
}

.content {
    z-index: 20;
    display: flex;
    flex-direction: column;
}


.particle {
    border-radius: 20px;
    width: 40px;
    height: 40px;

    --rotation: 0deg;
    --scale: 1;
    --x: 0;
    --y: 0;
    --opacity: 1;
    --gradient-color1: blue;
    --gradient-color2: red;

    position: fixed;
    left: var(--x);
    top: var(--y);
    z-index: 10;
    will-change: transform, opacity, left, top;
    cursor: grab;
    transform:
        rotate(var(--rotation))
        scale(var(--scale));
    pointer-events: auto;
    opacity: var(--opacity);
    display: flex;

    svg {
        display: block;
        margin: auto;
        stop:first-of-type {
            stop-color: var(--gradient-color1);
        }
        stop:nth-of-type(2) {
            stop-color: var(--gradient-color2);;
        }
        path {
            stroke-width: 0.25;
            vector-effect: non-scaling-stroke;
            stroke: var(--gradient-color1);
        }
    }


    border: 1px solid transparent;

    &:hover {
        border: 1px solid rgba(1, 65, 114, 0.3);
    }

    &.grabbed {
        cursor: grabbing;
        border: 1px solid transparent;
    }
}