:root {
    --header_color: white;
    --header_background_color: #133C55;
    --footer_color: white;
    --footer_background_color: #133C55;
    --link_hover_color: hsl(207, 100%, 60%);
    --link_background_color: hsl(207, 100%, 80%);
    --header_height: 2rem;
    --footer_height: 2rem;
    --number_of_menu_items: 4;
    --background_colour: #59A5D8;
}

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

* {
    margin: 0;
    padding: 0;
    font: inherit;
    color: black;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header_height);
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: var(--background_colour);
}

header {
    color: var(--header_color);
    background-color: var(--header_background_color);
    height: var(--header_height);
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}

main {
    margin-top: var(--header_height);
    padding: 0 1rem 0 1rem;
    min-height: calc(100vh - var(--header_height) - var(--footer_height));
}

@media only screen and (max-width: 420px) {
    header {
        display: none !important;
    }

    html {
        scroll-padding-top: 0;
    }

    main {
        margin-top: 0 !important;
    }
    #language-row {
        position: static;
    }
}

a>img {
    display: inline-block;
}

nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    flex-basis: 20%;
    /* flex: 1; */
    height: 100%;
}

nav a {
    font-size: 1rem;
    text-align: center;
    vertical-align: middle;
    color: var(--header_color);
    display: inline-block;
    /* Needed for height 100% */
    height: 100%;
    line-height: var(--header_height);
    border-right: solid var(--link_hover_color) 2px;
    padding: 0 0.5rem;
}

a {
    text-decoration: none;
    background-color: var(--link_background_color);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

a:visited {
    text-decoration: none;
}

a:hover {
    background-color: var(--link_hover_color)
}

header > nav > h1 {
    color: white;
    background-color: var(--header_background_color);
    text-align: center;
    padding: 0.2rem;
    width: 100%;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

footer > * {
    color: var(--footer_color);
    background-color: var(--footer_background_color);
    padding: 0.5rem;
    text-align: center;
    height: var(--footer_height);
}