/* --- Global parameters --- */
:root {
    /* Sizing */
    --navbar_spacer_height: 3rem;
    --content_max_width: 75rem;
    --banner_min_height: 30rem;
    --footer_bottom_padding: 20rem;

    /* -- Colors -- */

    /* Global colors */
    --color_page_bg: rgb(240, 245, 255);
    --color_page_bg_gradient: linear-gradient(
        rgb(255, 255, 255) 20%,
        rgb(195, 205, 225) 100%
    );
    --color_text_primary: rgb(0, 5, 15);
    --color_text_secondary: rgb(0, 75, 135);
    --color_link: rgb(25, 100, 150);
    --color_link_visited: rgb(25, 75, 100);
    --color_link_dark: rgb(125, 200, 255);
    --color_link_dark_visited: rgb(125, 175, 200);

    /* Navbar colors */
    --color_navbar_bg: rgb(255,255,255);
    --color_navbar_text: var(--color_text_primary);
    --color_navbar_border: rgb(200, 200, 200);
    --color_navbar_shadow: rgb(0, 0, 0, 0.5);
    --color_navbar_underline: rgb(0, 0, 0);
    --color_navbar_expand_button: rgb(0, 0, 0);
    --color_navbar_expand_button_selected: rgb(255, 255, 255);
    --color_navbar_expand_button_selected_bg: rgb(0, 0, 0);

    /* Banner colors */
    --color_banner_tint: rgba(0, 0, 0, 0.4);
    --color_banner_shadow: rgb(0, 0, 0, 0.3);
    --color_banner_text: rgb(255, 255, 255);
    --color_banner_text_shadow: rgb(0, 0, 0, 0.3);

    /* Footer colors */
    --color_footer_bg: rgb(25, 25, 35);
    --color_footer_text: rgb(240, 245, 255);
    --color_footer_shadow: rgba(0, 0, 0, 0.2);

    /* Rule colors */
    --color_hr: rgba(0, 0, 0, 0.2);
    --color_hr_dark: rgba(255, 255, 255, 0.2);

    --color_card_bg: rgba(200, 200, 200, 0.15);
    --color_card_border: rgba(0, 0, 0, 0.1);
    --color_card_shadow: rgba(0, 0, 0, 0.08);
}

/* --- Fonts --- */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-v42-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/noto-sans-v42-latin-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-v42-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/noto-sans-v42-latin-700italic.woff2') format('woff2');
}

body {
    background-color: var(--color_page_bg);
    background: var(--color_page_bg_gradient);
    background-attachment: fixed;
    background-size: 100% 100%;

    font-family: 'Noto Sans', sans-serif;
}

/* We'll handle sizing and spacing ourselves */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Center and limit the max width of content for readability */
div.container {
    margin: 0 auto;
    padding: 0 0.5rem;
    width: 100%;
    max-width: var(--content_max_width);
}

/* --- Links --- */

a {
    color: var(--color_link);
}
a:visited {
    color: var(--color_link_visited);
}

a.dark {
    color: var(--color_link_dark);
}
a.dark:visited {
    color: var(--color_link_dark_visited);
}


/* --- Navbar --- */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--color_navbar_bg);
    border: 1px solid var(--color_navbar_border);
    box-shadow: 0px 2px 5px var(--color_navbar_shadow);
    padding: 1rem 0;
}

body>nav>.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: center;
}

body>nav .logo {
    height: 3rem;
    width: auto;
    padding-right: 1rem;
    margin-right: auto;
}

body>nav a, body>nav a:visited {
    color: inherit;
    text-decoration: inherit;
    margin: 0 1rem;
    transition-duration: 200ms;
    border-bottom: 1px solid transparent;
}

body>nav a:hover {
    border-bottom: 1px solid var(--color_navbar_underline);
}

body>nav a.active {
    font-weight: bold;
}


