/*-----------------------------------------------------------
 
Generell
---------------------------------------------------------*/
:root {
    animation-delay: 0;
    color: inherit;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;

    --hff: rgb(32, 221, 64);
    --dg: rgb(52, 109, 61);
    --dark: rgb(27, 27, 27);
    --selected: rgb(112, 112, 112);
    --white: rgb(255, 255, 255);
    --almost-white: rgb(230, 230, 230);
    --gray: rgb(94, 94, 94);
    --link: rgb(168, 247, 164);
}
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Regular.ttf') format('truetype');
    font-weight: 300; /* kann man noch verändern */
    font-style: normal;
}
:: selection {
    background-color: rgb(168, 247, 164);
    color: black;
}   

/*-----------------------------------------------------------
 
Text
---------------------------------------------------------*/

a {
    text-decoration: none;
    color: inherit;
}

section.article p {
    line-height: 1.3em;
    font-size: 1.3em;
    color: inherit;
    text-align: inherit;
}

section.article {
    width: 60%;
    margin: 0 auto;
    text-align: left;
    min-height: 10em;
}

em {
    font-style: italic;
}

b {
    font-weight: 700;
}

hr {
    color: black;
    height: 0px;
}

strong {
    font-weight: 700;
    color: var(--hff);
    font-size: 1.3em;
}

/*-----------------------------------------------------------
  
Überschriften
---------------------------------------------------------*/
h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 1em;
    text-align: left;
    color: white;
}
h2 {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 1em;
    text-align: left;
    color: rgb(32, 221, 64);
}
h3 {
    font-size: 1.75em;
    font-weight: 700;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
/*-----------------------------------------------------------
 
Bilder
---------------------------------------------------------*/
.m-horizontal {
    margin: 1em auto 0 auto; /* top, horizontal, bottom */
    border-radius: 0.75em;
    width: 100%;
    display: block; /* needed for margin auto to work on images */
}
.m-vertikal {
    height: 35em;
    margin-top: 1em;
    border-radius: 0.75em;
}
.m-gif {
    margin-top: 1em;
    border-radius: 32px;
    width:100%;
}
 /*-----------------------------------------------------------
  
Banner----------------------------------------------------------*/
section.banner {
    align-items: center;
    background-color: var(--dark);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 5px 40px 0 rgba(0, 0, 0, 0.2);
    color: var(--white);
    cursor: default;
    display: flex;
    height: 20em;
    justify-content: space-around;
    margin: 3em 0;
    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
}
section.banner h1 {
    margin: 2em 0em;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2em;
}
section.banner h1 strong {
    font-size: 1.5em;
    color: var(--white);
}
/*-----------------------------------------------------------
 
body
---------------------------------------------------------*/
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

/*-----------------------------------------------------------
 
Iframes
---------------------------------------------------------*/

.nav-iframe {
    width: 100%;
    height: 25%; 
    position: fixed; 
    top: 0%; 
    z-index: 100;
    border: none;
}

/*-----------------------------------------------------------
 
Klassen
---------------------------------------------------------*/

.green {
    color: rgb(32, 221, 64);
}