*{
  box-sizing: border-box;
}
html {
  background-color: #585966;
}

header {
  font-family: 'David Libre', serif;
  background-color: #6F7182;
  border-radius: 20px;
  padding: 10px 30px;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;

}
.container {
  display: flex;
  flex-flow: column;
  width: 100%;
}

header h1 {
  grid-column: 2/4;
  font-size: 2rem;

}
header h2 {
  grid-column: 2/4;
  font-size: 1rem;


}

p {
  font-size: 1rem;
}

h3 {
  font-size: 2rem;

}

.koala {
  width: 30vw;
  height: auto;
  grid-column: 1/2;
  grid-row: 1/3;
  margin-left: auto;
}
.paar, .cry_baby, .zug_seite, .zigi, .zug_vorne, .rip {
  display: flex;
  justify-content: center;
  width: 100%;
}

img {
  width: 45vw;
  height: auto;
}
.zigi img{
  width: 35vw;

}

body {
  color: white;
  font-family: 'Raleway', sans-serif;

}
article {
  background-color: #6F7182;
  border-radius: 20px;
  margin: 3%;
  padding: 5% 10%;
  font-size: 70px;
}
footer {
  width: 100%;
  height: 70px;
}
div.icons {
  width: 100%;
  text-align: center;
  color: white;
}

.icons a {
  color: white;
}

.icons a:hover {
  color: #24282e;
}




@media screen and (min-width: 800px){

  .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  }
.text {
  grid-area: 1 / 1 / 2 / 2;
}

.paar {
   grid-area: 1 / 2 / 2 / 3;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
}



.rip {
  grid-area: 2 / 1 / 3 / 2;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.cry_baby {
  grid-area: 4 / 2 / 5 / 3;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;

}
.zug_seite {
  grid-area: 5 / 1 / 6 / 2;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;

}
.zigi {
  grid-area: 7 / 2 / 8 / 3;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;

}
.zug_vorne {
  grid-area: 8 / 1 / 9 / 2;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}




header h1{
  font-size: 55px;
}
header h2{
  font-size: 30px;
}
h3{
  font-size: 50px;
}

article {
  font-size: 40px;
  padding: 5%;
  flex-direction: column;
}

.paar img {
height: 40vw;
width: 40vw;
}
.rip img {
height: 70vw;
width: 40vw;
}
.cry_baby img {
height: 55vw;
width: 45vw;
}
.zug_seite img {
height: 30vw;
width: 50vw;
}
.zigi img {
height: 55vw;
width: 37vw;
}
.zug_vorne img {
height: 40vw;
width: 30vw;
}

img {
  height: 45vw;
}

p {
  font-size: 1rem;
}

}