:root {
    --global-background: #3e3e3e;
    --global-foreground: white;

    --pumpkin: #ff6d00;
    --safety-orange: #ff7900;
    --ut-orange: #ff8500ff;
    --princeton-orange: #ff9100;
    --orange-peel: #ff9e00ff;
    --russian-violet: #240046;
    --persian-indigo: #3c096c;
    --tekhelet: #5a189a;
    --french-violet: #7b2cbf;
    --amethyst: #9d4edd;

    --global-font-size: 1.4rem;
    --global-font-family: sans-serif;
    --global-border-radius: 16px;
    --global-edge-distance: 30px;
}

* {
    box-sizing: border-box;
}


body {
    margin: 0;
    padding: 0;
    background-color: var(--global-background);
    color: var(--global-foreground);
    font-size: var(--global-font-size);
    font-family: var(--global-font-family);
}


a {
    color: var(--global-foreground);
    text-decoration: none;
}


/* Forms and Checkboxes */
.formular-container {
    border-radius: var(--global-border-radius);
    background-color: var(--global-background);
    width: 500px;
    margin: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: center;
    position: relative;
}

.formular-container::before, .formular-container::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: linear-gradient(140deg, var(--amethyst), var(--russian-violet));
    border-radius: var(--global-border-radius);
    padding: 3px;
    opacity: 0.6;
    z-index: -1;
}

.formular-container::after {
    filter: blur(8px);
}

input[type=text], input[type=password] {
    display: block;
    background-color: var(--global-foreground);
    color: var(--global-background);
    margin: 12px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 18px;
    width: 70%;
    border-style: none;
    border-radius: 50px;
}

input[type=text]:focus, input[type=password]:focus {
    outline-color: var(--amethyst);
    outline-style: solid;
    outline-width: 2px;
}


input[type=submit] {
    background-color: var(--orange-peel);
    color: var(--global-foreground);
    border-radius: var(--global-border-radius);
    padding: 8px 18px;
    margin: 12px;
    font-weight: bold;
    border: none;
    outline: none;
}

input[type=submit]:hover {
    box-shadow: 1px 1px 8px var(--pumpkin);
}

input[type=submit]:disabled {
    background-color: grey;
}

input[type=submit]:disabled {
    box-shadow: none;
}

.formular-error {
    color: red;
    font-size: 0.8em;
    margin: 10px;
    text-align: center;
}

footer {
    background-color: var(--persian-indigo);
    margin-top: 50px;
    padding: var(--global-edge-distance);
}


.dashboard {
    display: grid;
    grid-template-columns: 1fr 5fr;
    padding: var(--global-edge-distance);
    gap: 10px;
}

.dashboard > div {
    padding: 10px;
    border: 2px solid var(--persian-indigo);
    border-radius: var(--global-border-radius);
}

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

.user-panel > div {
    background-color: var(--pumpkin);
    border-radius: var(--global-border-radius);
    padding: 12px;
    font-size: 0.9rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}


.icon16 {
    display: block;
    margin: 5px;
    margin-left: auto;
    margin-right: auto;
    height: 16px;
    width: 16px;
}

.icon24 {
    display: block;
    margin: 5px;
    margin-left: auto;
    margin-right: auto;
    height: 24px;
    width: 24px;
}