* {
    box-sizing: border-box;
    line-height: 1.5;
}

:root {
    --Quizzer-DarkBlue: #0b1133;
    --Quizzer-LightPurple: #b358e6;
    --Quizzer-DarkPurple: #4a1281;
    --Quizzer-LightBlue: #077bb1;
    --Quizzer-LightestBlue: #bcdceb;
    --Quizzer-Blue: #006bb7;
    --Quizzer-Panel: white;
    --Panel-Contrast: #e9e3eb;
    --Panel-Contrast-Dark: #adadad;
    --Panel-Background: #3f1a53;
    --Panel-Color: white;
    --Quizzer-Background-Dark: #13051b;
    --Container-Background: #361846;
    --Container-Color: white;
}

.Error {
    color: red;
}

.QuizzerPageContainer {
    width: 100%;
    height: 100%;
    max-width: 1600px;
}

.QuizzerPageContainerHCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 1600px;
}

.QuizzerPageContainerCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 1600px;
}

.QuizzerBackgroundPanel {
    display: flex;
    flex-direction: column;
    background-color: var(--Quizzer-Panel);
    color: black;
    gap: 5px;
    padding: 15px;
    border-radius: 10px;

}

.Selectable {
    cursor: pointer;
}

input[type="text"], input[type="password"], input[type="number"], select {
    padding: 5px;
    height: 35px;
    min-width: 400px;
    border: none;
    background-color: var(--Panel-Contrast);
    border-radius: 5px;
}

textarea {
    padding: 5px;    
    min-width: 400px;
    border: none;
    background-color: var(--Panel-Contrast);
    border-radius: 5px;
}

    input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus {
        border: 1px solid #cbcbcb;
        outline: none;
    }

input[type="file"] {
    padding: 5px;
    height: 35px;
    min-width: 200px;
    border: none;
    width: 100%;
    background-color: var(--Panel-Contrast);
    border-radius: 5px;
    color: black;
}

a {
    text-decoration: none;
    color: white;
}

    a:visited {
        text-decoration: none;
    }

button, input[type=button], input[type=submit], input[type=reset] {
    background-color: var(--Quizzer-DarkPurple);
    border-radius: 35px;
    border: none;
    color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all linear 0.2s;
    margin: 5px;
    min-width: 120px;
    min-height: 35px;
    padding: 8px;
}

    button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
        transform: scale(1.06);
    }

hr {
    border: 1px solid var(--Quizzer-LightPurple);
    width: 100%;
}

.OpenAnimation {
    animation-name: OpenKeyFrames;
    animation-duration: 0.25s;
}

.Center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

@keyframes OpenKeyFrames {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}