/* general */

:root {
    /* Light theme (default) */
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-link: #0000ee;
    --text-link-visited: #551a8b;
    --background-primary: #ffffff;
    --background-secondary: #dbe0eb;
    --border: #e5e7eb;
    --error: #dc2626;
    --success: #16a34a;
    --warning: #ca8a04;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #d9d9d9;
        --text-secondary: #bebebe;
        --text-link: #3997ff;
        --text-link-visited: #a341ff;
        --background-primary: #111827;
        --background-secondary: #1f2937;
        --border: #374151;
        --error: #ef4444;
        --success: #22c55e;
        --warning: #eab308;
    }
}

body {
    font-family: sans-serif;
    background-color: var(--background-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

:link {
    color: var(--text-link);
}
:visited {
    color: var(--text-link-visited);
}

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

.container>.content {
    flex: 0 1 800px;
    max-width: 800px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.border-bottom {
    border-bottom: 1px solid var(--border);
}

.spacer {
    flex-grow: 1;
}

header>h1, header>h2 {
    margin-bottom: 0;
}

footer {
    margin-top: 2rem;
    color: var(--text-secondary);
}

hr {
    color: var(--border);
}

/* component: table */

.table-striped {
    border-collapse: collapse;
}

.table-striped thead {
    border-bottom: 1px solid var(--border);
}

.table-striped th {
    text-align: start;
}

.table-striped tr:nth-child(even) {
    background-color: var(--background-secondary);
}

.table-striped th:not(:first-child),
.table-striped td:not(:first-child) {
    padding-left: 1rem;
}

/* landing page */

/* mountain page */

.mountain table td:nth-child(2) {
    width: 6rem;
}

#map {
    width: 100%;
    position: relative;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weather-day img {
    width: 4rem;
    height: 4rem;
}

.weather-day .temp {
    text-align: end;
}