/* Last Revision Date: Sunday, November 10, 2024 */
/* This Style Sheet contains items specifically for the Landing page Flexbox at the bottom of the page. */

* {
  box-sizing: border-box;
}

header {
  padding: 20px;
  text-align: center;
  color: white;
  font-size: 4.00em;      /* em = pixels / 16 (64px) */
  border-style: solid;
  border-width: 1px;
}

/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
}

nav ul {
  list-style-type: none;
  color: #f0e9ee;  /* Text Color: Insignia White */
  padding: 15px 15px 15px 15px;
  font-size: 2.00em;      /* em = pixels / 16 (32px) */
  border-style: solid;
  border-width: 1px;
  background-color: #00477e;  /* Highway Blue */
  margin: 0px;
}

article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  padding: 0px;
  text-align: left;
  background-color: #FFA500;         /* Background color is orange */
  color: #4B0082;         /* Text color is indigo */
  width: 80%;
  margin: 0px;
}

h1#flexboxh1 {
  font-size: 2.00em;      /* em = pixels / 16 (32px) */
  padding: 0px 0px 0px 0px;
  width: 20%;
  border-style: solid;
  border-width: 1px;
  margin: 0px;
}

p#flexboxparagraph {
  font-size: 2.00em;      /* em = pixels / 16 (32px) */
  padding: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
  margin: 0px;
}

h1#flexboxh1 {
  font-size: 2.00em;      /* em = pixels / 16 (32px) */
  text-align: center;
  padding: 0px 0px 0px 0px;
}

footer {
  padding: 20px;
  text-align: center;
  color: white;
  font-size: 4.00em;      /* em = pixels / 16 (64px) */
  border-style: solid;
  border-width: 1px;
}

@media only screen and (max-width: 850px){

  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  header {
    padding: 10px;
    font-size: 3.00em;      /* em = pixels / 16 (48px) */
  }

  h1#flexboxh1 {
    font-size: 2.00em;      /* em = pixels / 16 (32px) */
    text-align: center;
    padding: 0px 0px 0px 0px;
    width: 100%;
  }

  nav ul {
    padding: 15px;
    font-size: 2.00em;      /* em = pixels / 16 (32px) */
  }

  p#flexboxparagraph {
    padding: 15px;
    font-size: 2.00em;      /* em = pixels / 16 (32px) */
    text-align: justify;
  }

  article {
    width: 100%;
  }

  footer {
    padding: 10px;
    font-size: 3.00em;      /* em = pixels / 16 (48px) */
  }

}

@media only screen and (max-width: 600px){

  header {
    padding: 10px;
    font-size: 2.50em;      /* em = pixels / 16 (40px) */
  }

  h1#flexboxh1 {
    font-size: 1.75em;      /* em = pixels / 16 (28px) */
    text-align: center;
    padding: 0px 0px 0px 0px;
    width: 100%;
  }

  nav ul {
    padding: 10px;
    font-size: 1.75em;      /* em = pixels / 16 (28px) */
  }

  p#flexboxparagraph {
    padding: 10px;
    font-size: 1.75em;      /* em = pixels / 16 (28px) */
    text-align: justify;
  }

  footer {
    padding: 10px;
    font-size: 2.50em;      /* em = pixels / 16 (40px) */
  }

}

@media only screen and (max-width: 400px){

  header {
    padding: 10px;
    font-size: 2.00em;      /* em = pixels / 16 (32px) */
  }

  h1#flexboxh1 {
    font-size: 1.25em;      /* em = pixels / 16 (20px) */
    text-align: center;
    padding: 0px 0px 0px 0px;
    width: 100%;
  }

  nav ul {
    padding: 15px;
    font-size: 1.25em;      /* em = pixels / 16 (20px) */
  }

  p#flexboxparagraph {
    padding: 15px;
    font-size: 1.25em;      /* em = pixels / 16 (20px) */
    text-align: justify;
  }

  footer {
    padding: 10px;
    font-size: 2.00em;      /* em = pixels / 16 (32px) */
  }

}