/* For overall website */
html {
  font-size: 16px;
  font-family: "Goudy Bookletter 1911", sans-serif;
  background-color: #470000;
  box-sizing: border-box;
  margin: 0;
}

/* Container id to change the width of my layout */
#container {
  max-width: 900px;
  /* this is the width of your layout! */
  /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
  margin: 0 auto;
  /* this centers the entire page */
}

/* the area below is for all links on your page
    EXCEPT for the navigation */
#container a {
  color: darkred;
  font-weight: bold;
  /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
}

/* For the entire body portion of the webpage */
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ffb8b8;
  padding: 0 20px 20px 20px;
}

/* Headings */
h1 {
  text-align: center;
  margin: 0;
  padding: 20px 0;
  color: #a30000;
}

h2 {
  font-size: 25px;
  color: black;
}

/* Paragraphs */
p {
  font-size: 17px;
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: 2em;
}

li {
  line-height: 2;
}

/* For navigation id */
#navbar {
  font-size: 20px;
  letter-spacing: 0.5px;
  text-align: center;
}

/* For navigation table */
#navbar table {
  border-radius: 5px;
  margin: auto;
}

#navbar td {
  padding: 3px 6px;
}

/* Displaying image */
img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
}

/* For content warning portion */

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  background-color: darkred;
  color: white;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

/* To make the webpage more flexible */
#flex {
  display: flex;
}

/* this is just a cool box, it's the darker colored one */
.box {
  background-color: #ffb8b8;
  padding: 10px;
  margin: 0 auto;
}

/* Text of the left sidebar itself */
aside {
  background-color: #800000;
  width: 200px;
  padding: 20px;
  font-size: smaller;
  /* this makes the sidebar text slightly smaller */
}

/* Text of the webpage itself */
main {
  background-color: #ffb8b8;
  flex: 1;
  padding: 20px;
  order: 2;
}

/* Ordering of the sidebars itself */
#leftSidebar {
  order: 1;
}

#rightSidebar {
  order: 3;
}

/* Footer section */
footer {
  background-color: #8b0000;
  /* background color for footer */
  width: 100%;
  height: 30px;
  padding: 0;
  text-align: center;
  /* this centers the footer text */
  color: white;
  font-weight: bold;
}

/* For bolder text */
strong {
  /* this styles bold text */
  color: black;
}

/* Media query section */
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

  /* the order of the items is adjusted here for responsiveness!
  since the sidebars would be too small on a mobile device.
  feel free to play around with the order!
  */
  main {
    order: 1;
  }

  #leftSidebar {
    order: 2;
  }

  #rightSidebar {
    order: 3;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
}