#result_screen {
    display: none;
}

#result_screen h1 {
    font-size: 2em;
    line-height: 1.5em;
    margin: 1em 0;
}

#result_screen h2 {
    font-size: 1em;
    margin: 2em 0 1em;
}
.scale {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}

.scale li {
    padding: 1.5em 0;
    text-align: center;
    color: hsl(0, 0%, 98%);
    text-shadow: 0 1px 1px hsla(0, 0%, 0%, 40%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scale .normal {
    background-color: hsl(120, 100%, 45%);
}

.scale .mild {
    background-color: hsl(90, 100%, 45%);
}

.scale .moderate {
    background-color: hsl(60, 100%, 45%);
}

.scale .severe {
    background-color: hsl(30, 100%, 45%);
}

.scale .extremely-severe {
    background-color: hsl(0, 100%, 45%);
}

.scale strong {
    position: absolute;
    bottom: 4em;
    translate: -50% 0;

    background-color: hsla(0, 0%, 0%, 80%);
    text-shadow: none;
    font-weight: normal;
    padding: 0.5em 1em;
    white-space: nowrap;
}

.scale strong::after {
    content: '';
    display: block;

    position: absolute;
    left: 50%;
    bottom: -1em;
    margin-left: -0.5em;
    border: 0.5em solid;
    border-color: hsla(0, 0%, 0%, 80%) transparent transparent;
}

.scale.depression .normal {
    width: calc(100% * (5 / 21));
}

.scale.depression .mild {
    width: calc(100% * (2 / 21));
}

.scale.depression .moderate {
    width: calc(100% * (4 / 21));
}

.scale.depression .severe {
    width: calc(100% * (3 / 21));
}

.scale.depression .extremely-severe {
    width: calc(100% * (8 / 21));
}

.scale.anxiety .normal {
    width: calc(100% * (4 / 21));
}

.scale.anxiety .mild {
    width: calc(100% * (2 / 21));
}

.scale.anxiety .moderate {
    width: calc(100% * (2 / 21));
}

.scale.anxiety .severe {
    width: calc(100% * (2 / 21));
}

.scale.anxiety .extremely-severe {
    width: calc(100% * (11 / 21));
}

.scale.stress .normal {
    width: calc(100% * (8 / 21));
}

.scale.stress .mild {
    width: calc(100% * (2 / 21));
}

.scale.stress .moderate {
    width: calc(100% * (3 / 21));
}

.scale.stress .severe {
    width: calc(100% * (4 / 21));
}

.scale.stress .extremely-severe {
    width: calc(100% * (5 / 21));
}

@media (max-width: 480px) {
    .scale li {
        text-indent: -9999px;
        padding: 0.5em 0;
    }

    .scale strong {
        bottom: 2em;
        text-indent: 0;
    }

    .scale strong span {
        position: absolute;
        left: -9999px;
    }
}