@import url('https://fonts.googleapis.com/css2?family=Changa+One&family=Limelight&family=Yrsa&display=swap');

body
{
    padding:0;
    margin:auto;
    background-color:#060604;
    color:#EAE1D7;
   background-image: url(images/starsbg2.jpg);
   background-size: cover;
   background-attachment: fixed;
   animation: move-stars 180s linear infinite;

  
   font-family: 'Yrsa', 'Baskerville', 'Rockwell', Garamond, 'Cambria', serif;
   font-size: clamp(.9rem, 4vw, 1.1rem);
   max-width: 1200px;
}




img
{
    max-width: 100%;
    height: auto;
    display: block;  
    margin: auto; 
}

h1 a{
    font-family: 'Changa One', 'Arial Black', Tahoma, Verdana, sans-serif;
    text-transform: uppercase;
    
    text-decoration: none;
    color:#db985b;
    font-weight:normal;
    font-size:clamp(3.5rem, 15vw, 7rem);
    letter-spacing: .3rem;
    line-height: 1;
    
}

h1 span{
    font-size:clamp(1.2rem, 5vw, 1.8rem);
    font-family: 'Limelight', 'Segoe UI', Helvetica, 'Candara', sans-serif;
    letter-spacing: .1rem;
}

h1{
    text-align: center;
}

