/* Custom Fonts */

@font-face {
    font-family: PPSupplyMono;
    src:url("/src/fonts/PPSupplyMono-Regular.otf");
    font-weight: normal;
}

body {
    margin: 0;
    width: 100vw;
    overflow: hidden;
    
    color: white;
    font-family: 'PPSupplyMono', sans-serif;
    font-size: 1.5vmin;
    
    background: radial-gradient(circle at bottom, rgb(9, 0, 18) 0, black 100%);
}

:root {
    --ae: 30vmin;
}

.system {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: rgba(0, 0, 0, 0.1) center / 200px 200px round;
    
}

.sun {
    --size: 15vmin;
    width: 100%;
    height: 100%;

    &::after {
        z-index: -1;
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--size);
        height: var(--size);
        transform: translate(-50%, -50%);
        background: rgb(255, 243, 191);
        border-radius: calc(infinity * 1px);
    }
}
    
@property --x {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --y {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.mercury {
    --size: 1vmin;
    --radius: calc(0.4 * var(--ae));
    --speed: calc(88 / 365);
    background-color: rgb(81, 81, 81);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Mercury';
        position: absolute;
        left: calc(var(--size) + 0.5vmin);
        top: calc(var(--size) - 0.5vmin);
    }
}
.venus {
    --size: 2vmin;
    --radius: calc(0.72 * var(--ae));
    --speed: calc(225 / 365);
    background-color: rgb(109, 72, 58);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Venus';
        position: absolute;
        left: var(--size);
        top: calc(-1.2 * var(--size));
    }
}

.earth {
    --size: 2vmin;
    --radius: calc(var(--ae) * 1);
    --speed: 1;
    background-color: rgb(52, 55, 100);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Earth';
        position: absolute;
        left: var(--size);
        top: calc(-1.2 * var(--size));
    }
}

.mars {
    --size: 1.5vmin;
    --radius: calc(1.52 * var(--ae));
    --speed: calc(687 / 365);
    background-color: rgb(92, 43, 38);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Mars';
        position: absolute;
        left: var(--size);
        top: calc(-1.2 * var(--size));
    }
}

.moon {
    --size: 0.5vmin;
    --radius: 3vmin;
    --speed: calc(1 / 365);
    background-color: rgb(171, 178, 187);
    border-radius: calc(infinity * 1px);
}

















/* 

.jupiter {
    --size: 4vmin;
    --radius: calc(5.2 * var(--ae));
    --speed: calc(4333 / 365);
    background-color: rgb(210, 170, 126);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Jupiter';
        position: absolute;
        left: var(--size);
        top: calc(-1.2 * var(--size));
    }
}

.saturn {
    --size: 3.5vmin;
    --radius: calc(9.58 * var(--ae));
    --speed: calc(10759 / 365);
    background-color: rgb(209, 186, 138);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Saturn';
        position: absolute;
        left: var(--size);
        top: calc(-1.2 * var(--size));
    }
}

.uranus {
    --size: 3vmin;
    --radius: calc(19.22 * var(--ae));
    --speed: calc(30687 / 365);
    background-color: rgb(144, 210, 218);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Uranus';
        position: absolute;
        left: var(--size);
        top: calc(-1.2 * var(--size));
    }
}

.neptune {
    --size: 3vmin;
    --radius: calc(30.05 * var(--ae));
    --speed: calc(60190 / 365);
    background-color: rgb(49, 81, 183);
    border-radius: calc(infinity * 1px);
    
    &::after {
        content: 'Neptune';
        position: absolute;
        left: var(--size);
        top: calc(-1.2 * var(--size));
    }
} */



























.spin {
    --x: calc(cos(var(--angle)) * var(--radius) - var(--size) / 2);
    --y: calc(sin(var(--angle)) * var(--radius) - var(--size) / 2);
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    translate: calc(var(--x)) calc(var(--y));
    animation: spin linear calc(var(--speed) * 100s) infinite;
}

@keyframes spin {
    from {
        --angle: 0turn;
    }
    to {
        --angle: 1turn;
    }
}