* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(45deg, #ffdd00, #ffd23f, #3bceac, #FFA3AF);
  background-size: 300% 300%;
  animation: color-anim 12s infinite linear alternate;
  -webkit-animation: color-anim 12s infinite linear alternate;
}
@keyframes color-anim {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

#mg {
  text-align: center;
  display: flex;
  margin-top: 15%;
  justify-content: center;
  align-items: center;
}


#content1 {
  color: #436436;
 font-family: 'Barlow Semi Condensed', sans-serif;
 font-size: 1.4rem;
  line-height: 1.8rem;
  text-align:center;
    justify-content: center;
  align-items: center;
  margin-left:25%;
margin-right:25%;
margin-top:5%;
  -webkit-animation: fade 500ms;
  animation: fade 500ms;
  
    
}
#content2 {
  color: #436436;
 font-family: 'Barlow Semi Condensed', sans-serif;
 font-size: 1.4rem;
  line-height: 1.8rem;
  text-align:center;
    justify-content: center;
  align-items: center;
  margin-left:25%;
margin-right:25%;
margin-top:5%;

}


h1 {
  color: #436436;
  font-size: 8rem;
  text-transform: uppercase;
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-style: italic;

}

#content1 p {
margin-top:10px;

}
a {
  display:inline-block;
  text-decoration:none;
  font-weight: 400;
  color: #436436;
  position:relative;
  transition:all 0.3s;
}
a:hover {
  color:#fff;
}
a::before {
  content:" ";
  display:block;
  position:absolute;
  border-bottom:solid 3px #fff;
  bottom:0px;
  width:0%;
  left:0%;
  margin:0 auto;
  transition:all 0.3s;
  z-index:-1;
}
a:hover::before {
  border-bottom:solid 3px #fff;
  width:100%;
  left:0%;
}