/* font: */
.marcellus-regular {
  font-family: "Marcellus", serif;
  font-style: normal;
}

/* h1 text style: */
h1 {
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 200px;
  height: 50px;
  padding: 5px;
}

code {
  background-color: #eee;
  border-radius: 3px;
  font-family: courier, monospace;
  padding: 0 3px;
}


/* puts a bg image in the box where the title of the page is: */
h1 {
  position: relative;
  bottom: 300px;
  right: 5px;
  justify-content: center;
  text-align: justify;
  display: inline;
  background-image: url("p_bluesky.png");
  color: rgba(0,0,0,0.9);
}

h2 {
  text-align: center;
  text-decoration: underline;
}

/* the "container" is what wraps your entire website: */
.site_container {
  max-width: 1920px;
  max-height: 1020px;
/* to center the entire page: */
  margin: 0 auto;
}

/* the area below is for all links on your page EXCEPT for the navigation links: */
.site_container a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

/* the pseudo class hover defines what happens to the presentation of the links when they are hovered over: */ 
.site_container li a:hover {
  color: white;
  text-decoration: underline;
}

/* header area: */
.header_area {
  align-content: flex-start;
  box-sizing: content-box;
  position: absolute;
  top: 0px;
  width: 98%;
  height: 120px;
  border: 1px solid #3f4041;
  padding: 10px;
  margin: 0px;
  background: url("header.png") 50% lightblue;
}           

.pfp_box {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 90px;
  height: 100px;
  padding: 10px;
  margin: 0;
  color: #fff4e6;
  text-shadow: #FC0 1px 0 10px;
  text-align: center;
  border: 3px dashed #fff4e6;
  background-image: url("Rat_prophet_pfp.png");
  background-size: cover;
}
            
/* navigation section:*/
/* colours: #622821 #56211b #40462d #525454 */
#navbar { 
  border: 1px solid #3f4041;
  height: 40px;
  margin-bottom: 10px;
  margin-top: 150px;
  background-color: #622821;
  width: 100%;
}

#navbar ul {
  display: flex;
  list-style: none;
  justify-content: space-evenly;

}

#navbar li {
  padding-top: 10px;
  width: 5%;
  font-size: large;
}
            
/* navigation links */
#navbar li a {
  color: black;
  position: absolute;
  top: 160px;
  font-weight: 900;
  text-decoration: none;
/* this removes the underline */
}
            
#navbar li a:hover {
  color: #fffaf0;
  text-decoration: underline overline;
}

/* layout of cheatsheet grid */
.layout {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.grid-container > div {
  background-color: #fff4e6;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

/* cheatsheet sections */

.Tests {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}
.Tests a {
  color: darkred;
  font-weight: 900;
/* this removes the underline */
}

.Tests a:hover {
   color: darkred;
  text-decoration: underline;
}

.PDFs {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 2;
  grid-column-end: 2;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}
.PDFs a {
  color: darkred;
  font-weight: 900;
/* this removes the underline */
}

.PDFs a:hover {
   color: darkred;
  text-decoration: underline;
}

.GLM1 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 3;
  grid-column-end: 3;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}

.Calculations {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 1;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}

.Variables {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 2;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}

.GLM2 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 3;
  grid-column-end: 3;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}

.Interpretation {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 1;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}

.R {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 2;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}

.Extra{
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 3;
  height: 400px;
  overflow: scroll;
  border: 3px solid #1C6EA4;
}



/* presentation of the top bar: */
#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: larger;
  background-color: #13092D;
}


 
 /* This makes the cursor into the pointing shape like when you hover over a link, but for the part of details that says "Click here": */ 
 details > summary {
  cursor: pointer;
 }




/* presentation of everything in body. For example, the bg image of the whole website that you can see in between elements, and also the standard font and sizing for the whole page: */
body {
  background: url("p_bluesky.png") 50% #b1cfea;
  color: black;
  font-family: "Marcellus", serif;
  font-weight: bold;
  font-style: normal;
}
           
 /* colour of the main content area, between the sidebars: */
main {
  background-color: #fff4e6;
  border: 1px solid #3f4041;
  /*flex: 1 1 auto;*/
  padding: 20px;
}

footer {
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
}


/* Media query (responsitivity): */
 @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. */
    main {
      order: 1;
     }
     
    #leftSidebar {
      order: 2;
    }

    #rightSidebar {
      order: 3;
    }

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