* {
    margin: 0;
    color: #172121;
    animation: load 1000ms ease-out;
    font-family: "quicksand", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: #EBCFB2;
    overflow-x: hidden;
}

.navButtonClass {
    width: 5vh;
    height: 5vh;
    border: solid black 0.4vw;
    border-radius: 100%;
    padding: 2vh;

}

.navButtonClass > a {
    width: 100%;
    height: 100%;
}
.navButtonClass > a > img{
    width: 100%;
    height: 100%;
}

#navigation {
    position: fixed;
    right: 2vh;
    display: grid;
    place-items: center;
    width: 10vh;
    height: 10vh;
    transition: 0ms;
    z-index: 100;
    top: 0;
}

#navigation:hover {
    height: 30vh;
    width: 40vh;
    right: -13.1vh;
    top: -10vh;
}

#navButton {
    position: fixed;
    z-index: 10;
    background-color: #172121;
    width: 5vh;
    height: 5vh;
}

#navButton > img {
    width: 100%;
    height: 100%;
}

#nav1 {
    position: fixed;
    z-index: 9;
    transition: transform 800ms;
    background-color: #172121;
}
#nav1 > a {
    position: relative;
    left: 15%;
}
#nav1 > a > img {
    width: 70%;
}

#navigation:hover > #nav1 {
    transform: rotate(-360deg) translate(-12vh) rotate(360deg);
}

#nav2 {
    position: fixed;
    z-index: 8;
    transition: transform 800ms;
    background-color: #172121;
}

#navigation:hover > #nav2 {
    transform: rotate(-360deg) translate(-9vh, 10vh) rotate(360deg);
}

#nav3 {
    position: fixed;
    z-index: 7;
    transition: transform 800ms;
    background-color: #172121;
}

#navigation:hover > #nav3 {
    transform: rotate(-360deg) translate(2vh, 12vh) rotate(360deg);
}

.sideBars {
    display: none;
}



#topBar {
    width: 100vw;
    height: 10vh;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 90;
}









#headerBox {
    width: 100vw;
    height: 20vw;
    display: grid;
    place-items: center;
    position: absolute;
    top: 10vh;
}

header {
    font-size: 10vw;
    font-family: "decoy", sans-serif;
    font-weight: 700;
    font-style: normal;

}

#text1 {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 3vh;
    padding-bottom: 3vh;
    position: absolute;
    top: 20vh;
    font-size: 5vw;

}







#h2Box {
    width: 100vw;
    height: 20vw;
    display: grid;
    place-items: center;

    position: absolute;
    top: 150vh;
}

h2 {
    font-size: 10vw;
    font-family: "decoy", sans-serif;
    font-weight: 700;
    font-style: normal;
}

#text2 {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 3vh;
    padding-bottom: 3vh;
    position: absolute;
    top: 160vh;
    font-size: 5vw;

}








#solarSystem {
    width: 100vw;
    height: 210vh;
    display: grid;
    place-items: center;
}

.planet {
    width: 20vw;
    height: 20vw;
    border-radius: 100%;
    background-color: #4281A4;
    position: absolute;
    display: grid;
    place-items: center;
    animation: orbit 30s ease-in-out infinite;
    z-index: 0;
    opacity: 0;
    
}

.planet > p {
    color: white;
}

#sun {
    width: 100vw;
    height: 100vw;
    border-radius: 100%;
    background-color: #85C7De;
    display: grid;
    place-items: center;
    z-index: 1;
}

#planet2 {
    animation-delay: 2s;
}

#planet3 {
    animation-delay: 4s;
}

#planet4 {
    animation-delay: 6s;
}

#planet5 {
    animation-delay: 8s;
}

#planet6 {
    animation-delay: 10s;
}

#planet7 {
    animation-delay: 12s;
}

#planet8 {
    animation-delay: 14s;
}

#planet9 {
    animation-delay: 16s;
}

#planet10 {
    animation-delay: 18s;
}

#planet11 {
    animation-delay: 20s;
}

#planet12 {
    animation-delay: 22s;
}

#planet13 {
    animation-delay: 24s;
}

#planet14 {
    animation-delay: 26s;
}

#planet15 {
    animation-delay: 28s;
}

#planet16 {
    animation-delay: 30s;
    display: none;
}






