nav {
  margin: 27px auto 0;
  color:#97c3958a ;
  position: relative;
  width: 590px;
  height: 50px;
  background-color:#31493f ;
  border-radius: 8px;
  font-size: 1em;
}
nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
  color:#97c3958a ;
}
nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  border-radius: 8px;
}
a:nth-child(1) {
  width: 100px;
}
a:nth-child(2) {
  width: 150px;
}
a:nth-child(3) {
  width: 130px;
}
a:nth-child(4) {
  width: 85px;
}


nav .start-home, a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;

  background-color:#97c3958a; 
  
}
nav .start-about, a:nth-child(2):hover~.animation {
  width: 150px;
  left: 100px;
  background-color: #97c3958a;
}
nav .start-blog, a:nth-child(3):hover~.animation {
  width: 130px;
  left: 260px;
  background-color:#97c3958a ;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
  width: 95px;
  left: 390px;
  background-color:#97c3958a ;
}
nav .start-contact, a:nth-child(5):hover~.animation {
  width: 120px;
  left: 470px;
  
}

  
  h3{
  
            color: #473520; 
      font-size: 2.5em;  
      }
      body {
        background-image: url('webpageimages/waxing.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
      margin: 0 20%;
      font-family: "gelica", sans-serif;
      }
      
      h1 {
      
      text-align:center;
      font-family:"gelica", sans-serif; 
      font-weight: 700;
      font-size: 3em;
      font-style: normal;
      color: #31493f;
      margin-top:30px;
      }
      h2 {
      color:#97c3958a;
      font-size: 2.5em;
      text-align: center;
      }
      p {
      color:#97c3958a;
      font-family:  "gelica", sans-serif;
      font-weight: 400;
      font-size: 2em;
      font-style: normal;
      }
      
       
      a:link {
  
        text-decoration: none;
      
      
      }
      a:link {
        font-family: "gelica", sans-serif;
        font-size: 1em;
        text-decoration: none;
        color:#97c3958a;
      }
      
      a:visited {
        text-decoration: none;
        color:#97c3958a;
      }
      
      a:hover {
        text-decoration: none;
        color: #19f161; 
      }
      
      a:active {
        text-decoration: none; 
      }
        footer {
          font-family:  "punto", sans-serif;
          font-weight: 400;
          font-size: 1.5em;
          position: fixed;
          letter-spacing: 2px;
          left: 0;
          bottom: 0;
          width: 100%;
          background-color: #31493f;
          color:#97c3958a ;
          padding: 1em; /* All four side the same */
          }
          .square1 {
            width: 1000px;
            height: 500px;
            shape-margin: 5px;
          
            font-size: 1.5em;
            background-color:#31493f ;
            
            justify-content: center;
            border-radius: 25px;
            padding: 1em;
           }
          
          .words {
            position: relative;
            animation: move-words 20s linear infinite;
            margin: 0;
          }
          @keyframes move-words {
            0% {
              left: 100%;
            }
            100% {
              left: -100%;
            }
          }