@font-face {
    font-family:RiformaLL;
    src:url('font/RiformaLLSub-Bold.woff2');
    font-weight:700;
    font-style:bold;
    font-display:swap;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: RiformaLL, sans-serif;
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    background-color:hsla(0,0%,100%,1);
    background-image:
radial-gradient(at 84% 10%, hsla(240,79%,50%,1) 0px, transparent 50%),
radial-gradient(at 40% 70%, hsla(240,87%,80%,1) 0px, transparent 50%),
radial-gradient(at 25% 13%, hsla(266,88%,53%,1) 0px, transparent 50%),
radial-gradient(at 45% 38%, hsla(264,100%,25%,1) 0px, transparent 50%);
}

@media (max-width: 600px) {
    body {
      font-size: 24px;
    }
}

main {
    margin: 0 auto;
    max-width: 24em;
    overflow: hidden;
    padding: 1em 2em;
}

#title {
    font-size: 180%;
    background: linear-gradient(to right, #30CFD0, #c43ad6);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 60px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%);
}

#subtitle {
    margin: 0.5em 0;
}

#buttons {
    margin-bottom: 0;
    z-index: 2;
}

button {
    font-family: RiformaLL, sans-serif;
    font-weight: bold;
    font-size: 50%;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 0.5em;
    color: white;
    cursor: pointer;
}

button:hover {
    background: rgba(255, 255, 255, 0.1);
}

button:active {
    background: rgba(255, 255, 255, 0.2);
}

button.primary {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid white;
}

button.primary:hover {
    background: rgba(255, 255, 255, 0.6);
}

button.primary:active {
    background: rgba(255, 255, 255, 0.7);
}

#superspinner {
    z-index: 1;
    width: 20em;
    height: 20em;
    position: relative;
    animation: spin 18s infinite linear;
}

.spinner {
    position: absolute;
    animation: spin 4s infinite linear;
    width: 6em;
    height: 6em;
}

.spinner:nth-child(1) { top: 05%; left: 30%; }
.spinner:nth-child(2) { top: 30%; left: 00%; }
.spinner:nth-child(3) { top: 65%; left: 10%; }
.spinner:nth-child(4) { top: 65%; left: 50%; }
.spinner:nth-child(5) { top: 30%; left: 65%; }

@keyframes spin { 
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(360deg); 
    }
}