html, body {
    margin: 0;
    padding: 0;
    font-family: monospace;
    width: 100%;
    height: 100%;
    color: white;
}

body {
    --step: 70%;
    background: #040040;
    background: -webkit-linear-gradient(180deg, rgba(4, 0, 64, 1) 0%, rgba(9, 9, 9, 1) var(--step), rgba(0, 221, 221, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(4, 0, 64, 1) 0%, rgba(9, 9, 9, 1) var(--step), rgba(0, 221, 221, 1) 100%);
    background: linear-gradient(180deg, rgba(4, 0, 64, 1) 0%, rgba(9, 9, 9, 1) var(--step), rgba(0, 221, 221, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#040040", endColorstr="#00DDDD", GradientType=0);
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#moodring {
    --border-color: #9f3deb;
    --ratio: 50dvw;
    --border-width: 0.25pc;
    color: white;
    width: var(--ratio);
    height: var(--ratio);
    border: var(--border-width) var(--border-color) solid;
    overflow: hidden;
    @media screen and (max-height: 900px) {
        --ratio: 55dvh;
        --border-width: 0.2pc;
        #mood {
            font-size: 100%;
        }
    }
    @media screen and (max-width: 500px) {
        --ratio: 75dvw;        
        #mood {
            font-size: 150%;
            max-width: 65%;
        }
    }
}

#moodring.loading {
    --border-color: #450584;
}

#moodring.error {
    --border-color: red;
    color: red;
}

#moodring.block {
    --border-color: #660000;
    color: yellow;
}

.ring {
    --ring-perc: 95%;
    width: var(--ring-perc);
    height: var(--ring-perc);
    border-radius: 50%;
    transition: border 500ms ease-in-out;
}

#moodring > div {
    border: var(--border-width) var(--border-color) dashed;
}

#moodring > div > div {
    border: var(--border-width) var(--border-color) solid;
}

#mood {
    position: absolute;
    transition: opacity 750ms ease-out, color 750ms ease-out;
    opacity: 1;
    font-size: 200%;
    text-align: center;
    max-width: 20vw;
}

#mood.hide {
    opacity: 0;
}