/* removes white space around */
*{

 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 

}

body.body1 {
    
    font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/space_bg.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
 
    
}
body.body1no{
   font-family: 'Google Sans', sans;
    font-size: 20px;
    background-image: url(../img/page1noo.avif);
        background-position: unset; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
       
}

.gif-motion{
    width: 995px;
    padding-left: 406px;
    padding-top: 178px;
    padding-bottom: 11px;
    
    filter: drop-shadow(0 0 20px #02025d);
}
.gif-motion:hover {
  transform: scale(1.1);
  transition: 0.3s;
}
body.body1yes {
    
    font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/bg%20yes1.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
      
}

body.bodypage3tf {
   font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/bright%20purple.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;  
    
}
.planet{
text-align: center;
margin-top: -263px;
}

body.body2yes {
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/bg%20yes1.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */  
}

body.bodypage5 {
    font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/darker%20pp.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
    
}

body.bodypage9 {
  
   font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/almostblack%20pp.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
}

body.bodypage11 {
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/black%20pp.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  
}

body.bodypage13 {
  font-family: 'Google Sans', sans;
    font-size: 20px;
    background-color: #040404; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  
}

body.bodypage3gal {
 font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/bluestar.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;  
}

body.bodypage4{
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/pagg4.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;  
  
}

body.bodypage6 {
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/rock.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  
}

body.bodypage8 {
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/rock2.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  
}

body.bodypage15 {
   font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/home.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  
}

body.bodypage17 {
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/home8.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  
}

body.bodypage10 {
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/bg%20yes1.jpg);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  
}

body.bodypage12 {
 font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/page142.png);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;  
  
}

body.bodypage14{
font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/blackhole2.png);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;   
  
}

body.bodypage16 {
  font-family: 'Google Sans', sans;
    font-size: 20px;
   background-image: url(../img/end1.png);
    background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;   
  
  
}

.rock1 {
  width: 420px; 
  transition: transform 0.5s cubic-bezier(0.75, 0, 0.25, 1);
  cursor: pointer;
  margin-left: 550px;
  
}

.rock1.shrunk {
  transform: scale(0.3);
}


.galaxyborn{
   width: 560px;       
  height: 557px;     
  overflow-y: scroll; 
  border: 2px solid #ccc;
  margin-left: 470px;
  margin-top: -33px;
}
.scrollgalaxy {
  width: 100%;        
  height: auto;       
  display: block; 
   
}


.alienbox img {
  width: 190px;
  height: 190px;
  position: relative;
  
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  margin-left: 50px;
}


@keyframes myAnimation {
  0%   { background-image: url('img/ali%200.jpg'); left:10px; top:10px; }
  25%  { background-image: url('img/ali%2025.jpg'); left:200px; top:10px; }
  50%  { background-image: url('img/ali%2050.jpg'); left:200px; top:200px; }
  75%  { background-image: url('img/ali75.jpg'); left:10px; top:200px; }
  100% { background-image: url('img/ali100.jpg'); left:10px; top:10px; }
}


.star {
  width: 74px; 
  height: 74px;
  opacity: 23px;
  transition: transform 0.5s ease-in-out; 
  cursor: pointer;
 margin-left: 1050px;
  margin-top: 204px;
}

.star:hover {
  transform: scale(3.9); 
}

.proud {
  width: 20px; 
  height: 20px;
  opacity: 23px;
  transition: transform 0.5s ease-in-out; 
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 40px;
margin-left: 650px;
  text-align: center;
}

.proud:hover {
  transform: scale(15.0); 
}

.rotation{
   
    position: absolute;
    top: 72%;
    left: 80%;
    width: 345px;
    height: 345px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    transform: translate(-51%, -50%);
    animation: spin 40s linear infinite;
    opacity: 0.8;
    
}
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.rotation2{
   position: absolute;
    top: 21%;
    left: 20%;
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    transform: translate(-10%, -10%);
    animation: spin 10s linear infinite;
    opacity: 0.8;
  
}
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}  
.rotation1{
  position: absolute;
    top: 70%;
    left: 35%;
    width: 230px;
    height: 230px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    transform: translate(-10%, -10%);
    animation: spin 10s linear infinite;
    opacity: 0.8;
  
}
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}    

.robot
{
   width: 300px;      
  height: 300px;     
  border-radius: 50%;
  object-fit: cover;
  margin-top: -171px; 
  margin-left: 30px;
 
}


.robot2
{
   width: 150px;      
  height: 150px;     
  border-radius: 50%;
  object-fit: cover; 
    margin-top: -253px;
  margin-left: 1124px;
}
.robot3
{
   width: 150px;      
  height: 150px;     
  border-radius: 50%;
  object-fit: cover;
  margin-top: -343px;
  margin-bottom: 163px;
  margin-left: 124px;
  margin-right: 57px;

}
.robot4
{
   width: 400px;      
  height: 400px;     
  border-radius: 50%;
  object-fit: cover;
  margin-left: 138px;
  margin-top: -53px;

  
}
.robot5
{
   width: 250px;      
  height: 250px;     
  border-radius: 50%;
  object-fit: cover;
  margin-left: 118px;
}



.headline
{
   color: #cccccc;
    background-color: #006db2;
     text-align-last: center;
    margin-bottom: 129px;
   
}




