/* FONTS */

@font-face {
  font-family: National Park;
  src: url('/fonts/NationalPark-VariableVF.ttf');
}
 
@font-face {
  font-family: Stranger Things;
  src: url('/fonts/StrangerThings-Regular.ttf');
}

                                                                              

/* BODY and basic page settings */

body {
  font-family: 'National Park', sans-serif;
  font-size: 140%;
  color: #000000;
  margin: 0;
  background-color: #254f3d;
  background-size: auto;
  background-image: url('/images/forest tile.jpg');
  background-repeat: repeat;
}

h1, h2, h3 {
  color: #015854;
}

h1 {
  font-size: 25px;
}

strong {
  color: #015854;
}
 
main li {
  margin-top: 20px; 
}

* {
  box-sizing: border-box;
}

                                                                                  

/* FIXES and HACKS */

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* this class can be used to center images on a page */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* used to place the sidebars and main content areas in the correct places on the page */
#flex {
  display: flex;
}

/* Order of website elements are called below */

#leftSidebar {
  order: 1;
}

main {
  order: 2;
}

#rightSidebar {
  order: 3;
}

                                                                                  

/* below this line is CSS for the layout */

/* CONTAINER */

/* the "container" is what wraps your entire website */

#container {
  max-width: 1200px;
  margin: 0 auto;
}

/* the area below is for all links on your page EXCEPT for the navigation */

#container a {
  color: #11322A;
  font-weight: bold;
  text-decoration: none;
}

#container a:hover {
  color: #0D4638;
  text-decoration: none;
}

                                                                                

/* HEADER */

/* header {
  background-color: #254f3d;
  width: 100%;
  height: 150px;
  margin: auto;
  font-size: 20px;
  background-image: url('');
  background-size: 100%;
} */

                                                                              

/* NAVIGATION */

#navbar {
  height: 70px;
  background-color: #84573F; /*light brown*/
  background-size: 120px;
  background-image: url('/images/wood tile3.jpg');
  background-repeat: repeat;
  width: 100%;
  border-radius: 8px;
  margin: 15px 0;
  filter: drop-shadow(0.2rem 0.2rem 0.2rem #222);
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  font-size: 110%;
} 

#navbar li {
  padding-top: 20px;
}

/* navigation links*/

#navbar li a {
  color: #F8CD43; /*yellow*/
  font-weight: 800;
  text-decoration: none; 
  text-shadow: 1px 0 2px #382721; /*dark brown*/
}

#navbar li a:hover {
  color: #fffbeb; /*cream*/
  text-decoration: none;
}

/* DROPDOWN MENU */
 
/* Dropdown menu code courtesy of W3Schools, and modified by yours truly~ */

#dropmenu li a {
  color: #F8CD43; /*yellow*/
  font-weight: 800;
  text-decoration: none; 
  text-shadow: 1px 0 2px #382721; /*dark brown*/
}
  
#dropmenu li a:hover {
  color: #fffbeb; /*cream*/
  text-decoration: none;
}

.dropbtn {
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
#dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  background-color: #84573F; /*light brown*/
  border-radius: 5px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #382721; /*dark brown*/
  font-size: 90%;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #A07D5B; /*tan*/
  color: #84573F; /*light brown*/ 
  border-radius: 5px;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content 
  container when the user clicks on the dropdown button) */
.show {display:block;}

                                                                              

/* MAIN */
/* this is the main content area, between the sidebars! */

main {
  flex: 4;
}

/* this div class divides up the main content area for nice visual breaks between content, and includes the background color */

.content-section {
  background-color: #fffbeb; /* cream */
  border-radius: 10px;
  padding: 30px 50px;
  margin-bottom: 25px;
  box-shadow: 2px 8px 8px rgba(0,0,0,0.7);
}

/* div class for dark mode, used on blog posts and written works in the Library */
.dark-mode {
  background-color: #333; /* dark gray */
  color: #fffbeb; /* cream */
  }
  
.dark-mode:h1, .dark-mode:h2, .dark-mode:h3, .dark-mode:strong {
  color: #fffbeb;
  }

                                                                              
 