@keyframes orbit {
    from {
      transform: rotate(0deg) translateX(-65vw) rotate(0deg);
      opacity: 1;
    }
    to {
      transform: rotate(360deg) translateX(-65vw) rotate(-360deg);
      opacity: 1;
    }
  }
@keyframes load {
    from {
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}




#footerBox {
    width: 100vw;
    height: 10vh;
    padding: 5vw;
    background-color: #A1674A;
    position: absolute;
}
#footerBox > ul > li {
    color: white;
}
#footerBox > ul {
    list-style: none;
    color: white;
}


@media only screen and (min-width:430px) {

    #solarSystem {
        width: 100vw;
        height: 210vh;
        display: grid;
        place-items: center;
        position: absolute;
        top: 12vh;
    }



    #text1 {
        position: absolute;
        top: 20vh;
        font-size: 4vw;
    }


    #h2Box {
        width: 100vw;
        height: 20vw;
        display: grid;
        place-items: center;
    
        position: absolute;
        top: 170vh;
    }

    #text2 {
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 3vh;
        padding-bottom: 3vh;
        position: absolute;
        top: 180vh;
        font-size: 4vw;
    
    }
    #footerBox {
        top: 210vh;
    }

}

@media only screen and (min-width:510px) {

    #solarSystem {
        width: 100vw;
        height: 220vh;
        display: grid;
        place-items: center;
        position: absolute;
        top: 12vh;
    }
    #h2Box {
        width: 100vw;
        height: 20vw;
        display: grid;
        place-items: center;
    
        position: absolute;
        top: 180vh;
    }

    #text2 {
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 3vh;
        padding-bottom: 3vh;
        position: absolute;
        top: 190vh;
        font-size: 3vw;
    
    }
    #footerBox {
        top: 215vh;
    }
}
@media only screen and (min-width:580px) {

    #text1 {
        position: absolute;
        top: 20vh;
        font-size: 3vw;
    
    }


    #h2Box {
        width: 100vw;
        height: 20vw;
        display: grid;
        place-items: center;
    
        position: absolute;
        top: 190vh;
    }

    #text2 {
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 3vh;
        padding-bottom: 3vh;
        position: absolute;
        top: 200vh;
        font-size: 3vw;
    
    }
    #footerBox {
        top: 225vh;
    }


}
@media only screen and (min-width:620px) {



    #headerBox {
        width: 100vw;
        height: 20vw;
        display: grid;
        place-items: center;
    
        position: absolute;
        top: 8vh;
    }



    #text1 {
        position: absolute;
        top: 18vh;
        font-size: 3vw;
    
    }


    #h2Box {
        width: 100vw;
        height: 20vw;
        display: grid;
        place-items: center;
    
        position: absolute;
        top: 190vh;
    }

    #text2 {
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 3vh;
        padding-bottom: 3vh;
        position: absolute;
        top: 200vh;
        font-size: 3vw;
    
    }
    #footerBox {
        top: 225vh;
    }
    header {
        font-size: 6vw;
    
    }
    h2 {
        font-size: 6vw;
    
    }
}

@media only screen and (min-width:700px) {

    #solarSystem {
        width: 100vw;
        height: 230vh;
        display: grid;
        place-items: center;
        position: absolute;
        top: 12vh;
    }
    #h2Box {
        width: 100vw;
        height: 20vw;
        display: grid;
        place-items: center;
    
        position: absolute;
        top: 200vh;
    }

    #text2 {
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 3vh;
        padding-bottom: 3vh;
        position: absolute;
        top: 210vh;
        font-size: 3vw;
    
    }
    #footerBox {
        top: 235vh;
    }
}

