.wordmark {
    margin: 24px 150px 150px 800px;
}

.detalis-svg {
    width: clamp(280px, 40vw, 720px);  height: auto;  display: block;
}
@media (prefers-contrast: more) {
    .detalis-svg text[stroke]
    {
        stroke: rgba(0,0,0,0.12);
    }}
@media (prefers-color-scheme: dark) {
    :root {    --metal-1: #dfe4ea;    --metal-2: #c3cad3;    --metal-3: #9ba4af;  }}

:root {
    --metal-1: #e3e6ea;
    --metal-2: #cfd4da;
    --metal-3: #b6bcc3;
    --vignette: rgba(0,0,0,0.22);
    --shine: rgba(255,255,255,0.35);
}

body {
    margin: 0;

    background:
            radial-gradient(800px 520px at 30% 10%, var(--shine), transparent 60%),
            radial-gradient(900px 620px at 75% 40%, rgba(255,255,255,0.25), transparent 65%),
            linear-gradient(115deg, rgba(255,255,255,0.18) 0%, transparent 28%, rgba(0,0,0,0.08) 55%, transparent 78%, rgba(255,255,255,0.12) 100%),
            radial-gradient(1200px 800px at 50% 50%, transparent 40%, var(--vignette) 100%),
            linear-gradient(180deg, var(--metal-1), var(--metal-2) 45%, var(--metal-3));
    background-attachment: fixed, fixed, fixed, fixed, fixed;
    background-size: auto;
    color: #0e1317;
}
body {
    display: flex;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 160px;
    background:
            radial-gradient(800px 520px at 30% 10%, var(--shine), transparent 60%),
            radial-gradient(900px 620px at 75% 40%, rgba(255,255,255,0.25), transparent 65%),
            linear-gradient(115deg, rgba(255,255,255,0.18) 0%, transparent 28%, rgba(0,0,0,0.08) 55%, transparent 78%, rgba(255,255,255,0.12) 100%),
            radial-gradient(1200px 800px at 50% 50%, transparent 40%, var(--vignette) 100%),
            linear-gradient(180deg, var(--metal-1), var(--metal-2) 45%, var(--metal-3));


    border-right: 1px solid #dcdcdc;
    display: flex;
    flex-direction: column;
    padding: 8px;
    justify-content: flex-start;
}
.button {
    background:
            radial-gradient(800px 520px at 30% 10%, var(--shine), transparent 60%),
            radial-gradient(900px 620px at 75% 40%, rgba(255,255,255,0.25), transparent 65%),
            linear-gradient(115deg, rgba(255,255,255,0.18) 0%, transparent 28%, rgba(0,0,0,0.08) 55%, transparent 78%, rgba(255,255,255,0.12) 100%),
            radial-gradient(1200px 800px at 50% 50%, transparent 40%, var(--vignette) 100%),
            linear-gradient(180deg, var(--metal-1), var(--metal-2) 45%, var(--metal-3));
    border: none;
    border-radius: 5px;
    padding: 15px;
    margin: 5px 0;
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s;
    font-size: 14px;
}
.button:hover {
    background-color: #e0e0e0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px;
}
.active {
    background-color: #c0c0c0;
}
.content {
    margin-left: 780px;
    padding: 20px;
    flex-grow: 1;
}

.login-form {
    margin-bottom: 20px;
}
.login-form input {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}
.login-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}
.login-button:hover {
    background-color: #45a049;
}
.username-display {
    text-align: center;
    margin: 10px 0;

    padding: 10px;
    border-radius: 5px;
    color: black;
}
#logoutButton {
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
}
#settingsButton {
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
}
#adminButton {
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
}