/* css for existing html elements */

:root {
    font-size: calc(15px + 0.390625vw);
}

html {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: #03142b;
    color: #FFFFFF;
    margin: 0;
}

h1 {
    font-size: 1.8rem;
    color: #90CAF9;
}

h2 {
    font-size: 1.6rem;
    color: #90CAF9;
}

h3 {
    font-size: 1.4rem;
    color: #90CAF9;
}

h4 {
    font-size: 1.2rem;
    color: #90CAF9;
}

a:link {
    color: #FFFFFF;
    text-decoration: none;
}

a:visited {
    color: #DDDDDD;
}

iframe {
    filter: invert(0.95) saturate(1) hue-rotate(160deg);
    width: 60vw;
    height: 60vh;
}

hr {
    color: #82B1FF;
}

/* css for custom classes */

.banner {
    text-align: center;
    position: relative;
    margin: auto;
}

.banner-img {
    display: none;
    width: 100%;
    animation-name: fade;
    animation-duration: 11s;
    max-height: 450px;
}

.content {
    background-image: linear-gradient(#0a2e64, #194270);
}

.social-media {
    background-color: #222222;
    padding: 2%;
    transition: 0.11s ease-in;
    display: flex;
    justify-content: center;
}

.social-media:hover {
    background-color: #000000;
    transition: 0.11s ease-in;
}

.social-media-icon {
    width: 100%;
}

.social-media-link {
    border-radius: 50%;
    padding: 2.5%;
    width: 6vw;
    height: 6vw;
    margin: 0 5% 0 5%;
}

.instagram {
    background-color: #125688;
}

.facebook {
    background-color: #4267B2;
}

.youtube {
    background-color: #FF0000;
}

.about-us, .calendar, .contact {
    text-align: center;
    padding: 2% 15% 2% 15%;
    transition: 0.11s ease-in;
}

.contact {
    background-color: #222222;
    /* color: #FFFFFF; */
}

.contact:hover {
    background-color: #000000;
    transition: 0.11s ease-in;
}

.contactcontainer {
    display: flex;
    justify-content: center;
}

.contactmail {
    padding: 0 0 0 15%;
    width: 50%;
}

.contactadress {
    padding: 0 15% 0 0;
    width: 50%;
}

.about-us:hover, .calendar:hover {
    background-color: #06224d;
    transition: 0.11s ease-in;
}

.footer {
    background-color: #03142b;
    padding: 2%;
    border-top: #82B1FF 1px solid;
    text-align: center;
}

.impressum {
    padding: 2% 10% 2% 10%;
    background-image: linear-gradient(#0a2e64, #194270);
    font-size: calc(11px + 0.390625vw);
}

.navbar {
    background-color: #222222;
    top: 0;
    width: 100%;
    padding: .5% 0 .5% 0;
    transition: 0.11s ease-in;
    display: flex;
    justify-content: center;
}

.navbar:hover {
    background-color: #000000;
    transition: 0.11s ease-in;
}

.navbar a, .navbar-form {
    padding: .5% 1% .5% 1%;
}

.navbar-button {
    border: none;
    background: none;
    font-size: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.fade {
    animation-name: fade;
    animation-duration: 0s;
}

@keyframes fade {
    0% {opacity: 0}
    20% {opacity: 1}
    80% {opacity: 1}
    100% {opacity: 0}
}

@media screen and (max-width:1200px) {
    .social-media-link {
        width: 8vw;
        height: 8vw;
    }

    .banner-img {
        max-height: 320px;
    }
}

@media screen and (max-width:1000px) {
    .social-media-link {
        width: 10vw;
        height: 10vw;
    }

    .contactmail {
        padding: 0 0 0 5%;
    }

    .contactadress {
        padding: 0 5% 0 0;
    }

    .banner-img {
        max-height: 250px;
    }
}

@media screen and (max-width:700px) {
    .social-media-link {
        width: 12vw;
        height: 12vw;
    }

    .contactcontainer {
        display: block;
        justify-content: center;
    }

    .contactmail, .contactadress {
        padding: 0;
        width: 100%;
        font-size: calc(15px + 0.390625vw);
    }

    .banner-img {
        max-height: 190px;
    }
}

@media screen and (max-width:400px) {
    .banner-img {
        max-height: 100px;
    }
}