*{
    padding: 0;
    margin: 0;
    font-size: 2vw;
}

body{
  background-color: beige;
}

header {
background-color: beige;
  background-size: 100vw;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 3%;
  animation: expandirAltura linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0% 300%;

}


header h1 {
  text-align: center;
  position: relative;
  font-size: 4vw;
  font-family: "Josefin Sans", sans-serif;
}

nav {
  width: 100%;
  height: 6vw;

}

nav ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  list-style-type: none
}

nav ul li {
  list-style-type: none;
  margin: 0 2% 0 2%;

}

nav ul li a {
  display: inline-block;
  text-decoration: none;
  color: black;
  padding: 1vw;
  font-size: 1.3vw;
  font-family: "Josefin Sans", sans-serif;
  transition: background-color 0.2s;
  background-color: rgb(255, 239, 167);
}

nav ul li a:hover {
  background-color: rgb(212, 199, 141);
}

.principal{
  margin-top: 5%;
  box-sizing: border-box;
}

.imagem{
  width: 100%;
  overflow: hidden;
}

body{
  box-sizing: border-box;
}

.imagem img{
  width: 100%;
  transform: translateX(10%);
}

main{
  width: 100%;
  box-sizing: border-box  ;
}