:root {
    color-scheme: dark;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #f4f4f4;
    background: #1a1a1a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    padding: 20px 40px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.site-header nav a {
    color: #f4f4f4;
    text-decoration: none;
}

.site-header nav a:hover { color: #aaa; }

.logga { display: block; margin-bottom: 0.5rem; font-weight: bold; }

body#start .navigering a#start-,
body#exercises .navigering a#exercises-,
body#viewsource .navigering a#viewsource- {
    text-decoration: underline;
}

.page {
    width: min(800px, calc(100% - 2rem));
    margin: 2rem auto;
    flex: 1;
}

.card, .exercise-group, .quiz-card {
    background: #252525;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 1.2rem;
    margin: 1rem 0;
}

.home-card {
    max-width: 800px;
    margin: auto;
    padding: 40px 20px;
    border: 0;
    background: transparent;
    text-align: center;
}

.home-card h1 { font-size: 2.5em; margin-bottom: 1rem; }

.button, button {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    padding: 12px 25px;
    color: #f4f4f4;
    background: #444;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.button:hover, button:hover { background: #666; }
.exercise-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.exercise-list a { padding: 0.55rem; background: #1a1a1a; border-radius: 3px; color: #f4f4f4; }
.exercise-list a:hover { background: #444; }
label { display: block; margin: 0.65rem 0; }
input[type="text"], input[type="email"], input[type="password"] {
    width: min(100%, 24rem);
    padding: 0.55rem;
    color: #f4f4f4;
    background: #1a1a1a;
    border: 1px solid #444;
}
.error { color: #ff8a8a; font-weight: bold; }
.source-code { overflow-x: auto; padding: 1rem; background: #111; border: 1px solid #333; }
.success { color: #9be6a8; font-weight: bold; }
.answer-correct { background: #24442b; }
.answer-wrong { background: #4a2828; }
.site-footer { padding: 15px; text-align: center; color: #aaa; background: #252525; border-top: 1px solid #333; }
.include-exercise-footer hr { width: min(24rem, 90%); border: 0; border-top: 1px solid #888; }