*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media screen and (min-width: 800px) {
  .nav-center {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 1.5rem;
  }
  .nav-header {
    padding: 0;
  }
  .nav-toggle {
    display: none;
  } }
.dia{
  width: 15px;
  height: 45px;
  opacity: 0.5;
  border-radius: 50%;

}
.quotes {display: none;}


           
 /* body - This might help the backend to get cleaned up as well */ 
 body {
    background: rgb(141, 132, 132);
    font-size: 0.875rem;
    background: rgb(0, 6, 14);
  }
    
  @media screen and (min-width: 800px) {
    .nav-center {
      max-width: 1170px;
      display: flex;
      align-items: center;
    }
    
    .nav-toggle {
      display: none;
    } }

  nav {
    background: rgb(62, 89, 115);
    box-shadow:black;
    
  }

 
  nav:hover{
    background-color: transparent ;
    transition-duration: 5s;
  }
  
  

  .links a:hover {
    color: var(--clr-primary-5);
    background: transparent;
    transition-duration: 5s;

  }
 

/* //This  */
  
  .links {
    overflow: hidden;
    transition: var(--transition);
    height: auto;
    display: flex;
    padding-right: 40px;
  }
  .links a {
    color: var(--clr-grey-3);
    font-size: 1.5rem;
    letter-spacing: var(--spacing);
    display: block;
    padding-left: 1rem;
    padding-right: 80px;
    transition: var(--transition);
    color: white;
  }
  a {
    text-decoration: none;
  }
  ul {
    list-style-type: none;
  }
  ul.nav a:hover { 
background-color: transparent !important; 
color:#88bce1 !important;
font-weight: bold;
transition-duration: 5s;

}


body {
  text-align: center;
  }
  .dia{
    width: 15px;
    height: 45px;
    opacity: 0.5;
    border-radius: 50%;
  }
  .quotes {
    display: none;
  }
  .containers{
    color: #4c88b2;
     margin-top: 120px;
    }
    .reset{
      color: #4c88b2;
       margin-top: 80px;
      }
/* ---------------------from here--Stars--------------------------------------------------------- */
  /* ----------------------------ONE------------------------------------------------------ */

  #one {
      font-size: 20px;
      width: 350px;
      height: 10px;
      background: transparent;
      position: relative;

      animation-name: example1;
      animation-duration: 117s;  
      animation-fill-mode: backwards;
      border-radius: 50%;
      border-color: transparent;
