/* Box sizing rules */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* Remove default padding */

ul[class],
ol[class] {
    padding: 0;
}


/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}


/* Set core body defaults */

body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}


/* Remove list styles on ul, ol elements with a class attribute */

ul[class],
ol[class] {
    list-style: none;
}


/* A elements that don't have a class get default styles */

a:not([class]) {
    text-decoration-skip-ink: auto;
}


/* Make images easier to work with */

img {
    max-width: 100%;
    display: block;
}


/* Natural flow and rhythm in articles by default */

article>*+* {
    margin-top: 1em;
}


/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
    font: inherit;
}


/* Custom Styles */

a,
a:hover,
a:visited,
a:active{
    color: white;
}

#base {
    background-color: #00365d;
    position: relative;
    color: white;
}

#wave {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

#main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 7em;
    font-family: 'Times New Roman', Times, serif;
}

section#proverb,
section#content {
    width: 50%;
}

section#content,
section#proverb {
    margin-top: 4em;
}

p.proverb {
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1.2em;
    text-align: center;
}

p.author {
    font-size: .7em;
    text-align: right;
    text-align: center;
}

p.info {
    font-size: .8em;
    margin-top: 3em;
    text-align: center;
    text-shadow: .5px .5px 2px #00365d;
}

p.categories {
    text-align: center;
    font-style: italic;
    font-size: 1.5em;
    margin: .7em 0;
}

.m4c-logo {
    width: 100%;
    margin-top: 60px;
}

ul.categories-list {
    list-style-type: none;
    text-align: center;
}

ul.categories-list li {
    font-size: 1.5em;
}

#footer {
    position: absolute;
    bottom: .2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .2em 1em;
    flex-wrap: wrap;
}

#footer div {
    width: 10%;
}

#footer div.jury {
    width: 100%;
    margin-bottom: .2em;
}

#footer img {
    width: 100%;
    height: auto;
    display: inline-block;
}

#footer h4 {
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #00365d;
    text-shadow: .5px .5px 2px #fff;
}

#footer p {
    font-size: .7em;
    font-family: Arial, Helvetica, sans-serif;
    color: #00365d;
    text-shadow: .5px .5px 2px #fff;
}
#imprint{
    position: absolute;
    top: 0;
    right: 0;
    padding: .5em 1em;
    color: #006fbf;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .6em;
    text-transform: uppercase;
    letter-spacing: .15em;
}
#imprint a,
#imprint a:hover,
#imprint a:visited,
#imprint a:active{
    color: #bfbfbf;
}

@media screen and (min-width: 1200px) {
    #main {
        flex-direction: row;
    }
    section#content {
        order: 2;
        display: flex;
        justify-content: space-evenly;
    }
    section#proverb {
        order: 1;
        display: flex;
        justify-content: space-evenly;
    }
    section#proverb>div {
        width: 50%;
    }
    section#content>div {
        width: 60%;
    }
    p.proverb {
        text-align: left;
        font-size: 2em;
    }
    p.author {
        text-align: right;
    }
    p.info {
        text-align: left;
        font-size: .9em;
    }
    ul.categories-list {
        text-align: left;
    }
    ul.categories-list li {
        text-shadow: 2px 2px #000;
    }
    #footer {
        /* position: absolute;
        bottom: .2em; */
    }
    #footer div {
        width: 10%;
        text-align: center;
    }
    #footer div.jury {
        width: 8%;
        margin-bottom: 0;
        text-align: left;
    }
}