h2.h2page3 {
  position: float;    
font-size: 31px;
width: 381px;
height: 163px;
background-color: rgba(215, 177, 253, 0.5); /* black with 50% opacity */
display: flex;
 
align-items: center;
border-radius: 20px;
margin-left: 581px;
padding-left: 26px;  
    padding-right: 20px;
  
}
h2.h2yes{
position: float;    
font-size: 31px;
width: 381px;
height: 163px;
background-color: rgba(171, 169, 173, 0.5); /* black with 50% opacity */
display: flex;
 
align-items: center;
border-radius: 20px;
margin-left: 581px;
 padding-left: 26px;  
}
#text-disappear.hide {
    opacity: 0;
    pointer-events: none;
}
.mySlides {
  display: none;         
  width: 250px;          
  height: 450px;       
  object-fit: cover;     
  border-radius: 10px;   
}

h2.h2page5 {
  font-size: 30px;
    color: #cccccc;
width: 436px;
height: 188px;
background-color: rgba(171, 169, 173, 0.5); /* black with 50% opacity */
display: flex;
 
align-items: center;
border-radius: 20px;
margin-left: 561px;
 padding-left: 21px;    
}

h2.h2page11 {
  font-size: 45px;
    color: #fffbfb;
width: 720px;
height: 237px;
background-color: #ffffff; 
display: flex;
align-items: center;
border-radius: 20px;
margin-left: 390px;
padding-left: 59px; 
padding-right: -20px;
transition: background-color 450ms linear, color 450ms linear;
 
}

h2.h2page13 {
  
  font-size: 40px;
    color: #371111;
width: 1147px;
height: 349px;
background-color: #acacac; 
display: flex;
align-items: center;
border-radius: 20px;
margin-left: 262px;
padding-left: 37px; 
padding-right: -20px;

}

h2.h2page8 {
  font-size: 30px;
    color: #cccccc;
width: 409px;
height: 102px;
background-color: rgba(171, 169, 173, 0.5); /* black with 50% opacity */
display: flex;
 
align-items: center;
border-radius: 20px;
margin-left: 561px;
 padding-left: 21px;    

}

h2.h2page15 {
  
    font-size: 30px;
    color: #5e0909;
width: 344px;
height: 84px;
background-color: rgba(194, 194, 194, 0.5); /* black with 50% opacity */
display: flex;
 
align-items: center;
border-radius: 20px;
margin-left: 561px;
 padding-left: 21px;    
}
h2.h2page17 {
  font-size: 40px;
    color: #371111;
width: 884px;
height: 185px;
background-color: #b6b6b6; 
display: flex;
align-items: center;
border-radius: 20px;
margin-left: 262px;
padding-left: 37px; 
padding-right: -20px; 
opacity: 90%;
  
}


.h2page16 {
  font-size: 40px;
    color: #bccbff;
width: 600px;
height: 213px;
 
display: flex;
align-items: center;

margin-left: 429px;
padding-left: 37px; 
padding-right: -20px; 
opacity: 78%;
  
}


iframe {
  border: none;

}
.button{
    height: 56vh;      
  display: flex;
  justify-content: center;
  align-items: center;
}



.ufo{
  opacity: 80%;
   position: relative;
  width: 400px;
  animation: moveUFO 3s infinite alternate ease-in-out;
}

@keyframes moveUFO {
  50% {
    transform: translateY(41px);
  }
  100% {
    left: 51%;
    transform: translateY(-20px);
  }
  75% {
    left: 70%;
    transform: translateY(-74px);
  }
  25% {
    left: 80%;
    transform: translateY(50px);
  }
}




.slide
{

  position: relative;      /* IMPORTANT */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  margin-top: 110px;
}

.w3left,
.w3right {
   display: flex;
  justify-content: center; 
  align-items: center;    
  height: 58px;         
  position: relative;
    margin-top: -571px; 
    margin-left: -231px;
    margin-right: 136px;
  font-size: 53px; 
 
}

h2{
position: float;    
font-size: 31px;
width: 292px;
height: 163px;
background-color: rgba(215, 177, 253, 0.5); /* black with 50% opacity */
display: flex;
 color: #811515;
align-items: center;
border-radius: 20px;
margin-left: 552px;
 padding-left: 26px;
 
    
    
    
    
    
}
.nav {
    width: 100%;
    position: absolute;
    bottom: 0;
    
    background-color: #006db2;
    
}

.nav1 {
    position: absolute;
    left: 10px;
}

.nav2 {
    position: absolute;
    right: 10px;
}

.image-container {
 display: flex;
  justify-content: center;   /* center horizontally */
  margin-top: -67px;
}   
.ticket
{
width: 530px; 
margin-top: 137px;

 animation: float 3s ease-in-out infinite;
} 
@keyframes float {
  0%   { transform: translateX(15px); }
  50%  { transform: translateX(40px); }
  100% { transform: translateX(-18px); }

}




.no{
 
    font-family: 'Goldman', sans;
    font-size: 19px;
    color: #006db2;
    background-color: #dcdcdc;
    border: 2px solid #6696ff;
    padding: 3px 4px;
    margin-right: 10px;
    margin-top: 20px;
    
}

.no:hover{
    color:#debdfc;
    background-color: #006db2;
}
.yes {
    font-family: 'Goldman', sans;
    font-size: 19px; 
    color: #006db2;
    background-color: #dcdcdc;
    border: 2px solid #6696ff;
    padding: 3px 4px;
    margin-left: 659px;
    margin-top: 20px;
}
.yes:hover{
    color:#debdfc;
    background-color: #006db2;
}
 

.page1 {
    
    height: 100vh;
    /*position: relative;*/
}