/* TODO https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself */
/* TODO Figure out favicon.ico error upon loading page for the first time */

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

:root {
  --navy-blue: #061f2f;
  --lighter-blue: #9CD7F7;
  --white: White;
  --black-navy: #101e26;
  --silver: #C0C0C0;
  --light-blue: #0087c8;
}

* {
  font-family: 'Roboto', sans-serif;
  background-color: var(--navy-blue);
  color: var(--white);
}

h3 span,
h1 span {
  color: var(--silver);
}

h2 {
  text-align: center;
}

ul {
  list-style-type: square;
}

.bodyGrid {
  display: grid;
  grid-auto-flow: row;
  padding-left: 5vw;
  padding-right: 5vw;
  grid-template-rows: repeat(auto-fit, [row-start] minmax(0, 1fr) [row-end]);
  grid-template-columns: repeat(10, [col-start] 9vw [col-end]);
  margin-left: 0;
  margin-right: 0;
}

.bodyHeader {
  grid-area: row-start / col-start / row-end / col-end 10;
  text-align: center;
}

.menu {
  grid-area: row-start / col-start 10 / row-end / col-end 10;
}

.bodyGrid div {
  justify-content: center;
}

.bodyLeft {
  /* Note to myself: rows & columns start at 1, not 0 */
  grid-area: row-start 2 / col-start / row-end 2 / col-end 7;
  align-items: center;
  background: var(--black-navy);
}

.bodyRight {
  display: flex;
  flex-direction: column;
  grid-area: row-start 2 / col-start 8 / row-end 2 / col-end 10;
  justify-content: center;
  text-align: center;
  background-color: var(--black-navy);
  font-size: 20px;
}

.bodyRight p,
.bodyRight a,
.bodyRight h2,
.bodyRight div,
.bodyRight button {
  background: var(--black-navy);

}

.bodyRight p {
  padding-right: 5vw;
  padding-left: 5vw;
}

.bodyRight h2 {
  margin: 0;
}

.bodyRight button {
  font-size: 18px;
  padding: 14px 25px;
  max-width: 9em;
  justify-items: center;
  border: 2px solid var(--white);
  transition-duration: 0.4s;
  background-color: var(--black-navy);
  color: var(--white)
}

/* Figure this out TODO */
.bodyRight div button:hover {
  background-color: var(--white);
  color: var(--black-navy)
}

.bodyMid {
  grid-area: row-start 3 / col-start 2 / row-end 4 / col-end 9;
  font-size: 15px;
}

.bodyMid div {
  text-align: center;
  background-color: var(--navy-blue);
  margin-bottom: 18px;
}

.bodyMid button {
  background: var(--light-blue);
  border: 0;
  padding: 12px 20px 10px;
  margin-top: 3px;
  border-radius: 3px;
}

th {
  background-color: var(--black-navy);
  color: var(--silver);
}

.momoPic {
  display: block;
  /* box-shadow: 0px 0px 5px 2px grey; */
  max-height: 500px;
  object-fit: cover;
  max-width: 100%;
  background-color: var(--black-navy);
}

@media screen and (max-width: 600px) {
  .bodyLeft {
    /* Note to myself: rows & columns start at 1, not 0 */
    grid-area: row-start 2 / col-start / row-end 2 / col-end 10;
    align-items: center;
    background: var(--black-navy);
  }

  .bodyRight {
    display: flex;
    flex-direction: column;
    grid-area: row-start 3 / col-start / row-end 3 / col-end 10;
    justify-content: center;
    text-align: center;
    background-color: var(--black-navy);
    font-size: 20px;
  }

  .bodyRight h2 {
    padding-top: 10%;
  }

  .bodyRight div {
    padding-bottom: 10%;
  }

  .bodyMid {
    grid-area: row-start 4 / col-start 2 / row-end 4 / col-end 9;
    font-size: 15px;
  }
}
@media screen and (min-width: 765px) {
  .bodyLeft {
    /* Note to myself: rows & columns start at 1, not 0 */
    grid-area: row-start 2 / col-start / row-end 2 / col-end 5;
    align-items: center;
    background: var(--black-navy);
  }

  .bodyRight {
    display: flex;
    flex-direction: column;
    grid-area: row-start 2 / col-start 6 / row-end 2 / col-end 10;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--black-navy);
    font-size: 20px;
  }
}

@media screen and (min-width: 1039px) {
  .bodyLeft {
    /* Note to myself: rows & columns start at 1, not 0 */
    grid-area: row-start 2 / col-start 2 / row-end 2 / col-end 5;
    align-items: center;
    background: var(--black-navy);
  }

  .bodyRight {
    display: flex;
    flex-direction: column;
    grid-area: row-start 2 / col-start 6 / row-end 2 / col-end 9;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--black-navy);
    font-size: 20px;
  }
}

@media screen and (min-width: 1304px) {
  .bodyLeft {
    /* Note to myself: rows & columns start at 1, not 0 */
    grid-area: row-start 2 / col-start 3 / row-end 2 / col-end 5;
    align-items: center;
    background: var(--black-navy);
  }

  .bodyRight {
    display: flex;
    flex-direction: column;
    grid-area: row-start 2 / col-start 6 / row-end 2 / col-end 8;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--black-navy);
    font-size: 20px;
  }

  .bodyMid {
    grid-area: row-start 3 / col-start 3 / row-end 4 / col-end 8;
    font-size: 15px;
  }
}

@media screen and (min-width: 1743px) {
  .bodyLeft {
    /* Note to myself: rows & columns start at 1, not 0 */
    grid-area: row-start 2 / col-start 4 / row-end 2 / col-end 5;
    align-items: center;
    background: var(--silver);
  }

  .bodyRight {
    display: flex;
    flex-direction: column;
    grid-area: row-start 2 / col-start 6 / row-end 2 / col-end 7;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--black-navy);
    font-size: 20px;
  }

  .bodyMid {
    grid-area: row-start 3 / col-start 4 / row-end 4 / col-end 7;
    font-size: 15px;
  }
}