/**
 * Fonts.
 */

@font-face
{
    font-family: "Overlook";
    src: url('../fonts/Overlock-Italic.ttf');
    font-style: normal;
}

@font-face
{
    font-family: "Computer Modern";
    src: url('../fonts/cmunss.otf');
    font-style: normal;
}

@font-face
{
    font-family: "Computer Modern";
    src: url('../fonts/cmunsx.otf');
    font-weight: bold;
}

@font-face
{
    font-family: "Computer Modern";
    src: url('../fonts/cmunsi.otf');
    font-style: italic;
}

@font-face
{
    font-family: "Computer Modern";
    src: url('../fonts/cmunbxo.otf');
    font-weight: bold;
    font-style: italic;
}


/**
 * Responsive design
 */

@media (max-width:1385px)
{
    div#header
    {
        margin:0 3px;

    }

    div#content
    {
        margin:110px 3px 20px 3px;
    }

    div#menu ul
    {
        right:10%;
    }

    div#content img
    {
        width:80vw;
    }
}

@media (max-width:1200px)
{
    div#content
    {
        padding:20px 10% 20px 10%;
    }

    div#header
    {
        padding:10px 10% 10px 10%;
    }
}

@media (min-width:1201px)
{
    div#content
    {
        padding:20px 120px 20px 120px;
    }

    div#header
    {
        padding:10px 120px 10px 120px;
    }
}

@media (min-width:1386px)
{
    div#header
    {
        margin:0 10% 0 10%;
    }

    div#content
    {
        margin:110px 10% 20px 10%;
    }

    div#menu ul
    {
        right:20%;
    }

    div#content img
    {
        width:90vw;
    }
}

@media (min-width:2200px)
{
    div#content
    {
        width:1500px;
        margin:110px auto 20px auto;
    }

    div#header
    {
        width:1500px;
        margin:0 auto 0 auto;
    }
}

@media (max-width:1050px)
{
    ul#nav
    {
        display:none;
    }

    div#menu
    {
        display:block;
    }
}

@media (min-width:1051px)
{
    ul#nav
    {
        display:flex;
    }

    div#menu
    {
        display:none;
    }
}

@media (max-width:620px)
{
    h1
    {
        display:none;
    }
}

@media (min-width:621px)
{
    h1
    {
        display:inline;
    }
}


/**
 * General styling.
 */

body
{
    background:#b1b1b1;
    font-family: "Computer Modern", sans-serif;
    font-style: normal;
    margin:0;
    min-width:320px;
    justify-content: center;
}

a
{
    text-decoration: none;
}

.shadow
{
    box-shadow: 0 0 4px black;
}


/**
 * Header styling.
 */

div#header
{
    background: white;
    height:64px;
    display:flex;
    align-items:center;
    justify-items: left;
}

img#icon
{
    margin-right:25px;
}

h1
{
    font-weight: normal;
    color: #1d4474;
    margin:0;
    padding:0;
}

span.title
{
    font-size: 80%;
    color: black;
    font-family: "Overlook", sans-serif;
    font-style: normal;
}

div#header ul a
{
    border-bottom:2px solid black;
    transition: border-width 100ms linear, padding-bottom 100ms linear;
    padding:5px 10px 5px 10px;
    display:block;
    color:black;
}

div#header ul a:hover
{
    color:#1d4474;
    border-bottom-color:#1d4474;
    border-bottom-width: 4px;
    padding-bottom:3px;
}

ul#nav
{
    justify-items: right;
    align-items: center;
    list-style-type: none;
    margin-left:auto;
}

ul#nav li
{
    margin:0 10px 0 10px;
}

div#menu
{
    margin-left:auto;
}

div#menu img
{
    cursor: pointer;
}

/**
 * As a cross-platform CSS-only method for displaying a menu when clicking the menu icon, we make the icon the label
 * for a hidden checkbox and style the menu with the :checked pseudo-class.
 */

#clicker ~ label.click-guard
{
    position:fixed;
    display:none;
    top:104px;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
}

#clicker:checked ~ ul
{
    display:block;
}

#clicker:checked ~ label.click-guard
{
    display:block;
}

#clicker + label img.open
{
    display:block;
}

#clicker + label img.close
{
    display:none;
}

#clicker:checked + label img.open
{
    display:none;
}

#clicker:checked + label img.close
{
    display:block;
}

div#header input[type=checkbox]
{
    position: absolute;
    top: -9999px;
    left: -9999px;
 }

div#menu ul
{
    display:none;
    position:fixed;
    top:64px;
    background:white;
    padding:20px;
    list-style-type: none;
    box-shadow: 0 0 4px black;
    margin:0;
    z-index:3;
}

div#menu ul li
{
    margin:5px 10px 5px 10px;
}



/**
 * Content styling.
 */

div#content
{
    background:white;
    position:relative;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

h2
{
    font-weight:normal;
    border-bottom: 4px solid #EFEFEF;
    margin-top:50px;
}

h3
{
    font-size: 100%;
    color:#1d4474;
}

p
{
    margin-top:0.75em;
    margin-bottom:0.75em;
    text-align:justify;
}

sup
{
    vertical-align:top;
    font-size:75%;
    position:relative;
    top:-0.25em;
}

a.anchor
{
    display: block;
    position: relative;
    top: -44px;
    visibility: hidden;
}

div.separator
{
    width:100%;
    background:#EFEFEF;
    height:4px;
    margin-top:16px;
}

div.flex
{
    display:flex;
    align-items: flex-start;
    flex-wrap:wrap;
    row-gap:20px;
}

div.flex div h3
{
    margin-top:0;
}

div.flex div p:last-child
{
    margin-bottom:0;
}

div#content img
{
    margin:0;
    height:auto;
}

div.flex div p:first-child
{
    margin-top:0;
}

div.image
{
    flex:0 0 auto;
}

div.text-block
{
    flex:1 1 450px;
}

div.info-block
{
    flex:0 1 375px;
    background: #f4f4f4;
    border-radius: 8px;
    padding: 15px;
    min-height: 270px;
    height:fit-content;
}

div.contact-block
{
    flex:0 1 325px;
}

div.justify-center
{
    justify-content:center;
    column-gap: 40px;
}

div.justify-left
{
    justify-content:left;
    column-gap: 20px;
}

div.spacer
{
    height:50vh;
}

p.footnote
{
    font-size:75%;
}

div#content img.icon
{
    width:20px;
    height:20px;
    display:inline-block;
}

div#content .icon
{
    vertical-align:middle;
}

#shape1
{
    position:absolute;
    left:0;
    top:0;
    width:300px;
    height:0;
    border-right: 20px solid transparent;
    border-top: 20px solid #2673aa;
}

#shape2
{
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:300px;
    border-top: 20px solid transparent;
    border-left: 20px solid #1d4474;
    border-bottom: 20px solid transparent;
}

#shape3
{
    position:absolute;
    right:0;
    bottom:0;
    width:300px;
    height:0;
    border-bottom: 20px solid #2673aa;
    border-left: 20px solid transparent;
}

#shape4
{
    position:absolute;
    right:0;
    bottom:0;
    width:0;
    height:300px;
    border-top: 20px solid transparent;
    border-right: 20px solid #1d4474;
    border-bottom: 20px solid transparent;
}

#page
{
    position: fixed;
    left:0;
    right:0;
    top:0;
    background-color: white;
    z-index:1;
}

.extra-margin
{
    margin-top:20px;
}