html {
  height: 300%;
  color: white;
 background: url(https://projects.codecraftworks.com/web/4vBqOChoZfD1pbEJgWUu/assets/CoralReef.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
/* selector(tagname) (
  property: value;
  property: value;
}
*/
body {
 
  
}

#wrap {
  flex-flow: wrap;
}

.rounded-box {
  background: linear-gradient(Blue, lightgreen, aqua);
  transition: all 0.3s ease;
  border: 3px solid black;
  text-align: center;
  padding: 3rem;
  border-radius: 20rem;
  margin: 2rem auto;
  width: 60vw;
  box-shadow: 5px 5px 5px Yellow, 5px 5px 5px darkslategray;
 animation-name: gradientAnimation;
  animation: gradientAnimation 5s ease-in-out infinite;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
 

h1 {
  text-decoration: underline orange wavy 3px;
  font-family: "Permanent Marker", seriff;
    font-size: 50px;
  text-shadow: 7px 5px 5px #FFB000;

    
  
}

a {
  color: indigo;
    font-family: Monospace;
  font-size: 20px; 
    flex-direction: cloumn;
}  

h2 {
  font-size: 30px;
    font-family: tahoma;
      text-decoration: underline orange wavy 3px;
  text-shadow: 7px 5px 5px #FFB000;
}

@Keyframes gradientAnimation{
   0% {
        background: linear-gradient(Blue, lightgreen, aqua);
    }
  
  50% {
        background: linear-gradient(aqua, lightgreen, blue);
    
  }
  

100% {
        background: linear-gradient(blue, lightgreen, aqua,);
    }
}
 

@media (min-width: 700px) {
  .container {
    max-width: 10vw;
    Justify-content: Center;
  }
}

@media screen and (max-width: 700px) {
  .topnav a {
    float: none;
    width: 100%;
    padding: 200%;
    max-width: 40vw;
    Justify-content: Center;
  }
}