@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chicle&display=swap');
html, body {
    background-color: rgb(218, 95, 13);
    background-image: url('./imagenes/fondonaranjaamarillo.jpg');
    background-position: center;
    background-size: cover;
  }

header{
  height: fit-content;
  margin-bottom: 10px;
  position: relative;

}
.headertitle {
    font-family: "Chicle", serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    font-size: 60px;
    text-align:center;
    color: rgb(255, 198, 74);
    left: 0vw;
    top: 3vh;
    z-index: 5;
    text-shadow: 1px 1px 3px black;

}

nav {
    font-family: "Abril Fatface", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 25px; 
    color: rgb(187, 30, 30);
    width: 100vw;
    height: 7vh;
    left: 0vw;
    top: 15vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    z-index: 5;
}

.button {
  border:rgb(218, 95, 13) solid 2px;
  background-color:rgb(218, 95, 13);
  font-family: "Indie Flower", cursive;
  position: relative;
  z-index: 100;
  transition: 1s;
}

.button:hover {
  background-color:rgb(226, 66, 66) ;
  border: rgb(226, 66, 66) solid 2px;
  cursor: pointer;
}
#menu{
  display: inline-block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  height:fit-content;
  z-index: 99;
  cursor: pointer;
  padding: 15px;
  color: white;
  border:rgb(218, 95, 13) solid 2px;
  background-color:rgb(218, 95, 13);
  font-size: 20px;
  font-family: "Indie Flower", cursive;
  text-align: justify;
  transition: 1s;
}

#menu:hover{
  background-color:rgb(226, 66, 101) ;
  border: rgb(226, 66, 66) solid 2px;
}
main {
  width: 100vw;
  height: fit-content;
  position: absolute;
  left: 0vw;
  top: 25vh;
}

section {
width: 90vw;
height: 100vh;
padding: 5vw;
margin-top: 50px;
}


 @media only screen and (max-width: 650px){
  .headertitle{
    font-size: 30px;
  }
  nav{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    
  }
  .button{
    font-size: 15px;
    margin-top: 0px;
  }
  header{
    position: relative;
    height: 100vh;
    justify-content: center;
  }

  #menu{
    font-size: 15px;
  }


 }