/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body{
  background-color:#A99C96;
}



h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #fff;
  text-align: left;
}



.main {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 100px 500px 100px;
  column-gap: 10px;
  row-gap: 10px;
  grid-template-areas: 
  " . logo . "
  " . text . "
  " . fuss . ";
}

.logo{
  grid-area: logo;
  padding-top: 1rem;
}
.logo img{
  width: 400px;
}

.text{
  grid-area: text;
}
h1{
  font-size: 3rem;
  font-weight: 700;
  padding-top: 5rem;
}
h2{
  font-size: 3rem;
  font-weight: 500;

}
h3{
  font-size: 3rem;
  font-style: italic;
  font-weight: 700;
  padding-bottom: 3rem;
}
h4{
  font-size: 3rem;
  font-style: italic;
  font-weight: 500;
}
.fuss {
  grid-area: fuss;
  font-size: 0.75rem;
  color: #fff;
  text-align: center;
}



/* ---------------------------------------------------------------- */
/* Media Query */
/* ---------------------------------------------------------------- */

/* ===== media query: IPHONE HOCH ==================================================== */

/* Extra small devices (phones, 600px and down) */
/* iPhone hoch (H: 538, W: 375)*/
@media only screen and (max-width: 400px) {
  .main {
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 80px 200px 80px;
  }
  
  .logo{
    padding-top: 1rem;
  }
  .logo img{
    width: 200px;
  }
  
  h1{
    font-size: 0.75rem;
    padding-top: 1rem;
  }
  h2{
    font-size: 0.75rem;
  }
  h3{
    font-size: 0.75rem;
    padding-bottom: 3rem;
  }
  h4{
    font-size: 0.75rem;
  }
  .fuss {
    font-size: 0.5rem;
  }


}

/* ===== media query: IPHONE QUER ==================================================== */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* iPhone quer (H: 314, W: 667) */
@media only screen and (min-width: 401px) {
  .main {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 50px 200px 50px;
  }
  
  .logo{
    padding-top: 1rem;
  }
  .logo img{
    width: 200px;
  }
  
  h1{
    font-size: 1rem;
    padding-top: 2rem;
  }
  h2{
    font-size: 1rem;
  }
  h3{
    font-size: 1rem;
    padding-bottom: 3rem;
  }
  h4{
    font-size: 1rem;
  }
  .fuss {
    font-size: 0.5rem;
  }
}

/* ===== media query: IPAD HOCH ==================================================== */

/* Medium devices (landscape tablets, 768px and up) */
/* iPad hoch (H: 1023, W: 744) */
@media only screen and (min-width: 740px) {
  .main {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 100px 800px 100px;
  }
  
  .logo{
    padding-top: 1rem;
  }
  .logo img{
    width: 300px;
  }
  
  h1{
    font-size: 3rem;
    padding-top: 5rem;
  }
  h2{
    font-size: 3rem;
  }
  h3{
    font-size: 3rem;
    padding-bottom: 3rem;
  }
  h4{
    font-size: 3rem;
  }
  .fuss {
    font-size: 0.75rem;
  }
}

/* ===== media query: IPAD QUER ==================================================== */

/* Large devices (laptops/desktops, 992px and up) */
/* iPad quer (H: 634, W: 1133) */
@media only screen and (min-width: 1100px) {
  .main {
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 100px 400px 100px;
  }
  
  .logo{
    padding-top: 1rem;
  }
  .logo img{
    width: 300px;
  }
  
  h1{
    font-size: 2rem;
    padding-top: 5rem;
  }
  h2{
    font-size: 2rem;
  }
  h3{
    font-size: 2rem;
    padding-bottom: 3rem;
  }
  h4{
    font-size: 2rem;
  }
  .fuss {
    font-size: 0.75rem;
  }
}

/* ===== media query: LAPTOP ==================================================== */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* Laptop (H: 730, W: 1536) */
@media only screen and (min-width: 1200px) {
  .main {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 100px 500px 100px;
  }
  
  .logo{
    padding-top: 1rem;
  }
  .logo img{
    width: 400px;
  }
  
  h1{
    font-size: 3rem;
    padding-top: 5rem;
  }
  h2{
    font-size: 3rem;
  }
  h3{
    font-size: 3rem;
    padding-bottom: 3rem;
  }
  h4{
    font-size: 3rem;
  }
  .fuss {
    font-size: 0.75rem;
  }
    

}