:root {
    --primary-color-50: hsla(344, 74%, 39%, 1);
    --primary-color-70: hsla(344, 74%, 45%, 1);
    --primary-color-90: hsla(344, 74%, 60%, 1);
    --secondary-color-50: hsla(88, 96%, 61%, 1);
    --secondary-color-90: hsla(88, 96%, 81%, 1);
    --highlight-color-50: hsla(259, 96%, 74%, 1);

    --grey-color-75: hsl(0, 0%, 75%);
    --grey-color-80: hsl(0, 0%, 80%);
    --grey-color-85: hsl(0, 0%, 85%);
    --grey-color-90: hsl(0, 0%, 90%);
    --grey-color-95: hsl(0, 0%, 95%);
    --white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);

    --link-color: var(--primary-color-50);
    --header-color: var(--black-color);

    --ff-main: sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    min-height: 100%;
    background-color: var(--grey-color-95);
    font-family: var(--ff-main);
    font-size: 1rem;
}

h1,
h2,
h3 {
    margin-bottom: 0.50em;
    color: var(--header-color);
}

p:not(:last-child) {
    margin-bottom: 1em;
}

/**
 * Main components
 */
.login-page,
.logout-page {
    padding: 20vh 0;
}

.page-wrap {
    display: grid;
    min-height: 100%;
    grid-template-columns: minmax(15em, 18vw) 1fr;
}

.page-menu {
    --link-color: var(--secondary-color-90);
    display: grid;
    grid-template-rows: 1fr min-content;
    grid-area: 1 / 1;
    padding: 0.50em 0;
    background-color: var(--primary-color-50);
    color: var(--white-color);
}

.page-content {
    grid-area: 1 / 2;
    padding: 0.50em;
}

.event-data {
    max-height: 8em;
    overflow-y: scroll;
}

/**
 * Lists
 */
ul,
ol {
    list-style-position: inside;
}

/**
 * Navigation
 */
.nav ul {
    list-style: none;
}

.nav a {
    display: block;
    padding: 0.50em 1.00em;
}

.nav a:hover,
.nav a:focus-visible {
    background-color: var(--primary-color-70);
    text-decoration: none;
}

/**
 * Tables
 */
.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--primary-color-50);
}

.table th,
.table td {
    padding: 0.25em;
    border: 1px solid var(--primary-color-50);
}

/**
 * Forms
 */
.form p {
    margin: 0;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"] {
    padding: 0.15em 0.35em;
    font-family: var(--ff-main);
    font-size: 1rem;
}

.form input:focus-visible {
    outline: 1px solid var(--secondary-color-50);
}

.form--full-width input {
    width: 100%;
}

/**
 * Links
 */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

.button {
    padding: 0.50em 1.25em;
    border: 1px solid var(--black-color);
    border-radius: 0.75em;
    background-color: var(--secondary-color-50);
    color: var(--black-color);
    font-family: var(--ff-main);
    font-size: 1rem;
    cursor: pointer;
}

/**
 * Boxes
 */
.box {
    --box-bg-color: var(--primary-color-90);
    padding: 3.00em;
    border-radius: 1.00em;
    background-color: var(--box-bg-color);
    width: min-content;
}

/**
 * Flexbox
 */
.flex {
    display: flex;
}

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

.flex--justify-center {
    justify-content: center;
}

.flex--align-center {
    align-items: center;
}

.flex--vhcenter {
    justify-content: center;
    align-items: center;
}

.flex--gap-1em {
    gap: 1em;
}

/**
 * Pagination
 */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.50em;
    margin-top: 1.25em;
    list-style: none;
    font-size: 1.15em;
}

.pagination a {
    display: inline-block;
    padding: 0.25em 1.00em;
    background-color: var(--secondary-color-50);
    color: var(--black-color);
}

.pagination li.active {
    padding: 0.25em 1.00em;
    background-color: var(--grey-color-85);
    color: var(--black-color);
}

/**
 * Text
 */
.text-center {
    text-align: center;
}

.text-size-25 {
    font-size: 0.75em;
}

/**
 * Utilites
 */
.bottom-space-1em {
    margin-bottom: 1em;
}

[data-hidden="true"] {
    filter: blur(0.5em);
}