:root {
                color-scheme: light dark;

                /* CSS' light-dark() function allows you to set different colours for light and dark mode respectively */
                /* Recommended reading: https://css-tricks.com/come-to-the-light-dark-side/ */
                --color-body-background: #CCCCCC;
                --color-content-background: light-dark(#FFFFFF, #32373C);
                --color-body-text: light-dark(#1e0006, #F4F3F8);
                --color-title: #F4F3F8;
                --color-heading: light-dark(#993300, #E5F2E9);
                --color-link: light-dark(#0000FF, #FF9900);

                --font-family-main: 'Trebuchet MS', Arial, Helvetica, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
                --font-family-headings: 'Trebuchet MS', Arial, Helvetica, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

                --content-max-width: 800px;
                --border-main: 3px solid var(--color-body-text);
                --border-radius-main: 10px;
                --shadow-main: 4px 4px 0 #3E000E;
            }

            /* General styling */
            *, *::before, *::after {
                box-sizing: border-box;
            }

            * {
                margin: 0;
            }

            body {
                min-height: 100vh;
                line-height: 1.5;
                font-family: var(--font-family-main);
                color: var(--color-body-text);
                background-color: var(--color-body-background);
            }

            h1, h2, h3, h4, h5, h6 {
                font-family: var(--font-family-headings);
                color: var(--color-heading);
            }

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

            input, button, textarea, select {
                max-width: 100%;
                border: 0.12em solid var(--color-body-text);
                background-color: var(--color-content-background);
                font: inherit;
                padding-left: 5px;
                padding-right: 5px;
            }

            :focus {
                outline: 0.15em solid var(--color-link);
            }

            /* Layout container */
            .container {
                width: 95%;
                max-width: var(--content-max-width);
                margin: 20px auto;
                display: grid;
                gap: 1em;
            }

            /* Header */
            .header {
                text-align: center;
            }

            .header__img {
                height:100%;
            }

            .header__title {
                font-size: 2.8em;
                color: var(--color-title);
                text-shadow: var(--shadow-main);
            }

            /* Navigation bar */
            .navbar {
                display: grid;
                place-content: center;
            }

            .navbar__links {
                list-style-type: "";
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                gap: 0.7em;
            }

            .navbar__links li {
                background-color: var(--color-content-background);
                padding: 8px 15px;
                border: var(--border-main);
                border-radius: var(--border-radius-main);
                font-size: 1.15em;
                font-weight: bold;
                box-shadow: var(--shadow-main);
            }

            .navbar__links li a:focus {
                outline-offset: 0.2em;
            }

            /* Main content */
            main {
                background-color: var(--color-content-background);
                font-size: 1.2em;
                padding: 20px 25px 35px;
                border: var(--border-main);
                border-radius: var(--border-radius-main);
                box-shadow: var(--shadow-main);
            }

            .main__title {
                border-bottom: var(--border-main);
            }

            main * + * {
                margin-block-start: 1em;
            }

            /* Footer */
            .footer {
                text-align: center;
                background-color: var(--color-content-background);
                padding: 18px 25px;
                border: var(--border-main);
                border-radius: var(--border-radius-main);
                box-shadow: var(--shadow-main);
            }
            footer * + * {
                margin-block-start: 0.5em;
            }

            /* Skip to content button */
            /* See: https://kalechips.net/projects/snippets/skip */
            .skip-btn a {
                position: absolute;
                display: inline-block;
                left: 50%;
                transform: translate(-50%, 0);
                top: -1000px;
                overflow: hidden;
                transition: top 0.5s ease;
                background: var(--color-content-background);
                font-size: 1.25rem;
                font-weight: 700;
                z-index: 1000;
                padding: 5px 10px;
            }

            .skip-btn a:focus {
                top: 0;
                transition: top 0.3s ease;
            }