:root {
    /* colors */
    --col-red: #FC4D8D;
    --col-green: #5DFF00;
    --col-blue: #383E4E;
    --col-white: #e6e8ed;
    --col-gray: #adb3c4;
    --full-margin: calc(100vw - 800px);
    --row-margin: calc(var(--full-margin)/2);
}

/* Base elements */

html {
    background-color: var(--col-blue);
}

body {
    background: var(--col-blue);
    background-color: var(--col-blue);
    color: var(--col-white);
    font-family: "Helvetica Neue", "Calibri", sans-serif;
    padding: 0;
    margin: 0;
}

.block-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    color: black;
    padding: 0;
    margin: 0;
}

.block {
    scroll-snap-align: start;
    padding: 0;
    margin: 0;
    align-items: stretch;
    /* justify-content: space-evenly; */
}

header {
    flex: 100%;
    height: 80vh;
    text-align: center;
}

section {
    flex: 44%;
    height: 80vh;
    background: var(--col-white);
}

footer {
    flex: 100%;
    height: 20vh;
}

.content-wide, .content-left, .content-right {
    height: inherit;
    padding: 0;
    margin: 0;
    /* margin-top: 1ch; */
    adjust-content: stretch;
}

.content-wide {
    color: var(--col-white);
    max-width: 800px;
    margin: 0 var(--row-margin);
}

.content-left {
    color: var(--col-blue);
    max-width: 375px;
    margin-left: var(--row-margin);
}

.content-right {
    /* width: 635px; */
    color: var(--col-blue);
    max-width: 375px;
    margin-right: var(--row-margin);
}

h1 {
    height: 16vh;
    margin: 0;
    padding: 0;
    padding-top: 4vh;
    text-align: center;



    /* display: block; */
    color: var(--col-blue);
    font-family: "Helvetica Neue", "Calibri", sans-serif;
    /* font-size: 1.1em; */
    font-weight: 500;
    /* text-transform: uppercase; */
    /* padding: 0.5rem 0 0.5rem 0; */
    /* margin: 0; */
}

a {
    text-decoration: none;
}

header a, footer a {
    color: var(--col-green);
}

section a {
    color: var(--col-red);
}

p {
    font-size: 1.1em;
    /* font-weight: 400; */
    text-align: justify;
    padding: 0 0 0 0;
    margin: 0 auto 3em auto;
}

li {
    font-size: 1.1em;
    /* font-weight: 400; */
    /* text-align: justify; */
    padding: 0 0 0 0;
    margin: 0 auto 1em auto;
}

/* Header */

p.language_swapper {
    width: 80vw;
    max-width: 800px;
    font-size: 1.0rem;
    font-weight: 400;
    text-align: right;
    padding:  1em 0 1em 1em;
    margin: 0 auto 0 auto;
}

.header-image {
    width: auto;
    height: calc(90% - 8em);
    max-height: 50vh;
}

p.description {
    width: 80%;
    max-width: 800px;
    font-size: 2em;
    font-weight: 200;
    text-align: center;
    padding: 1em 0 1em 0;
    margin: 0 auto 0 auto;
}

/* Footer */

p.fine_print {
    font-size: 0.8em;
    text-align: center;
    padding: 0.2em 0;
    margin: 0 0;
}

p.contact-info {
    /* background: var(--col-blue); */
    /* color: var(--col-white); */
    font-size: 0.8em;
    text-align: center;
    padding: 0.2em 0;
    margin: 0 0;
}

/* Contacts */

.contact-menu {
    width: 56px;
    height: 16vh;
    position: fixed;
    bottom: 0;
    right: calc(var(--row-margin) - 55px);
    filter: drop-shadow(3px 3px 2px #000);
    padding: 0;
    margin: 0;
}

.contact-icon{
    padding: 0;
    margin: 0;
    height: 8vh;
    width: auto;
    max-height: 48px;
    max-height: 48px;
}

/* @media */

/* Make paragraph and list smaller on smaller screen height */
@media (max-height: 500px) {
    p {
        font-size: 1em;
        margin-bottom: 0;
    }
    li {
        font-size: 1em;
        margin-bottom: 0;
    }
}

/* Keeps the contact menu on screen for smaller screen height */
@media (max-height: 600px) {
    .contact-menu{
        height: auto;
    }
}

/* Keeps the contact menu on screen for smaller screen width */
@media (max-width: 900px) {
    .contact-menu {
            right: 0;
        }
    }

/* Switch from dual to single column layout on smaller screen width */
@media (max-width: 800px) {
    .block {
        flex: 100%;
    }
    .content-wide {
        width: 100vw;
        margin: 0 auto;
    }
    .content-left {
        max-width: 250px;
        margin: 0 auto;
    }
    .content-right {
        max-width: 250px;
        margin: 0 auto;
    }
    .contact-menu {
        right: 0;
    }
}