:root {

    /* CSS HEX */
    --eggplant: #533747ff;
    --english-violet: #5f506bff;
    --paynes-gray: #6a6b83ff;
    --cadet-gray: #76949fff;
    --tiffany-blue: #86bbbdff;


    /* CSS HEX */
    --Tato-field-drab: #585123ff;
    --Tato-hunyadi-yellow: #eec170ff;
    --Tato-sandy-brown: #f2a65aff;
    --Tato-orange-crayola: #f58549ff;
    --Tato-sienna: #772f1aff;


    --global-font-size: 1.4rem;

    


}

@font-face {
    font-family: RobotoMono;
    src: url(/fonts/RobotoMono.ttf);
}


*{
    box-sizing: border-box;
    font-family: RobotoMono;
}


a {
    text-decoration: none;
    color: #ffffff;
}


body {
    background-color: #0f0f0f;
    color: #ffffff;
    margin: 0;
    padding: 0;
}


footer {
    background-color: var(--eggplant);
    color: #0f0f0f;
    text-decoration: none;
    margin: 0;
    margin-top: 100px;
    padding: 25px;
    min-height: 250px;
}

.footer-text {
    font-size: 1rem;
    color: var(--tiffany-blue);
}


.dashboard {
    display: grid;
    grid-template-columns: 1fr 5fr;
    padding: 50px;
    gap: 10px;
}

.dashboard > div {
    padding: 10px;
    border: 2px solid var(--tiffany-blue);
    border-radius: 10px;
}

.user-panel {
    display: flex;
   text-align: center;
   gap: 10px;
}

.user-panel >div {
    color: var(--tiffany-blue);
}

.user-name {
    color: var(--tiffany-blue);
}


.login-form {
    background-color: var(--paynes-gray);
    color: #ffffff;
    border: 5px, var(--tiffany-blue), solid;
    border-radius: 70px;
    margin: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    width: 600px;
    height: 500px;
}

.login-text{
    text-align: center;
    font-size: 1.8rem;
    color: var(--tiffany-blue);
    text-decoration: none;
}

.login-text-small{
    text-align: center;
    font-size: 1.2rem;
    color: var(--tiffany-blue);
    text-decoration:none;
}

.login-text-big{
    text-align: center;
    font-size: 2rem;
    color: var(--tiffany-blue);
    text-decoration: none;
}

input[type=text]{
    background-color: var(--english-violet);
    color: var(--tiffany-blue);
    width: 90%;
    margin: 20px;
    padding: 10px;
    border: none;
    border-radius: 70px;
}
    input[type=text]:focus{
    outline-width: 3px; 
    outline-color: var(--tiffany-blue);
    outline-style: solid;  
    }

input[type=password]{
    background-color: var(--english-violet);
    color: var(--tiffany-blue);
    width: 90%;
    margin: 20px;
    padding: 10px;
    border: none;
    border-radius: 70px;

}
    input[type=password]:focus{
    outline-width: 3px; 
    outline-color: var(--tiffany-blue);
    outline-style: solid;  
    }

input[type=submit]{
    background-color: var(--tiffany-blue);
    width: 90%;
    margin: 20px;
    padding: 10px;
    border: none;
    border-radius: 70px;

}


.fehler{
    color: var(--eggplant);
    font-size: 1.2rem;
}


.quest {
    color: var(--tiffany-blue);
    background-color: var(--eggplant);
    margin: 20px;
    padding: 25px;
    border-radius: 20px;
    font-size: 1rem;
}

.quest-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}


.items {
    color: var(--cadet-gray);
}


.icon-24 {
    width: 24px;
    height: 24px;
}


.website-title{
    font-size: 2.5rem;
    color: var(--tiffany-blue);
    text-align: center;
    text-decoration: none;
}


.button-accept {
    background-color: var(--tiffany-blue);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    /* width: auto; */
    display: inline-block
}

.button-accept.hover
{   
    background-color: var(--paynes-gray);
}

.button-cancel {
    background-color: var(--paynes-gray);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    /* width: auto; */
    display: inline-block
}

.button-cancel.hover {
    background-color: var(--tiffany-blue);
}

.button-ok {
    background-color: var(--paynes-gray);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    margin-left: 30px;
    /* width: auto; */
    display: inline-block
}

.button-ok.hover {
    background-color: var(--tiffany-blue);
}


.text {
    color: white;
    size: 2rem;
}

.subtext {
    color: white;
    size: 1rem;
}