* {
  box-sizing: border-box;
}

.home {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 75px repeat(6,2fr) 75px;
  row-gap: 30px;
  column-gap: 30px;
  margin: 10px;
  font-family: "Lucida Console", Courier, monospace;
  font-size: large;
  font-weight: bold;
  background-color: aliceblue;
  img{
    border: 2px solid black;
    border-radius: 8px;
  }
}

/*header*/
.homebox1{
  grid-column: 1 / 13;;
  grid-row: 1 / 2;
  text-align: center;
  background-color: dimgray;
  border: 2px solid black;
  border-radius: 8px;
}
/*nav*/
.homebox2{
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  padding-top: 20px;
  ul{
    list-style-type: none;
  }
  a{text-decoration: none;}
  a:link {
  color: blue;
  }
  a:visited {
    color: green;
  }
  a:hover {
  color: red;
  }
}
/*banner*/
.homebox3{
  grid-column: 5 / 13;
    grid-row: 2 / 4;
    img {
      object-fit: contain;
      max-width: 100%;
    }
}
/*introduction*/
.homebox4{
  grid-column: 1/ 13;;
  grid-row: 4 / 5;
  background-color: rgb(193, 186, 186);
  padding-top: 10px;
  color: black;
  border: 2px solid black;
  border-radius: 8px;
}
/*intro kennedy speech */
.homebox5{
  grid-column: 4/ 13;;
  grid-row: 5 / 6;
  padding-top: 30px;
  background-color: rgb(193, 186, 186);
  color: black;
  border: 2px solid black;
  border-radius: 8px;
}
/**mission review */
.homebox6{
  grid-column: 4/ 13;;
  grid-row: 6 / 7;
  padding-top: 30px;
  background-color: rgb(193, 186, 186);
  color: black;
  border: 2px solid black;
  border-radius: 8px;
}
/*moonwalk review*/
.homebox7{
  grid-column: 4/ 13;;
  grid-row: 7 / 8;
  padding-top: 10px;
  background-color: rgb(193, 186, 186);
  color: black;
  border: 2px solid black;
  border-radius: 8px;
}
/* kennedy's speech video */
.homebox8{
  grid-column: 1/ 4;
  grid-row: 5 / 6;
  padding-left: 20px;
  padding-top: 40px;
  width: 400px; 
  height: 230px;
  video{
    max-width: 100%;
  }
}
/* apollo mission review video*/
.homebox9{
  grid-column: 1/ 4;
  grid-row: 6 / 7;
  padding-left: 20px;
  padding-top: 40px;
  width: 400px; 
  height: 230px;
  video{
    max-width: 100%;
  }
}
/* moonwalk montage video */
.homebox10{
  grid-column: 1/ 4;
  grid-row: 7 / 8;
  padding-left: 20px;
  padding-top: 40px;
  width: 400px; 
  height: 230px;
  video{
    max-width: 100%;
  }
}

/* footer */
.homebox13{
  grid-column: 1 / 13;
  grid-row: 12 / 13;
  text-align: center;
  ul{
    list-style-type: none;
  }
  a{text-decoration: none;}
  a:link {
  color: blue;
  }
  a:visited {
    color: green;
  }
  a:hover {
  color: red;
  }
}
/***************** crewmembers page *****************/

.astro{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 75px repeat(6,2fr) 75px;
  row-gap: 10px;
  column-gap: 10px;
  margin: 10px;
  font-family: "Lucida Console", Courier, monospace;
  font-size: smaller;
  background-color: aliceblue;
  img{
    border: 2px solid black;
    border-radius: 8px;
  }
}
/* header */
.astrobox1{
  grid-column: 1 / 13;;
  grid-row: 1 / 2;
  text-align: center;
  padding-top: 5px;
  background-color: dimgray;
  border: 2px solid black;
  border-radius: 8px;
}
/* navigation */
.astrobox2{
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  padding-top: 20px;
  ul{
    list-style-type: none;
  }
  a{text-decoration: none;}
  a:link {
  color: blue;
  }
  a:visited {
    color: green;
  }
  a:hover {
  color: red;
  }
}
/* crew image*/
.astrobox3{     
    grid-column: 4 / 13;
    grid-row: 2 / 4;
    padding-top: 30px;
    img {
      object-fit: contain;
      max-width: 100%;
    }
}
/* historical image left 1 */
.astrobox4{
  grid-column: 1/ 3;
  grid-row: 4 / 5;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}