body>nav .expand_button {
    color: var(--color_navbar_expand_button);
    padding: 0.4rem 0.8rem;
    box-sizing: border-box;
    border: 1px solid var(--color_navbar_expand_button);
    border-radius: 0.2rem;
    display: none;
    transition-duration: 200ms;
}
body>nav .expand_button:hover {
    cursor: pointer;
    background-color: var(--color_navbar_expand_button_selected_bg);
    color: var(--color_navbar_expand_button_selected);
}

body>div.navbar_spacer {
    height: var(--navbar_spacer_height);
}

@media screen and (max-width: 800px) {
    body>nav .expand_button {
        display: initial;
    }

    body>nav a {
        display: none;
    }

    body>nav.expanded a {
        display: initial;
        padding: 0.8rem 0;
        width: 100%;
    }

    body>nav {
        justify-content: left;
    }
}

/* --- Headers --- */

h1.underline {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 255) 5%, rgba(0, 0, 0, 0) 60%) 1;
}

h1.underline_centered {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 255) 50%, rgba(0, 0, 0, 0) 80%) 1;
}

body>header {
    width: 100%;
    padding: 0 1rem;
}

body>header.banner {
    margin: 1rem 0;
    padding: 8rem 0.5rem;
    min-height: var(--banner_min_height);
    width: 100%;
    box-shadow: 0rem 0.5rem 1rem var(--color_banner_shadow);
    text-align: center;
    word-wrap: break-word;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    color: var(--color_banner_text);
    text-shadow: 0.05rem 0.05rem 0.15rem var(--color_banner_text_shadow);
}

body>header.full {
    margin: 1rem 0;
    width: 100%;
    text-align: center;
    word-wrap: break-word;
}

body>header.banner h1,
body>header.full h1 {
    font-size: 2.5rem;
    text-shadow: 0.2rem 0.2rem 0.4rem var(--color_banner_text_shadow);
}

body>header.banner h2,
body>header.full h2 {
    font-size: 1.8rem;
    text-shadow: 0.2rem 0.2rem 0.4rem var(--color_banner_text_shadow);
}

@media screen and (max-width: 700px) {
    body>header.banner h1,
    body>header.full h1 {
        font-size: 2rem;
    }
    body>header.banner h2,
    body>header.full h2 {
        font-size: 1.2rem;
    }
}

/* --- Footers --- */
body>footer {
    margin: 4rem 0 0 0;
    padding: 4rem 0.5rem 20rem 0.5rem;
    width: 100%;
    box-shadow: 0rem -0.5rem 1rem var(--color_footer_shadow), inset 2rem 5rem 12rem rgba(255, 255, 255, 0.1);
    color: var(--color_footer_text);
    background-color: var(--color_footer_bg);
}


/* --- Grids --- */

.grid>.image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: rgb(125,125,125);
    border: 1px solid var(--color_card_border);
    box-shadow: 0.3rem 0.3rem 0.7rem var(--color_card_shadow);
    min-height: 20rem;
    border-radius: 0.1rem;
}

.grid>img {
    width: 100%;
    height: auto;
}

/* --- Horizontal rules --- */
hr {
    box-sizing: border-box;
    width: 33%;
    margin: 3rem auto;
    max-width: var(--content_max_width);
    color: var(--color_hr);
}

hr.dark {
    color: var(--color_hr_dark);
}

/* --- Cards --- */
div.card {
    border-radius: 0.1rem;
    background-color: var(--color_card_bg);
    border: 1px solid var(--color_card_border);
    display: grid;
    grid-template-rows: max-content 1fr max-content;
    box-shadow: 0.3rem 0.3rem 0.7rem var(--color_card_shadow);
}

div.card>header {
    padding: 0.75rem 0.75rem 0 0.75rem;
}

div.card>div.content {
    padding: 0.75rem;
}

div.card>footer {
    background-color: rgb(3,3,12);
    border-radius: 0 0 0.5rem 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* --- Icons --- */
i.secondary {
    color: var(--color_text_secondary);
}