/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
  /* font-family: 'Alata', sans-serif; */
font-family: 'Archivo', sans-serif;
/* font-family: 'Outfit', sans-serif; */
/* font-family: 'Ramabhadra', sans-serif; */
  /* font-weight: lighter; */
 
  margin: 0 auto;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  text-align: center;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
h1 {
  padding: 2%;
  font-size: 3rem;

}

h2, p, form {
  padding: 2%;
  padding-left: 10%;
  padding-right: 10%;
  font-size: 1.6rem;
  text-align: center;
}

form {
  display: flex;
  justify-items:center;
  align-items: center;

}

.indent {
  text-align: center;
  padding-left: 5%;
}

label {
  font-size: 1.6rem;
}
.hidden {
  display: none;
}
/******************************************
/* LAYOUT / SECTIONS
/*******************************************/

.white-card {
  background: -webkit-linear-gradient(to right, #eef0f3, #fbfdff);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fdfeff, #fbfcfd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
  width: 100%;
  overflow: hidden;
  padding-top: 0%;
  padding-bottom: 5%;
}

.blue-card {
  background: #141E30;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
  width: 100%;
  overflow: hidden;
  padding-top: 5%;
  padding-bottom: 5%;
  color: #fdfeff;
}


/* NAVIGATION */
header {
  z-index: 1;
  background: -webkit-linear-gradient(to right, #eef0f3, #fbfdff);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fdfeff, #fbfcfd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
  width: 100%;
  overflow: hidden;
  box-shadow:0px 2px 10px #aeb0b5;
  width: 100%;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0 
}

nav {
  height: 100%;
}

ul {
  height: 100%; 
}

 li {
  padding: 0.5%;
  margin: 0.75%;
  font-size: 1.6rem;
  display: inline-block;
  list-style: none;
  height: 100%;
  border-bottom: transparent 3px solid;
  font-weight: 400;
}

.active {
  background-color: #243B55;  
  transition: background-color 0.4s;
  border-radius: 10px;
  padding: 1.5%;
  color: white;
  font-weight: 600;
}

li:hover {
 border-bottom: #1058DB 4px solid;
}

a:visited {
  text-decoration: none;
  /* color: black; */
}

/* APOD SECTION */

.apod-photo-header {
  background-image: url('../apod-galaxy.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-top: 5%;
  padding-bottom: 5%;
  color: #fdfeff;
  
}

.title{
  padding: 4%;
  font-size: 2rem;
}

 input, button{
  padding: 1%;
  margin: 1%;
  font-size: 1.5rem;
  font-weight: 400;
  border-radius: 5px;;
  background-color: #243B55;
  border: solid white 1px;
  outline: none;
  color: #eef0f3;
}

#apod-description, #mr-description,  #apod-date, .nivl-info  {
 padding: 2%;
  width: 90%;
  text-align: justify;
  font-size: 1.5rem; 
 

}

/* MARS ROVER SECTION */

.mr-photo {
  background-image: url('../mars-rover.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-top: 5%;
  padding-bottom: 5%;
  color: #fdfeff;
  
}

.card {
  max-width: 40px;
  height: 80%;
  background: #141E30;
  position: relative;
  right: 40%;
  border-radius: 5%;

}

.card-txt {
  padding: 200%;
  font-size: 5rem;
  
}

/* NASA IMAGE AND VIDEO LIBRARY */

.nivl-photo-header {
  background-image: url('..//Orions\ Belt.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-top: 5%;
  padding-bottom: 5%;
  color: #fdfeff;
}

/******************************************
/* ADDITIONAL STYLES/ MEDIA QUERIES
/*******************************************/
@media (min-width: 900px) {
  img {
    max-width: 1500px;
  }  
.active {
  padding: 0.9%;
}

.blue-card {
  padding-bottom: 1%;
  padding-top: 1%;
}

.white-card {
  padding-bottom: 0%;
  padding-top: 0%;
}

.title{
  padding: 2%;
  font-size: 2rem;
}
.nivl-info {
  padding-top: 1%;
  padding-bottom: 1%;;
}

#apod-description, #mr-description,  #apod-date, .nivl-info  {
  padding-left: 0;
  padding-left: 0;
 width: 79%;
  
 
 }
#apod-date {
  padding-bottom: 0;
}

p {
  padding-top: 1%;
  padding-bottom: 1%;

}

}

@media (max-width: 800px) {
  h3  {
    font-size: 3rem;
  }


}

@media (max-width: 600px) {
  input, button  {
    padding: 2%;
  }

}


@media (max-width: 400px) {
  h3  {
    font-size: 2.5rem;
  }

  .card {
   max-width: 20px;
}
.card-txt {
  font-size: 4rem;
}

}