@media only screen and (min-width:760px) {

    body {
        overflow-y: hidden;
    }

    #solarSystem {
        width: 100vw;
        height: 100vh;
        display: block;
    }
    
    .planet {
        width: 12vw;
        height: 12vw;
        border-radius: 100%;
        background-color: #4281A4;
        position: absolute;
        display: grid;
        place-items: center;
        animation: orbit 30s ease-in-out infinite;
        z-index: 0;
        opacity: 0;
        
    }
    
    .planet {
        color: white;
    }
    
    #sun {
        width: 50vw;
        height: 50vw;
        border-radius: 100%;
        background-color: #85C7De;
        display: grid;
        place-items: center;
        z-index: 1;
        position: absolute;
        left: 60vw;
        top: 55vh;
    }
    @keyframes orbit {
        from {
          transform: rotate(0deg) translateY(35vw) rotate(0deg);
          opacity: 1;
        }
        to {
          transform: rotate(360deg) translateY(35vw) rotate(-360deg);
          opacity: 1;
        }
      }



      #headerBox {
        width: 50vw;
        height: 20vh;
        display: grid;
        place-items: center;
        position: absolute;
        top: 8vh;
    }
    
    header {
        font-size: 5vh;
    
    }
    
    #text1 {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 5vw;
        padding-right: 5vw;
        width: 40vw;
        position: absolute;
        top: 25vh;
        font-size: 2.5vh;
    
    }
    
    #h2Box {
        width: 50vw;
        height: 20vh;
        display: grid;
        place-items: center;
        position: absolute;
        top: 8vh;
        left: 50vw;
    }
    
    h2 {
        font-size: 5vh;
    
    }
    
    #text2 {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 5vw;
        padding-right: 5vw;
        width: 40vw;
        position: absolute;
        top: 25vh;
        font-size: 2.5vh;
        left: 50vw;
    }

    #footerBox {
        top: 85vh;
        height: 12vh;
        padding: 0;
        padding-top: 2vh;
        padding-bottom: 2vh;
    }
}
@media only screen and (min-width:1080px) {
    body {
        background-color: white;
    }
    #navigation {
        left: 75vw;
    }
    #navigation:hover {
        height: 30vh;
        width: 40vw;
        left: 57.9vw;
        top: -10vh;
    }
    #backGround {
        display: block;
        background-color: #EBCFB2;
        z-index: -2;
        width: 70vw;
        height: 100vh;
        position: absolute;
        left: 15vw;
    }
    .sideBars   {
        display: block;
        background-color: #172121;
        z-index: 200;
        width: 10vw;
        height: 100vh;
        position: absolute;
    }
    #leftBar {
        left: 0;
    }
    #rightBar {
        right: 0;
    }



    #solarSystem {
        width: 100vw;
        height: 100vh;
        display: block;
    }
    
    .planet {
        width: 8vw;
        height: 8vw;
        border-radius: 100%;
        background-color: #4281A4;
        position: absolute;
        display: grid;
        place-items: center;
        animation: orbit 32s linear infinite;
        z-index: 0;
        opacity: 0;
        
    }

    
    #sun {
        width: 30vw;
        height: 30vw;
        border-radius: 100%;
        background-color: #85C7De;
        display: grid;
        place-items: center;
        z-index: 1;
        position: absolute;
        left: 62vw;
        top: 25vh;
    }
    @keyframes orbit {
        from {
          transform: rotate(0deg) translateX(22vw) rotate(0deg);
          opacity: 1;
        }
        to {
          transform: rotate(360deg) translateX(22vw) rotate(-360deg);
          opacity: 1;
        }
      }

      #planet1 {
        display: none;
      }
      #planet3 {
        display: none;
      }
      #planet5 {
        display: none;
      }
      #planet7 {
        display: none;
      }
      #planet9 {
        display: none;
      }
      #planet11 {
        display: none;
      }
      #planet13 {
        display: none;
      }
      #planet15 {
        display: none;
      }
      #planet16 {
        display: grid;
        place-items: center;
      }

      #headerBox {
        width: 50vw;
        height: 5vw;
        display: block;
        position: absolute;
        top: 14vh;
        left: 18vw;

    }
    
    header {
        font-size: 5vh;
    
    }
    
    #text1 {
        padding: 0;
        width: 32vw;
        position: absolute;
        top: 21vh;
        font-size: 2.5vh;
        left: 18vw;

    
    }
    
    #h2Box {
        width: 50vw;
        height: 5vw;
        display: block;
        position: absolute;
        top: 51vh;
        left: 18vw;
    }
    
    h2 {
        font-size: 5vh;
    
    }
    
    #text2 {
        padding: 0;
        width: 32vw;
        position: absolute;
        top: 60vh;
        font-size: 2.5vh;
        left: 18vw;

    }

    #footerBox {
        top: 85vh;
        height: 11vh;
        padding: 0;
        padding-top: 2vh;
        padding-bottom: 2vh;
    }
    #footerBox > ul {
        position: absolute;
        left: 13vw;
    }
}