:root {
    --text-color: light-dark(#212121, #fafafa);
    --background-color: light-dark(#fafafa, #212121);
    --secondary-container-bg: light-dark(#d5f8d0, #134b0b);
    --dim-text-color: light-dark(#787878, #c2c2c2);
    --success: light-dark(#2E7D32, #4CAF50);
    --success-container: light-dark(#A5D6A7, #1D3F1E);
    --on-sucess-container: light-dark(#113B14, #C8E6C9);
    --error: light-dark(rgb(186 26 26), rgb(255 180 171));
    --error-container: light-dark(rgb(255 218 214), rgb(147 0 10));
    --on-error-container: light-dark(rgb(147 0 10), rgb(255 218 214));
    --unit-0: 0;
    --unit-1: 0.25rem; /* 4px */
    --unit-2: 0.5rem; /* 8px */
    --unit-3: 0.75rem; /* 12px */
    --unit-4: 1rem; /* 16px */
    --unit-5: 1.25rem; /* 20px */
    --unit-6: 1.5rem; /* 24px */
    --unit-7: 1.75rem; /* 28px */
    --unit-8: 2rem; /* 32px */
    --unit-9: 2.25rem; /* 36px */
    --unit-10: 2.5rem; /* 40px */
    --unit-11: 2.75rem; /* 44px */
    --unit-12: 3rem; /* 48px */
    --unit-16: 4rem; /* 64px */
    --unit-20: 5rem; /* 80px */
    --unit-24: 6rem; /* 96px */
    --unit-30: 7.5rem; /* 120px */
    --unit-xsmall: var(--unit-1);
    --unit-small: var(--unit-3);
    --unit-regular: var(--unit-4);
    --unit-medium: var(--unit-5);
    --unit-large: var(--unit-10);
    --unit-xlarge: var(--unit-16);
    --unit-xxxlarge: var(--unit-30);
    color-scheme: light dark;
    accent-color: light-dark(#005f00, #97ea8b);
}

* {
    font-family: Lato;
    box-sizing: border-box;
}

html,
body,
main {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--background-color);
}

html, body {
    height: 100%;
}

main {
    width: 100%;
    max-width: 600px;
    padding: 0 var(--unit-3);
    margin: auto;
}

header {
    height: var(--unit-16);
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 0 var(--unit-3);
    background-color: var(--secondary-container-bg);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 var(--unit-3) var(--unit-3);
}

header img {
    height: 75%;
}

header .title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: var(--unit-3);
}

header a {
    text-decoration: none;
}

a {
    color: var(--text-color);
}

button, .button {
    display: block;
    width: 100%;
    padding: var(--unit-3);
    border-radius: var(--unit-10);
    border: none;
    background-color: var(--success-container);
    color: var(--on-sucess-container);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-size: inherit;
}

@media screen and (max-width: 801px) {
    header {
        border-radius: 0;
    }
}