/* //spacing good */
      left: -120px;
      animation-iteration-count: infinite;
      color: white;
  
    }
    
    @keyframes example1 {
      from {top: -330px;}
      
      to {top: 600px; 
        color: transparent;
      }
    }
  
    /* ----------------------------TWO------------------------------------------------------ */
    #two {
      font-size: 20px;
      width: 350px;
      height: 10px;
      background: transparent;
      position: relative;

      animation-name: example2;
      animation-duration: 70s;  
      animation-fill-mode: backwards;
      border-radius: 50%;
      border-color: transparent;
      left: -220px;
     animation-iteration-count: infinite;
      color: white;
  
    }
    
    @keyframes example2 {
      from {top: -530px;}
      
      to {top: 400px;        
         color: transparent;
      }
    }
      /* ----------------------------THREE------------------------------------------------------ */
      #three {
        font-size: 20px;
        width: 350px;
        height: 10px;
          background: transparent;
          position: relative;
          animation-name: example3;
          animation-duration: 110s;  
  
          animation-fill-mode: forwards;
          border-radius: 50%;
          border-color: transparent;
          animation-iteration-count: infinite;
          color: white;
          left: -220px;
        }
       
        
        @keyframes example3 {
          from {top: -530px;}
          to {top: 300px; 
            color: transparent;}
        }
        /* ----------------------------FOUR------------------------------------------------------ */
        #four {
          font-size: 20px;
          width: 350px;
          height: 10px;
          background: transparent;
          position: relative;
          animation-name: example4;
          animation-duration: 90s;      
  
          animation-fill-mode: forwards;
          border-radius: 50%;
          border-color: transparent;
          animation-iteration-count: infinite;
          color: white;

          left: 80px;
        }
     
        
        @keyframes example4 {
          from {top: -230px;}
          to {
            top: 400px; 
            color: transparent;
          }
        }
          /* ----------------------------FIVE------------------------------------------------------ */
          #five {
            font-size: 20px;
              width: 350px;
             height: 10px;
             background: transparent;
              position: relative;
              animation-name: example5;
              animation-duration: 60s;  
  
              animation-fill-mode: forwards;
              border-radius: 50%;
              border-color: transparent;
              animation-iteration-count: infinite;
              color: white;

              left: 500px;
            }
        
            
            @keyframes example5{
              from {top: -230px;}
              to {top: 400px; 
                color: transparent;}
            }
            /* ----------------------------SIX------------------------------------------------------ */
            #six {
              font-size: 20px;
              width: 350px;
              height: 10px;
              background: transparent;
              position: relative;
              animation-name: example6;
              animation-duration: 80s;  
              animation-fill-mode: backwards;
              border-radius: 50%;
              border-color: transparent;

              left: -120px;
              animation-iteration-count: infinite;
              color:white;
            }
                    
            @keyframes example6 {
              from {top: -830px;}
              to {top: 400px;
              color: transparent;
              }
            }
            /* -------------------------------7------------------------------ */

            #seven {
                background: transparent;
                position: relative;
                animation-name: example7;
                animation-duration: 10s;      
                animation-fill-mode: forwards;
                border-radius: 50%;
                border-color: transparent;
                animation-iteration-count: infinite;
                color: white;  
                left: -300px;
              }                         
              @keyframes example7{
                from {top: -630px;
                  width: 300;}
                to {top: 400px;                   
                  color: transparent;}
              }

              /* 8 */

              #eight {
                background: transparent;
                position: relative;
                animation-name: example8;
                animation-duration: 30s;      
                animation-fill-mode: forwards;
                border-radius: 50%;
                border-color: transparent;
                animation-iteration-count: infinite;
                color: white;  
                left: -500px;
              }                         
              @keyframes example8{
                from {top: -430px;
                  width: 300;}
                to {top: 200px;                   
                  color: transparent;}
              }

              /* 9----------- */

              #nine {
                background: transparent;
                position: relative;
                animation-name: example9;
                animation-duration: 30s;      
                animation-fill-mode: forwards;
                border-radius: 50%;
                border-color: transparent;
                animation-iteration-count: infinite;
                color: white;  
                left: -400px;
              }                         
              @keyframes example9{
                from {top: -430px;
                  width: 300;}
                to {top: 400px;                   
                  color: transparent;}
              }

 /* 9----------- */

              #ten {
                background: transparent;
                position: relative;
                animation-name: example10;
                animation-duration: 10s;      
                animation-fill-mode: forwards;
                border-radius: 50%;
                border-color: transparent;
                animation-iteration-count: infinite;
                color: white;  
                left: 10px;
              }                         
              @keyframes example10{
                from {top: -430px;
                  width: 300;}
                to {top: 800px;                   
                  color: transparent;}
              }
              #elleven {
                background: transparent;
                position: relative;
                animation-name: example10;
                animation-duration: 40s;      
                animation-fill-mode: forwards;
                border-radius: 50%;
                border-color: transparent;
                animation-iteration-count: infinite;
                color: white;  
                left: 10px;
              }                         
              @keyframes example10{
                from {top: -430px;
                  width: 300;}
                to {top: 400px;                   
                  color: transparent;}
              }
             
              @media screen and (min-width: 800px) {
                .nav-center {
                  max-width: 1170px;
                  margin: 0 auto;
                  display: flex;
                  align-items: center;
                }
             
                .nav-toggle {
                  display: none;
                } }
                
  .links a:hover {
    color: var(--clr-primary-5);
    background: transparent;
    transition-duration: 5s;

  }