main {
    float:center;
    padding: 5px;
     background-color:#31493f ;
    height: 1000px;
  }
  
  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:#31493f ;  
      font-size: 2.5em; 
      text-align: center; 
      }
      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;
      }
      .jpg1
    {
      margin-left: 1%;
    margin-top: 1%;
    }
    .jpg2
    {
      margin-left: 33%;
      margin-top: 2%;
    }
    .jpg3
    {
      margin-left: 75%;
      margin-top: 15%;
    }
    .jpg4
    {
      margin-left: 1%;
margin-top: 10%;
    } 
    .jpg5
    {
      margin-left: 45%;
margin-top: 10%;
    } 
    .jpg7
    {
      margin-left: 50%;
margin-top: 10%;
    } 
    .jpg8
    {
      margin-left: 1%;
margin-top: 135%;
    } 
    .jpg9
    {
      margin-left: 54%;
margin-top: 135%;
    } 
  
    
      
      h1 {
      color:#31493f ;
      text-align:center;
      font-family: "gelica", sans-serif;
      font-style: normal;
      font-weight: 700;
      font-size: 3em;
      font-style: normal;
      margin-top:30px;
      }
      h2 {
      color:#97c3958a;
      font-size: 2em;
      text-align: left;
      }
    
    h4 {
    color:#97c3958a;
    font-size: 2em;
    text-align: left;
    }
      p {
      color:#97c3958a ;
      font-family:  "gelica", sans-serif;
      font-weight: 400;
      font-size: 1.6em;
      line-height: 30px;
      letter-spacing: 2px;
      font-style: normal;
      }
     
      
      a:link {
  
        text-decoration: none;
      
      
      }
      a:link {
        font-family: "gelica", sans-serif;
        font-size: 1em;
        font-weight: 400;
        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;
            margin: 1px;
            float: inline-end;
            font-size: 1em;
            background-color:#31493f ;
            border-radius: 25px;
            padding: 1em;
            }
            img{
                float: left;
               
            }
            .words {
              position: relative;
              animation: move-words 20s linear infinite;
              margin: 0;
            }
            @keyframes move-words {
              0% {
                left: 100%;
              }
              100% {
                left: -100%;
              }
            }