body{
  margin: 0;
  padding: 0;
  background-color: #f0e6d8ff;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}
a{
  text-decoration: none;
}
.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  right: 5vw;
  top: 4vw;
  margin: 0;
  padding: 0;
  position: fixed;
}
.navbar{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: .5vw 0 .5vw 0;

  background-color: white;
  border-radius: 1vw;
  border-style: solid;
  border-width: .4vw;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 2vw;
  width: 10vw;
  height: 4vw;
}
#nav1{
  border-color: #34344A;
  color: #34344A;
}
#nav2{
  border-color: #80475E;
  color: #80475E;
}
#nav3{
  border-color: #CC5A71;
  color: #CC5A71;
}
#nav4{
  border-color: #C89B7B;
  color: #C89B7B;
}

#nav1:hover{
  background-color: #34344A;
  color: white;
}
#nav2:hover{
  background-color: #80475E;
  color: white;
}
#nav3:hover{
  background-color: #CC5A71;
  color: white;
}
#nav4:hover{
  background-color: #C89B7B;
  color: white;
}

#title{
  position: fixed;
  background-color: white;
  width: 18vw;
  color: #80475E;
  padding: 1.5vw;
  margin: 1.5vw;
  padding-top: 2vw;
  border: #80475E;
  border-width: .5vw;
  border-radius: 1vw;
  border-style: solid;

  font-family: 'Bungee';
  font-size: 4.1vw;
  line-height: 1.05;

  box-shadow: .5vw .5vw 0 #80475E;
}


#grid-container{
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(8, 4.5vw);
  grid-gap: 1.5vw;
}

#header{
  grid-area: 1/5/8/11;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  line-height: .5;
  background-color: #80475E;
  border-radius: 1vw;
  font-family: 'Bungee';
  font-weight: normal;
  margin-top: 1.5vw;
  color: white;
}
h2{
  margin-top: 5vw;
  font-size: 2vw;
  line-height: 0;
}
h1{
  font-size: 3vw;
  line-height: 0;
}
#header img{
  object-fit: cover;
  margin-top: 4.5vw;
  height: 22vw;
  width: 40vw;
  border-radius: 1vw;
}


.imgs{
  width: 20vw;
  border: #80475E;
  border-width: .5vw;
  border-radius: 1vw;
  border-style: solid;
  margin-bottom: 2vw;
}
.steps{
  margin: 0;
  background-color: #80475E;
  width: 17vw;
  height: 7vw;
  border: #80475E;
  border-width: .5vw;
  border-radius: 1vw;
  border-style: solid;
  padding: 1vw;
  color: white;
  font-family: 'Rubik';
  font-size: 1.5vw;
}
#img1{
  grid-area: 8/5/10/10;
}
#step1{
  grid-area: 8/8/10/11;
  height: 9vw;
}
#img2{
  grid-area: 10/5/11/10;
}
#step2{
  grid-area: 10/8/11/11;
  height: 11vw;
}
#img3{
  grid-area: 12/5/12/10;
}
#step3{
  grid-area: 12/8/12/11;
  height: 9vw;
}
#img4{
  grid-area: 13/5/13/10;
}
#step4{
  grid-area: 13/8/13/11;
  height: 11vw;
}