*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

.main{
  width: 100vw;
  height: 100vh;
  background-image: url(background.png);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.back-text h1{
  text-align: center;
  line-height: 150px;
}

.back-text h1{
  font-size: 200px;
  color: rgb(161, 209, 169);
}

.back-text h1:nth-child(1){
  margin-top: 60px;
  animation: first 1s forwards;
}

@keyframes first {
  from{
    opacity: 0;
    transform: translateX(-10000px);
  }
}

.back-text h1:nth-child(2){
  animation: second 1.25s forwards;
}
    
@keyframes second {
  from {
    transform: translateX(10000px);
  }
}

.back-text h1:nth-child(3){
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(2, 134, 2);
  animation: third 1.5s forwards;
}
  
@keyframes third {
  from {
    transform: translateX(-10000px);
  }
}

.main img{
  position: absolute;
  filter: saturate(1.5);
  animation: img 0.75s forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

@keyframes img {
  from{
    opacity:0;
    scale: 3;
  }
  to{
    opacity:1;
  }
}

.main h3{
  position: absolute;
  color: rgb(161, 209, 169);
  bottom: 170px;
  font-size: 40px;
  margin-left: 350px;
  animation: img 0.75s forwards;
  animation-delay: 1.5s;
  opacity: 0;
}
  
@keyframes img {
  from {
    opacity: 0;
    scale: 3;
  } 
  to {
    opacity: 1;
  }
}

nav{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 70px;
  animation: nav 0.5s forwards;
  transition: all ease-in 0.2s;
}

@keyframes nav {
  from{
    opacity: 0;
    transform: translateY(-200px)
  }
}

nav h2{
  color: rgb(161, 209, 169);

}

nav .icon i{
  color: rgb(148, 219, 148);
  font-size: 25px;
}

.icon i:hover{
  color: seagreen;
  font-size: 30px;
  transition: all ease-in 0.15s;
  cursor: pointer;
}

footer{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0px 70px;
  padding-bottom: 70px;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  animation: footer 1s backwards;
  animation-delay: 1s;
}
  
@keyframes footer {
  from {
    transform: translateY(200px);
  }
  to {
    transform: translateY(0px);
  }
}

footer p{
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: rgb(161, 209, 169);
}

footer button{
  height: fit-content;
  padding: 10px 30px;
  border-radius: 25px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  color: white;
}

footer button:hover{
  transition: all ease-in 0.15s;
  background-color: rgb(128, 206, 27);
  color: seagreen;
  cursor: pointer;
}