/*Einsatz universalselektor wird mit * eingeleitet*/

*{
box-sizing: border-box;     /*verhindert das bei padding und margin die größe verändert wird. hier behalten die Boxen ihre vorgegebene Dimension*/
margin: 0px; /*entfernt alle automatischen außenabstände, die von browsern automatisch vergeben werden*/

padding: 0; /*alle browser geben den ul/ol Listen mit passing-left automatisch einen abstand nach rechts*/

}



body {
    font-family: Arial;
    font-size: 16px;

    color: #fff;
    background-color:#08415b;
}

h2, p {
    margin-bottom: 15px;
}

.container {
    width: 080vw;
    max-width: 1200px;
    margin: auto;
    border: 1px solid #fff;
}


header{ 
    height: 500px;                      /*Einheit vh = viewport height*/
    background-color: #217da8;

}

header p {
    text-align: center;
    background-color: rgb(151, 149, 5);
}

nav{
    text-align: center;
    background-color: #4992b4;

}

main{
    padding: 25px;
    background-color: #c7dee9;

}

section{
    padding: 25px;
    background-color: #042230;
}

/*einsatz von CSS Klassen / ID 
muss im css vorbereitet werden und als Attribut im HTML eingebaut werden
wird mit punkt eingeleitet und sollte immer klein geschrieben sein
keine umlaute/leerzeichen/sonderzeichen
klassenname darf nicht mit einer Zahl beginnen
.rot ist eine allgemeine klasse, die jedem html element zu geordnet werden kann

kann auch den klassennamen einem Element zu weisen. Bsp. nur für p Tags. dann denn Tag vor dem Punkt einbauen*/

.red{
    background-color: rgb(141, 15, 15);
    padding: 20px;
}

.box1{
    /* margin = Außenabstand*/
    margin: 45px;

    /* padding = innenabstand*/
    padding: 15px;

    width: 200px;
    height: 400px;
    background-color: rgb(2, 117, 117);
}


footer{
    background-color: #05638f;
}

footer p{
    padding: 10px;
    background-color: aqua;
    color: black;
    text-align: center;
}

footer a{
color: black;

}