@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Markazi+Text:wght@400..700&family=Space+Grotesk:wght@300..700&display=swap');

/* BODY element */
body{ 
  font-family: "Markazi Text", serif;
  font-size: 120%;
  height: 100vh;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
}

/* HEADER element */
header{
  background-color: rgba(5,71,45,0.5);
  height: 60px;
  flex-shrink: 0;
}

/* H1s in HEADER element */
header h1{
  color: black;
  font-family: "Markazi Text", serif;
  font-weight: 700;
  font-size: 50px;
  text-align: center;
  line-height: normal;
}

/* NAV element */
nav{
  background-color: rgb(124,76,7);
  height: 30px;
}

/* LI elements within the NAV element */
nav li{
  display: inline-block;
  list-style: none;
  height: 30px;
  padding-left: 20px;
}

/* A elements within the NAV element */
nav a{
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px 0 10px;
  color: black;
}

/* 
When hovering over A elements within 
the NAV element with an ID of #main-nav 
*/
#main-nav a:hover{
  background-color: rgb(202,138,17);
  transform:scale(1.5);
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

/* DIV element with an ID attribute of #content */
#content{
  display: flex;
  flex: auto;
  flex-direction: row;
}

/* MAIN element */
main{
  width: 70%;
  box-sizing: border-box;
  padding: 50px;
  background-color: rgb(190,190,190);
}

/* H1s within the MAIN element */
main h1{
  color: black;
  font-size: 140%;
  margin: 20px 0px 20px 0px;
  padding: 5px 10px 5px 10px;
  border: 2px black solid;
  display: inline-block;
}

/* H2s within the MAIN element */
main h2{
  color: black;
  font-size: 120%;
  margin: 20px 0px 20px 0px;
  padding: 5px 10px 5px 10px;
  border: 2px black solid;
  display: inline-block;
}

/* ULs within the MAIN element */
main ul{
  margin-left: 5%;
}

/* OLs within the MAIN element */
main ol{
  margin-left: 6%;
}

/* LIs within ULs within the MAIN element */
main ul li{
  list-style-type: square;
}

/* LIs within OLs within the MAIN element */
main ol li{
  list-style-type: decimal;
}

/* IMG elements within the MAIN element */
main img{
  display: inline-block;

  border-width: 4px;
  border-color: black;
  border-style: solid;
  padding: 10px 10px 10px 10px;
  margin: 10px;
}

/* Target for the following: blog/index.html*/
/* MAIN element with ID attribute of #main-blog */
#main-blog{
  width: 100%;
}

/* Target for the following: blog/if-statements-beginners-guide.html */
/* MAIN element with ID attribute of #main-if */
#main-if{
  width: 100%;
}

/* Target for the following: blog/ac-new-horizons-beginners-guide.html */
/* IMG element with ID attribute of #main-acnh-img */
#main-acnh-img{
  float: left;
  margin: 30px;
}

/* Target for the following: web-programming-worksheets/index.html */
/* MAIN element with ID attribute of #main-worksheets */
#main-worksheets{
  width: 100%;
}

/* Target for the following: web-programming-worksheets/index.html */
/* P element with CLASS attribute of .worksheet-header */
.worksheet-header{
  color: black;
  font-size: 110%;
  margin: 20px 0px 20px 0px;
  padding: 5px 10px 5px 10px;
  border: 2px black solid;
  display: inline-block;
}

/* Target for the following: contact/index.html*/
/* MAIN element with ID attribute of #main-contact */
#main-contact{
  width: 100%;
}

/* P elements */
p{
  margin: 12px 0px 12px 0px;
}

/* PRE elements */
pre{
  background-color: gray;
  color: orange;
  
  border: 1px black solid;
  padding-top: 15px;
  margin-bottom: 15px;
}

hr{
  background-color: black;
  color: black;

  height: 2px;
  border-width: 0;
}

/* ASIDE element */
aside{
  width: 30%;
  box-sizing: border-box;
  padding: 50px;
  background-color: rgb(16,140,127);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* H1s within the ASIDE element */
aside h1{
  color: black;
  font-size: 140%;
  margin-bottom: 20px;

  border: 2px black solid;
  padding: 5px 10px 5px 10px;
}

/* LIs within ULs within the ASIDE element */
aside ul li{
  list-style-type: square;
  padding: 5px 0px 5px 0px;
}

/* ULs within ULs within the ASIDE element */
aside ul ul{
  padding: 5px 5px 5px 25px;
}

/* LIs within the ULs of ULs within the ASIDE element*/
aside ul ul li{
  list-style-type: none;
}

/* IMGs within the ASIDE element */
aside img{
  display: inline-block;

  border-width: 4px;
  border-color: black;
  border-style: solid;
  padding: 10px 10px 10px 10px;
  margin: 10px;
}

/* FOOTER element */
footer{
  background-color: rgb(124,76,7);
  color: black;
  font-size: 85%;
  flex-shrink: 0;
  padding: 10px 0px 10px 5px;
}

/* MENU BUTTON (see media query) */
#menu-button{
  display: none;
}

/* Target for the following: Image Gallery (1 - 5)*/
/* 1 */
input[type=button]{
  border:2px solid gray;
  background-color: #333333;
  border-radius: 4px;
  padding:10px;
  
  color:gray;
  font-weight: bold;

  cursor: pointer;
}
/* 2 */
#image-gallery{
  width:380px;
}
/* 3 */
#image-gallery #mainImg{
  width:100%;
  border: 2px solid #333333;
}
/* MAIN element with ID attribute of #main-img-gallery */
/* 4 */
#main-img-gallery{
  width: 100%;
}
/* H3 element with ID attribute of #caption */
/* 5 */
#caption{
  padding-bottom: 15px;
}

/* Media Query */
@media all and (max-width:800px){
  header{
    height: 44px;
  }

  header h1{
    line-height: 34px;
    padding-top: 5px;
  }

  nav{
    height: auto;
    display: none;
  }

  nav.open{
    display: block;
  }

  nav li{
    display: block;
  }
  
  #main-nav a:hover{
    background-color: rgb(202,138,17);
    transform:scale(1.075);
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
  }

  #content{
    display: block;
  }

  main, aside{
    width: 100%;
  }

  #main-blog{
    width: 100%;
  }

  #main-if{
    width: 100%;
  }

  #main-worksheets{
    width: 100%;
  }

  #main-contact{
    width: 100%;
  }

  #menu-button{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    width: 44px;
    
    text-align: center;
    line-height: 44px;
    color: black;

    cursor: pointer;
  }

  pre{
    text-wrap: wrap;
  }
}