body {
    margin: 0;
    width: 100%;
    height: 100vh;

    background-color: #120924;
    color: #fff;
}

#main {
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 20px;

    width: 100%;
    height: 100%;

    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;
}

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

#loading {
    animation: spin 1s infinite;

    opacity: 1;
    visibility: visible;
    position: fixed;

    transition-duration: 0.3s;

    margin-top: 200px;
}

#error {
    opacity: 1;
    visibility: visible;
    position: fixed;

    transition-duration: 0.3s;

    margin-top: 200px;
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

#error.hidden {
    opacity: 0;
    visibility: hidden;
}

#loading.hidden {
    opacity: 0;
    visibility: hidden;
}