:root {
    --taust: #222020;
    --tekst: #bebebe;
    --tekst__labipaistev: #bebebedd;
    --nupp__taust: #434343;
    --nupp__taust__aktiivne: #656565;
    --nupp__taust__hoiatus: #dd3434;

    --fail__taust: #353535;
    --fail__tiitel: #dddddd;
    --fail__tekst: #898989;
    --fail__link: #5a5ac1;
    --fail__link__aktiivne: #6b6bd4;
    --fail__kustuta: #616161;
    --fail__kustuta__aktiivne: #de6666;

    --umardus: 10px;

    --viga: red;
    --hea: green;
    --hagusus: 3px;
}

* {
    font-family: 'Segoe UI';
}

body {
    background: var( --taust );
}

.veateade {
    position: static;
    border: var( --viga ) solid 2px;
    border-radius: var( --umardus );

    background: var( --fail__taust );

    text-align: center;
    backdrop-filter: blur( var( --hagusus ) );

    width: fit-content;

    padding: 0 10px;
    margin: 20px auto;

    display: flex;
    justify-content: center;
    gap: 10px;
}

.veateade p {
    color: var( --tekst );
}

.veateade button {
    margin: auto 0;
    border-radius: var( --umardus );
    border: 2px var( --viga ) solid;

    padding: 3px 6px;

    height: min-content;

    background: var( --fail__taust );

    filter: saturate( 0.3 );
    transition-duration: 200ms;

    color: var( --tekst );
}

.veateade button:hover {
    filter: saturate( 1 );
}

.veateade.hea {
    color: var( --hea );
    border-color: var( --hea );
    background: var( --taust_kaart );
}