*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --backgroundColor:cyan;
    --colorShadeA:red;/*bottom one*/
    --colorShadeB:rgb(225,104,0);/**/
    --colorShadeC: rgb(225,104,0); /**/
    --colorShadeD: rgb(158, 52, 3);  /**/
    --colorShadeE: rgb(253,82,0);    /**/
  }

html {
    scroll-behavior: smooth;
  }

body{
    background-image: url(sapceWebpbutjpg.png);
    overflow-x: hidden;    
}

/* .line{
    width: 10px;
    height: 700%;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    background-image: linear-gradient(red, yellow);
    z-index: 5;
} */

#spaceCraft{
    position: fixed;  
    left: 50%; 
    top: 50%; 
    width: 70px; 
    height: 70px;
    /* background-color: green; */
    margin-top: -35px;
    margin-left: -35px;
    z-index: 2;
}

#spaceCraft::after{
    opacity: 0.2;
    background-color: orange;
}

.lines{
    height: 700%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.text{
    width: 350px;
    height: 200px;
    top: 35%;
    color: transparent;
    position: relative;
    /* border: 2px solid lightblue; */
    border-radius: 20px;
    font-weight: 800;
left:-100px;

}

#frame1{
    display: flex;
}

p{
    font-size: 20px;
    text-align: left;
    color: white;

}

.fax{
    float: right;
    position: relative;
    top: 75%;
    right: 2%;
    width: 30%;
}

.right{
    right: 10%;
    float: right;
}

.left{
    left:10%;
    float: left;
}

#frames{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#frames > *{
    height: 100vh
}

.next{
    position: relative;
    background-color: lightblue;
    left: 40%;
    margin-left: -25px;
    width: 50px;
    height: 30px;
    padding: 5px;
    border-radius: 10px;
    top: -10px;
}

#spaceCraft img{
    position: fixed;
    left: 50%; 
    top: 50%; 
    margin-left: -250px;
    margin-top: -250px;
}

.previous{
    position: absolute;
    background-color: lightblue;
    left: 25%;
    width: 140px;
    height: 30px;
    padding: 5px;
    border-radius: 10px;
    top: 90%;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

.startButton{
    position: relative;
    left: 22%;  
    top: -11%;
}

#earth{
    z-index: 3;
    /* margin-top: 100px; */
}

#rocket{
    width: 500px;
    height: 500px;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -250px;
}

#rocket button{
    color: black;
    font-size: 10px;
}

#moon{
    position: relative;
    right: -30%;
    bottom:  2%;
}

#sun{
    position: relative;
    left: -24%;
    top: -24%;
}

#sunBorder{
    width: 600px;
    height: 600px;
    border-radius: 50%;
    position: relative;
    left: 50%;
    top: 50%;
    margin-top: -350px;
    margin-left: -350px;

}


.noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
          -webkit-tap-highlight-color: transparent;
  }
  
  .big-button {
      width: 150px;
      height: 50px;
      cursor: pointer;
      background: #333;
      margin: 10px;
      border: none;
      border-radius: 10px;
      box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #444, inset -5px -5px 10px #222;
      color: white;
      font-size: 16px;
  }
  
  .big-button:hover {
      box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #222, inset -5px -5px 10px #444;
      font-size: 15px;
      transition: 500ms;
  }
  
  .big-button:focus {
      outline: none;
  }
  
  .red:hover {
      color: #f07171;
      text-shadow: 0px 0px 10px #f07171;
  }
  
  .green:hover {
          color: #93f071;
      text-shadow: 0px 0px 10px #93f071;
  }
  
  .blue:hover {
      color: #71b7f0;
      text-shadow: 0px 0px 10px #71b7f0;
  }
  
  .purple:hover {
      color: #b971f0;
      text-shadow: 0px 0px 10px #b971f0;
  }
#sunBorder:hover{
    box-shadow:
    0 0 60px 30px rgb(240, 39, 13), 
    0 0 140px 90px rgba(192, 95, 5, 0.938), 
    0 0 100px 60px rgb(235, 182, 10); 
}

#sunDiv{
    width: 900px;
    height: 900px;
}

#frame1 .text{
z-index: 4;
}

.text h3{
    color: white;
    text-align: center;
    margin-top: 30px;
}

.text input{
    color: white;
}

.white{
    color: white;
}

h2{
    color: white;
    /* text-align: center; */
}

ul{
    color: white;
    margin-left: 50px;
}




label{
    font-size: 15px;
    margin-bottom: 10px;;
}

.margin-top{
    margin-top: 10px;
}
#quiz3h2{
    font-size: 25px;
}
.answers{
    display: flex;
    justify-content: space-around;
}

video{
    border-radius: 10px;;
    width: 350px;
    height: 200px;
    position: absolute;
    right: 4%;
}


li{
    margin-top: 20px;
    font-size: 20px;

}


h2{
    margin-top: 10px;
    font-size: 25px;


}

#quiz1h3{
    text-align: left;
    margin-bottom: 20px;;
}


#quiz2h3{
    margin-bottom: 20px;;

    text-align: left;
}