h2{
    color:#0a1327;
    font-family: 'Limelight', 'Segoe UI', Helvetica, 'Candara', sans-serif;
    font-size: clamp(2rem, 6vw, 2.9rem);
  
    margin: auto;
    margin-bottom:2rem;
    margin-top:2rem;

    background-image:url(images/swirls2.jpg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
   
    animation: animatedBackground 40s linear infinite;
}














/* homepage stuff */

.homepagegrid{
    
    text-align: center;
    padding:2rem;
    
    grid-template-columns: 1fr 1fr;
    margin: auto;
}

.explore{
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    
}

.explore a{
    text-decoration: none;
    color:#EAE1D7;
    border: 2px solid #EAE1D7;
    padding:.5rem;
    font-family: 'Changa One', 'Arial Black', Tahoma, Verdana, sans-serif;
    text-transform: uppercase;
    
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    align-items: center;
    margin: auto;
    margin-top:1rem;
    margin-bottom: 1rem;
    text-align: center;
    justify-content: center;
    animation: explore 3s infinite;
   
    
}

.jupiter{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    
}


.stars1{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    animation: stars1 3s infinite;

}


.stars2{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    animation: stars2 5s infinite;

}

.stars3{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    animation: stars2 4s infinite;

}

@media (prefers-reduced-motion: no-preference)
{
@keyframes stars1{
	0%{
		opacity:20;
	}
	
	50%{
        opacity:0;
		
		
	}
	
	100%{
		opacity:20;
	}
}


@keyframes stars2{
	0%{
		opacity:20;
	}
	
	50%{
        opacity:0;
		
		
	}
	
	100%{
		opacity:20;
	}
}


@keyframes stars3{
	0%{
		opacity:20;
	}
	
	50%{
        opacity:0;
		
		
	}
	
	100%{
		opacity:20;
	}
}


@keyframes explore{
	0%{
        box-shadow: 0 0 5px #e0e0e1;
	}
	
	50%{
        box-shadow: 0 0 20px #e0e0e1;
		
		
	}
	
	100%{
		box-shadow: 0 0 5px #e0e0e1;
	}


    
}


@keyframes animatedBackground
 {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}


@keyframes move-stars {
    0% { background-position: 0 0; }
    100% { background-position: 1000px 1000px; }
  }



}



.homepageabout{
    color:#EAE1D7;
    padding:2rem;
    font-size:1.1rem;
    max-width: 1000px;
    
    border: 5px double #d0bea9;
    box-shadow: 0 0 30px #B49879;
    margin:1rem;
   
}

.homepageabout h2{
    color:#EAE1D7;
    background-image: none;
    background-color: #0a1327;
    text-shadow: 2px 2px #db985b;
}

.homepageabout p{
    text-shadow: 1px 1px #0a1327;
}

.homepage nav ul{
    list-style-type: none;
    margin:0;
    padding:0;
    padding-top:0.5rem;
    text-align: center;     

    
}

nav ul{
    list-style-type: none;
    margin:0;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    text-align: center;
    justify-content: center;
    padding: 1.2rem;
    
}

nav a{
    
    
    padding:.5rem;
    border:none;
    font-family: 'Yrsa', 'Baskerville', 'Rockwell', Garamond, 'Cambria', serif;
    font-weight:bold;
    font-style:italic;
    letter-spacing:.1rem;
   
    color:#d0bea9;
    text-decoration: none;
    font-size:clamp(.5rem, 5vw, .7rem);
    
    
}


nav a:hover{
    transition-duration:.3s;
    color:#db985b;
}

nav li a{
    padding:0.68rem;
    font-size:clamp(.9rem, 5vw, 1.3rem);
}

.highlight{
    color:#db985b;
}


footer{
    text-align: center;
    padding: 1rem;
    
}

/* homepage stuff */












/* stay page */




.staygrid p{
    padding:1rem;
}

.staytext1, .staytext2, .staytext3{
    max-width: 350px;
    text-align: left;
    margin: auto;

}

.stay h2{
    text-align: center;
   
    color:#db985b;
}

.stay{
    padding:1rem;
}


/* stay page */







/* tours page */


.tours{
    padding: 1rem;
   
    
}



.tours a{
    text-decoration: none;
    color:#d0bea9
}



.tours h2{
    text-align: center;
    
}

.tours h3{
    font-family:'Changa One', 'Arial Black', Tahoma, Verdana, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .05rem;
    font-size:clamp(1.4rem, 5vw, 2rem);
    color:#db985b;
    border-bottom: 2px solid #db985b;
    padding-bottom:.4rem;
    max-width:400px;

    margin: auto;
    margin-bottom: 1rem;
}

.tours img{
    margin: 0;
    margin:auto;
    padding-top:1.5rem;
}

.greatredspot{
    
    margin-bottom: 1rem;
    
    
}



.moons{
    margin-bottom: 1rem;
    
   
}

.bands{
    margin-bottom: 1rem;
    
}

/* tours page */









/* tickets page */

.tickets{
    text-align: center;
    margin: auto;
    margin:1rem;
}

.ticketh2{
    text-align: center;
    font-size: clamp(2rem, 5vw, 2.9rem);
   
}



.package1, .package2, .package3{
    border: 5px double #EAE1D7;
    margin:auto;
    margin-bottom:2rem;
    max-width: 600px;

    background-image: url(images/bgswirl6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color:#e0e0e1;
    
    
}

.package2{
    background-image: url(images/bgswirl7.jpg);
}

.package3{
    background-image: url(images/bgswirl5.jpg);
}


.packagetype{
    border-bottom: 5px double #EAE1D7;
    padding-bottom:1rem;
    padding-top:1rem;
}

.packagetype h3{
    font-family:'Changa One', 'Arial Black', Tahoma, Verdana, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size:clamp(1.2rem, 5vw, 1.6rem);
    text-align: center;
    margin:0;
    padding-bottom: 1rem;
    text-shadow: 2px 2px #0a1327;
}

.packagetype p{
    color:#e0e0e1;
    text-align: center;
    margin:0;
    font-size:clamp(1rem, 5vw, 1.2rem);
    text-shadow: 1px 1px #0a1327;
}

.packageinfo{
    padding:1rem;
}

.packageinfo p{
    text-shadow: 1px 1px #0a1327;
    color:#e0e0e1;
}

.booknow{
    text-align: center;
    padding:1.5rem;
}

.booknow a{
    text-decoration: none;
    
    color:#e0e0e1;
    border: 2px solid #e0e0e1;
    padding:.5rem;
    font-family: 'Changa One', 'Arial Black', Tahoma, Verdana, sans-serif;
    text-transform: uppercase;
    font-size: clamp(1rem, 5vw, 1.2rem);
    animation: explore 3s infinite;
}


.packagechecks{
    display: flex;
    
    
}

.packagechecks p{
    padding-left: 1rem;
    padding-right: 1rem;
}

/* tickets page */









@media (min-width:500px){
    
   .tours img{
    max-width: 400px;
   }

  .tours{
    max-width: 1000px;
    margin: auto;
    
  }

  .tours h3{
    text-align: center;
  }

  .tours p{
    max-width: 400px;
    margin: auto;
  }

  
  
}

@media (min-width:650px){

    .staygrid{
        display: grid;
        text-align: center;
        padding:2rem;
        grid-template-columns: 1fr 1fr;
        margin: auto;

    }

    .spacecraft{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .staytext1{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    

    .probe{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .staytext2{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

   .interior{
    grid-column: 1 / 2;
   
   }

   .staytext3{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
 
   }

}


@media (min-width:800px){

    .homepagegrid{
        display: grid;
        
    }
    
    .explore a{
        margin-top: auto;
        margin-bottom: auto;
    }

    /* tours flex */

    .greatredspot{
        display: flex;
    }

    .greatredspottext{
        margin: auto;
    }

    .moons{
        display: flex;
        
    }

    .moonstext{
       margin:auto;
       order:2;
    }
 
    .bands{
        display: flex;
        
    }

    .bandstext{
       margin:auto;
    }

    .auroras{
        display:flex;
    }

    .aurorastext{
        margin: auto;
        order:2;
    }
  

    /* tours flex */
}


@media (min-width:1000px){

    .staygrid img{
        max-width: 100%;
    }

    .staygrid{
        display: grid;
        text-align: center;
        padding:2rem;
        
        grid-template-columns: 1fr 1fr 1fr;
        margin: auto;


    }

    .staytext1, .staytext2, .staytext3{
    
        margin: auto;
    }




    .spacecraft{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .staytext1{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }


    .probe{
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .staytext2{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

   .interior{
    grid-column: 2 / 3;
   }

   .staytext3{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
   }


   .tickets{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
   }

   .package1, .package2, .package3{
   margin:1rem;
   
   }

   .greatredspot h3{
    text-align: right;
}

.moons h3{
    text-align: left;
}

.bands h3{
    text-align: right;
}

.auroras h3{
    text-align: left;
}

.greatredspot{
    
    margin-bottom: 1rem;
    text-align: right;
    
}

.moons{
    margin-bottom: 1rem;
    
}

.bands{
    margin-bottom: 1rem;
    text-align: right;
}




}

@media (min-width:1100px){
    .homepageabout{
        margin: auto;
      }
}