/* ROWS and COLUMNS */
/* below here is some code for formatting the columns in the 'main' block */ 

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create equal columns that sits next to each other...just mess with the percentages to make more of them (ie, 25% = 4 columns, 50% = 2 columns) */

.column {
  flex: 25%;
  max-width: 50%;
  padding: 0 8px;
} 

/* .column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
} */

/* Responsive layout - makes a two column-layout instead of four columns...can be ignored for now, since only the two columns are needed*/

/* @media screen and (max-width: 800px) {
  .column {
  flex: 50%;
  max-width: 50%;
  }
} */

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
  flex: 100%;
  max-width: 100%;
  }
}

                                                                              

/* SIDEBARS */

/* "Aside" styles BOTH sidebars. If you want to style them separately, create styles for #leftSidebar and #rightSidebar */

/* aside {
  background-color: #4b9977;
  width: 200px;
  padding: 20px;
  font-size: smaller;
} */

/* Sidebar */

.sidebar {
    position: sticky;
    top: 40px;
    flex: 1;
    height: max-content;
    min-width: 180px;
    margin-top: 10px;
    margin-bottom: 150px;
    margin-right: 20px;
    order: 1;
    
    z-index: 2000;
    
    @media (max-width: 1200px) {
      display: none;
    }
}

.sidebar-link {
  background: #F8CD43;
  border-radius: 1.25rem;
  padding: 0.75rem;
  font-weight: bold;
  font-family: 'National Park';
  font-size: 20px;
  margin-bottom: 0.75rem;
  margin-left: 1rem;
  filter: drop-shadow(0.2rem 0.2rem 0.2rem #222);
}

.sidebar-link a {
  text-decoration: none;
  color: #015854;
  display: inline-block;
  padding: 0.5rem;
  margin: 0;
  cursor: pointer;
}

.sidebar-link:hover{
  transform: scale(1.1);
}

.sidebar-link-b {
  background: #015854;
  color: #F8CD43;
  border-radius: 1.5rem;
  padding: 0.50rem;
  font-weight: semi-bold;
  font-family: 'NationalPark-SemiBold';
  font-size: 20px;
  margin-bottom: 0.75rem;
  margin-right: 1rem;
}

.sidebar-link-b .config-item {
  @media (max-width: 1050px) {
    padding: 0;
    margin: 0;
    font-size: 16px;
    text-align: left;
  }
}

.sidebar-link-b .label {
  font-weight: 800;
}

.sidebar-link-b .label {
  display: inline-block;
  padding: 0.5rem;
  margin: 0;
}

                                                                              

/* EXTRAS */
/* Everything in this section is basically very specific styling elements for individual pages */

/* BUTTONS */
/* A button that animates when you toggle over it */

.clickable-button {
  display: inline-block;
  background: #015854;
  color: #F8CD43;
  min-width: 180px;
  border-radius: 1.5rem;
  padding: 1rem;
  font-weight: bold;
  font-family: 'National Park';
  font-size: 20px;
  text-align: center;
  filter: drop-shadow(0.2rem 0.2rem 0.2rem #222);
}

.clickable-button a {
  color: #F8CD43;
  text-decoration: none;
}

.clickable-button a:hover {
  color: #fffbeb;
  text-decoration: none;
}

.clickable-button:hover {
  transform: scale(1.1);
}

/* CAPTIONED IMAGES */
/* a couple of div classes that allows you to add captions to images, similar in style to what you'd see on a wiki page */

.captionedImg {
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 300px;
  height: auto;
}

.captionedImg img {
  max-width: 100%;
  height: auto;
}

.imgDesc {
  text-align: center;
  font-weight: normal;
  font-size: 15px;
  width: auto;
  margin: 5px;
}
  

                                                                              

/* FOOTER */

footer {
  background-color: #84573F; /*light brown*/
  width: 100%;
  padding: 1px;
  margin-bottom: 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 75%;
  box-shadow: 2px 8px 8px rgba(0,0,0,0.7);
}

                                                                              

/* MEDIA QUERY */

/* so you wanna change the width of your page? by default, the container width is 900px.in order to keep things responsive, 
take your new height,and then subtrack it by 100. use this new number as the "max-width" value below */

@media only screen and (max-width: 1100px) {
  #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;
  }
}