/* historical image left 2 */
.astrobox5{
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}
/* historical image left 3 */
.astrobox6{
  grid-column: 1/ 3;
  grid-row: 6 / 7;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}
/* historical image left 4 */
.astrobox7{
  grid-column: 1/ 3;
  grid-row: 7 / 8;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}
/* historical image right 1 */
.astrobox8{
  grid-column: 11 / 13;
  grid-row: 4 / 5;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}
/* historical image right 2 */
.astrobox9{
  grid-column: 11 / 13;
  grid-row: 5 / 6;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}
/* historical image right 3 */
.astrobox10{
  grid-column: 11 / 13;
  grid-row: 6 / 7;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}
/* historical image right 4 */
.astrobox11{
  grid-column: 11 / 13;
  grid-row: 7 / 8;
  img {
    width: 300 px;
    height: 600 px;
    object-fit: contain;
    max-width: 100%;
  }
}

/* bio information */
 .content{
  grid-column: 4 / 10;
  grid-row: 4 / 8;
  color:black;
  font-size: large;
  p{
    padding-bottom: 30px;
  }
  background-color: rgb(193, 186, 186);
  border: 2px solid black;
  border-radius: 8px;
 }
 
/* footer */
.astrobox12{
  grid-column: 1/ 13;;
  grid-row: 9 / 10;
  text-align: center;
  a:link {
    color: blue;
  }
  a{text-decoration: none;}
  a:visited {
      color: green;
  }
  a:hover {
    color: red;
  }
}

