/*Hier kann ich den Font typen vor definieren und von google fonts importieren*/
@import url('https://fonts.googleapis.com/css2?family=Timmana&display=swap');
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
/*Hier defeniere ich die Hauptfarben für die Website. Du kannst sie mit der VAR abrufen*/

:root{
    
        --main-brand-color: #297AE3;
        /*--first-color:#15171C;*/
        --second-color:#232933;
        --third-color:#15171C;
        --light-secondary-color:#2E3744;
        --text-color:white;
        --secondary-text-color:#B3B4B6;
}

/* Hiermit resette ich den Margin und Padding bereich für alle browser*/
*{
    margin: 0;
    padding: 0;
}

body{
        min-height: 100vh;
        /*background-color: var( --primary-color);*/
        background-image: linear-gradient(120deg,#313132,#161618);
        font-family: 'Tim', sans-serif;
        font-size: 15px;
        color: var( --text-color);     
}

h1 {
    padding: 50px 0;
    font-weight:100;
    text-align: center;
  }
  
h1{
        font-size: 100px;
        line-height: 115%;
}

h2{
    font-size: 30px;
}


h3{
    font-size: 20px;
}

/* Mit dem "p" kann ich die Spalte zwischen den text einrichten*/
p {
    margin: 0 0 20px;
    line-height: 1.5;
 }


.subheading{
                margin-top: 25px;
                color: var(--secondary-text-color);
}


.hero_slider_container h2   {
    font-size: 30px;
}

.hero_slider_container p    {
    text-align: justify;
    line-height: 175%;
}

/*
.container_contentBox_section h2{
                font-size: 50px;
}

.container_contentBox_section p{
                font-size: 50px;
}
*/

footer h2{
    font-size: 50px;
    text-align:center;
}

/*Um die Schrift an die responsiv größe für handy anzu passen brauchen wir einen media query*/
@media(max-width: 800px){
    h1 {
            font-size: 12vw;
            text-align: center;
        }

    .subheading{
                    text-align: center;
                }
    body{
            font-size: 16px;
        }
}