*{
  margin: 0;
  padding: 0;
}

*{
    font-family: 'Oswald', sans-serif;
}

.section1{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 30%;
  margin-right: 30%;
  text-align: center;
}

h2 {
  font-size: 5em;
  margin-top: 5%;
  text-shadow:0 4px 10px rgba(0,0,0,0.3);
  margin-bottom: 5%;;
}

p {
  font-size: 2.5em;
}

.section_button{
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 10%;
  margin-bottom: 10%;
}

h3{
  text-align: center;
  font-size: 4em;
  margin-bottom: 3%;
  text-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.cocktail1{
  width:60vh;
  height:auto;
  margin-bottom: 3%;
  border-radius: 5%;
}

.button1 {
  background-color: black;
  border-radius: 10px;
  color: #ffc896;
  padding: 10px 20px;
  text-decoration: none;
  margin-left: 42%;
  margin-right: 42%;
  font-size: 3em;
}

.generator{
  display:flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 3%;
}

.generator-content{
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3%;
}

h4{
  text-align: center;
  font-size: 4em;
  margin-bottom: 2%;
  text-shadow:0 4px 10px rgba(0,0,0,0.3);
}

h5{
  text-align: center;
  font-size: 3em;
  margin-bottom: 2%;
  text-shadow:0 4px 10px rgba(0,0,0,0.3);
  text-decoration: underline;
}

.rezept-ueberschrift{
  text-align: left;
  font-weight: bolder;
  text-decoration: underline;
}

#cocktail-rezept ul{
  list-style-position: inside;
}

.generator-text{
  font-size: 2.4em;
  margin-bottom: 2%;
  width:400px;
}

.cocktail2{
  width:35vh;
  height:auto;
  margin-bottom: 3%;
  border-radius: 5%;
}

.generator-button{
  background-color: black;
  border-radius: 10px;
  color: #ffc896;
  padding: 10px 20px;
  text-decoration: none;
  margin-left: 42%;
  margin-right: 42%;
  font-size: 3em;
  width:400px;
}

footer{
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  height:80px;
}

footer p{
  font-size: 1.5em;
  color:#ffc896;
}

/* === Responsive Design === */
@media (min-width:1440px){
  .button1{
    margin-left: 20%;
    margin-right:20%;
  }
}
@media (max-width: 1024px){
  .section1{
    margin-left: 25%;
    margin-right: 25%;
  }
  h3{
    margin-left: 25%;
    margin-right: 25%;
  }
  .button1{
    font-size: 1em;
    margin-left: 20%;
    margin-right: 20%;
  }
}
@media (max-width: 768px){
  .section1{
    margin-left: 20%;
    margin-right: 20%;
  }
  h3{
    margin-left: 20%;
    margin-right: 20%;
  }
  h4{
    margin-left: 20%;
    margin-right: 20%;
  }
  h5{
    margin-left: 20%;
    margin-right: 20%;
  }
  .button1{
    font-size: 1.3em;
    margin-left: 25%;
    margin-right: 25%;
  }
  .generator-content{
    flex-direction: column;
  }
  .generator-text{
    font-size: 1em;
    text-align: center;
    text-decoration: none;
  }
  .generator-button{
    font-size: 1.3em;
    width:50%;
    margin-left: 30%;
    margin-right: 30%;
  }
}

@media (max-width: 480px){
  .section1{
    margin-left: 10%;
    margin-right: 10%;
  }
  h2{
    font-size: 1.6em;
    margin-bottom: 3%;
  }
  h3{
    font-size: 1.6em;
    margin-left: 10%;
    margin-right: 10%;
  }
  h4{
    font-size: 1.6em;
    margin-left: 10%;
    margin-right: 10%;
  }
  h5{
    font-size: 1.4em;
    margin-left: 10%;
    margin-right: 10%;
  }
  p{
    font-size: 1em;
  }
  .cocktail1{
    width:70%;
  }
  .cocktail2{
    width:70%;
  }
  .button1{
    font-size: 1em;
    margin-left: 30%;
    margin-right: 30%;
  }
  .generator-content{
    flex-direction: column;
  }
  .generator-text{
    font-size: 1em;
    text-align: center;
    text-decoration: none;
  }
  .generator-button{
    font-size: 1.3em;
    width:50%;
    margin-left: 30%;
    margin-right: 30%;
  }
}

@media (max-width:375px){
  .section1{
    margin-left: 10%;
    margin-right: 10%;
  }
  h2{
    font-size: 1.3em;
    margin-bottom: 3%;
  }
  h3{
    font-size: 1.3em;
    margin-left: 10%;
    margin-right: 10%;
  }
  h4{
    font-size: 1.3em;
    margin-left: 10%;
    margin-right: 10%;
  }
  h5{
    font-size: 1.1em;
    margin-left: 10%;
    margin-right: 10%;
  }
  .cocktail1{
    width:80%;
  }
  .cocktail2{
    width:80%;
  }
  .button1{
    font-size: 1em;
    margin-left: 30%;
    margin-right: 30%;
  }
  .generator-content{
    flex-direction: column;
  }
  .generator-text{
    font-size: 1em;
    text-align: center;
    text-decoration: none;
  }
  .generator-button{
    font-size: 1em;
    width:50%;
    margin-left: 30%;
    margin-right: 30%;
  }
  footer p{
    font-size: 1em;
  }
}