/*********** saturn v *****************/
.saturn{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 75px repeat(6,2fr) 75px;
  row-gap: 10px;
  column-gap: 10px;
  margin: 10px;
  font-family: "Lucida Console", Courier, monospace;
  font-size: medium;
  background-color: aliceblue;
  img{
    border: 2px solid black;
    border-radius: 8px;
  }
}
/* header */
.saturnbox1{
  grid-column: 1 / 13;;
  grid-row: 1 / 2;
  text-align: center;
  background-color: dimgray;
  border: 2px solid black;
  border-radius: 8px;
}
/* navigation */
.saturnbox2{
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  ul{
    list-style-type: none;
  }
  a{text-decoration: none;}
  a:link {
  color: blue;
  }
  a:visited {
    color: green;
  }
  a:hover {
  color: red;
  }
}
/* saturn v banner */
.saturnbox3{     
    grid-column: 4 / 13;
    grid-row: 2 / 4;
    padding-top: 20px;
    img {
      object-fit: contain;
      max-width: 100%;
    }
}
/* introduction */
.introduction{
  grid-column: 1 / 13;
  grid-row: 4 / 5;
  background-color: rgb(193, 186, 186);
  padding-bottom: 10px;
  color: black;
  font-size: small;
  border: 2px solid black;
  border-radius: 8px;
}
/* first stage assembly */
.saturnbox5{     
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* second stage assembly */
.saturnbox6{     
  grid-column: 4 / 6;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* third stage assembly */
.saturnbox7{     
  grid-column: 7 / 9;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* saturn complete */
.saturnbox8{     
  grid-column: 11 / 13;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* saturn description */
.saturnbox9{
  grid-column: 1 / 13;
  grid-row: 6 / 7;
  background-color: rgb(193, 186, 186);
  color: black;
  border: 2px solid black;
  border-radius: 8px;
  font-size: medium;
}
/* saturn assembly building */
.saturnbox10{
  grid-column: 1 / 3;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* saturn leaving vab */
.saturnbox11{
  grid-column: 4 / 7;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* saturn moving to launch pad */
.saturnbox12{
  grid-column: 8 / 10;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* saturn at launch pad */
.saturnbox13{
  grid-column: 11 / 13;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* footer */
.saturnbox14{
  grid-column: 1 / 13;
  grid-row: 9 / 10;
  text-align: center;
  a:link {
    color: blue;
  }
  a{text-decoration: none;}
  a:visited {
      color: green;
  }
  a:hover {
    color: red;
  }
}
/**************** mission ********************/
.mission{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 75px repeat(7,1fr) 75px;
  row-gap: 25px;
  column-gap: 10px;
  margin: 10px;
  font-family: "Lucida Console", Courier, monospace;
  font-size: medium;
  background-color: aliceblue;
  img{
    border: 2px solid black;
    border-radius: 8px;
  }
}
/* header */
.missionbox1{
  grid-column: 1 / 13;;
  grid-row: 1 / 2;
  text-align: center;
  background-color: dimgray;
}
/* navigation */
.missionbox2{
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  ul{
    list-style-type: none;
  }
  a:link {
    color: blue;
  }
  a{text-decoration: none;}
  a:visited {
      color: green;
  }
  a:hover {
    color: red;
  }
}
/* mission patch */
.missionbox3{     
    grid-column: 4 / 13;
    grid-row: 2 / 4;
    img {
      object-fit: contain;
      max-width: 100%;
    }
}
/* mission page introduction */
.recap{
  grid-column: 1 / 13;
  grid-row: 4 / 5;
  background-color: rgb(193, 186, 186);
  color: black;
  border: 2px solid black;
    border-radius: 8px;
    padding-top: 35px;
}
/* ignition */
.missionbox4{     
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* liftoff */
.missionbox5{     
  grid-column: 5 / 7;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* clear */
.missionbox6{     
  grid-column: 8 / 10;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* altitude */
.missionbox7{     
  grid-column: 11 / 13;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* first staging */
.missionbox8{     
  grid-column: 1 / 3;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* lunar profile */
.missionbox9{     
  grid-column: 5 / 7;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* commemorative plaque */
.missionbox10{     
  grid-column: 8 / 10;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* sea of tranquility */
.missionbox11{     
  grid-column: 11 / 13;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* csm in lunar orbit */
.missionbox12{     
  grid-column: 1 / 3;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* earthrise */
.missionbox13{     
  grid-column: 5 / 7;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* lunar module approach */
.missionbox14{     
  grid-column: 8 / 10;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* touchdown */
.missionbox15{     
  grid-column: 11 / 13;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* footer page 1 */
.footer1{     
  grid-column: 1 / 13;
  grid-row: 8 / 9;
  text-align: center;
  a:link {
    color: blue;
  }
  a{text-decoration: none;}
  a:visited {
      color: green;
  }
  a:hover {
    color: red;
  }
}
/* page 2 */
/* aldrin on ladder */
.missionbox16{     
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
 
/* aldrin bottom of ladder */
.missionbox18{     
  grid-column: 5 / 7;
  grid-row: 4 / 5;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* footprint on moon */
.missionbox19{     
  grid-column: 8 / 10;
  grid-row: 4 / 5;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* us flag on moon */
.missionbox20{     
  grid-column: 11 / 13;
  grid-row: 4 / 5;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* salute flag on moon */
.missionbox21{     
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* lunar experiment bay */
.missionbox22{     
  grid-column: 5 / 7;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* lunar experiments */
.missionbox23{     
  grid-column: 8 / 10;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* ascent stage liftoff */
.missionbox24{     
  grid-column: 11 / 13;
  grid-row: 5 / 6;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* lunar ascent earth */
.missionbox25{     
  grid-column: 1 / 3;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* lunar ascent closing */
.missionbox26{     
  grid-column: 5 / 7;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* lunar ascent closing */
.missionbox27{     
  grid-column: 8 / 10;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* apollo 11 reentry */
.missionbox28{     
  grid-column: 11 / 13;
  grid-row: 6 / 7;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* apollo 11 main chutes */
.missionbox29{     
  grid-column: 1 / 3;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* apollo 11 splashdown */
.missionbox30{     
  grid-column: 5 / 7;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* chopper raft */
.missionbox31{     
  grid-column: 8 / 10;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* chopper raft */
.missionbox32{     
  grid-column: 11 / 13;
  grid-row: 7 / 8;
  img {
    object-fit: contain;
    max-width: 100%;
  }
}
/* form */
.missionbox33{
  grid-column: 2 / 4;
  grid-row: 8 / 9;
  label{display: block;
  margin-top: 5px;}
  input{display:block;
  margin-top: 5px;}
}
.missionbox34{
  grid-column: 6 / 12;
  grid-row: 8 / 9;
  color: black;
}
/* footer final page */
.footer2{     
  grid-column: 1 / 13;
  grid-row: 9 / 10;
  text-align: center;
  a:link {
    color: blue;
  }
  a{text-decoration: none;}
  a:visited {
      color: green;
  }
  a:hover {
    color: red;
  }
}