:root {
    --header-height : 4rem;
}

header {
    height  : var(--header-height);
    z-index : 100;
}

/*---revert---*/
header, section {
    padding : unset;
    margin  : unset;
}

::-webkit-input-placeholder, ::placeholder {
    color : var(--primary-color);
}

/*---revert---*/

main {
    margin-top : var(--header-height);
    min-height: calc(100dvh - var(--header-height));
}

.smaller-font {
    font-size : .8rem;
}

nav {
    background-color : var(--lighter-gray-color);
    padding-inline   : 1rem;
}

nav ul {
    display          : none;
    position         : absolute;
    top              : 1rem;
    left             : -1rem;
    padding-inline   : 1rem;
    list-style       : none;
    background-color : var(--lighter-gray-color);
    white-space      : nowrap;
}

nav li {
    margin : 0;
}

nav h5, nav li, .button {
    cursor : pointer;
}

[data-selected] {
    display      : none;
    margin-block : 1rem;
}

.inner_container {
    margin-inline : 1rem;
}

details[data-level="1"] {
    background-color : var(--lighter-gray-color);
}

details[data-level="2"][open] {
    background-color : white;
    border           : 1px solid;
    margin           : -1px;
}

details[data-level="2"][open] summary {
    border-bottom : 2px solid var(--secondary-color);
}

.lighter-gray__wrapper {
    background-color  : var(--lighter-gray-color);
    --bs-border-color : var(--secondary-color);
}

.points {
    border-radius    : 0.5em;
    padding          : 0 0.5em 0.2em 0.5em;
    background-color : var(--secondary-color);
    white-space      : nowrap;
}

.points.negativ {
    color            : red;
    background-color : white;
    border           : 2px solid;
}

.button {
    background-color : var(--secondary-color);
    letter-spacing   : 0.1em;
}

.highscore {
    background-color : var(--primary-color);
}

#game {
    top              : -100%;
    height           : calc(100dvh - var(--header-height));
    transition       : all 0.4s ease-in-out;
    background-color : var(--primary-color);
    border           : 4px solid white;
}

#game.countdown-started {
    top : var(--header-height);
}

#countdown {
    position    : absolute;
    top         : 0;
    left        : 0;
    display     : grid;
    width       : 100%;
    height      : 100%;
    place-items : center;
    font-size   : 5rem;
    font-weight : bold;
    font-style  : italic;
    z-index     : -1;
}

#countdown > * {
    position : absolute;
    opacity  : 0;
}

#game.countdown-started #countdown > * {
    animation-name            : show-counter;
    animation-duration        : 1.5s;
    animation-fill-mode       : forwards;
    animation-timing-function : ease-in-out;
    animation-delay           : 0.5s;
}

#game.countdown-started #countdown > *:nth-child(2) {
    animation-delay : 1.5s;
}

#game.countdown-started #countdown > *:nth-child(3) {
    animation-delay : 2.5s;
}

@keyframes show-counter {
    0% {
        opacity   : 0;
        transform : scale(0.5);
    }
    50% {
        opacity : 1;
    }
    75% {
        opacity : 1;
    }
    100% {
        opacity   : 0;
        transform : scale(3);
    }
}

#game-content, #user-input {
    opacity    : 0;
    transition : opacity 0.4s ease-in-out;
}

#game.game-started #game-content, #game.game-started #user-input {
    opacity : 1;
}

.component-chooser {
    width: 100%;
    flex-shrink: 0;
    transition: margin 0.4s ease-in-out;
}

#timer {
    position         : sticky;
    top              : 0;
    left             : 0;
    width            : 100%;
    background-color : var(--light-gray-color);
}

.progress-bar {
    position  : absolute;
    top       : 0;
    left      : 50%;
    width     : 100%;
    height    : 100%;
    transform : translateX(-50%);
}

#level-timer .progress-bar {
    background-color : var(--primary-color);
}

#order-timer .progress-bar {
    background-color : var(--secondary-color);
}

.timer-title {
    position : absolute;
    top      : 0;
    left     : 1em;
}

.time {
    position     : relative;
    font-variant : tabular-nums;
    font-style   : italic;
}

[data-order-number="0"], [data-component_units-number="0"] {
    display : none;
}

#level {
    margin-top : 1rem;
    overflow   : auto;
    max-height : 100%;
}

.order {
    max-width : 600px;
    margin    : auto;
}

.order__title {
    background-color : var(--secondary-color);
    padding-inline   : 1em;
    font-size        : 1.5rem;
}

.component_units {
    padding-left : 1em;
}

option[value="-1"] {
    display : none;
}

select {
    display       : block;
    width         : calc(100% - 1rem);
    margin-bottom : 0.5rem;
}

span.caution {
    position      : relative;
    width         : 1em;
    aspect-ratio  : 1;
    display       : inline-block;
    color         : red;
    border        : 0.1em solid;
    border-radius : 1em;
}

span.caution:before {
    content         : "!";
    display         : flex;
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    justify-content : center;
    align-items     : center;
    font-size       : 0.8em;
    font-weight     : bold;
}

#level-bonus {
    font-variant: tabular-nums;
}

#level-bonus-animation {
    position         : absolute;
    border-bottom: 2px solid var(--secondary-color);
    transition: all 0.4s ease-in-out;
    bottom: 0;
    right: 0;
    left: 0;
}