/* 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: #11322A;
}

h1 {
  font-size: 25px;
}

strong {
  color: #11322A;
}
 
main li {
  margin-top: 10px; 
  padding-bottom: 10px;
}

* {
  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;
}

/* this div class can be attached to <img> to make pixel art crisp! */
  
.pixel {
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
      }

/* 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: 900px;
  margin: 0 auto;
  display: block;
}

/* 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: 1;
}

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

.content-section {
  display: block;
  flex: 1;
  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;
}

/* .dark-mode h1, h2, h3, strong {
  color: #F8CD43;
} */

                                                                              
 
/* 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: 50%;
  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;
} */

                                                                              

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

/* "Cards" to display content on the Library page */
.libraryCard { 
  display: block;
  overflow: auto;
  background-color: blanchedalmond;
  border-radius: 1em;
  box-shadow: 3px 3px 5px rgba(49, 77, 80, 0.5);
  padding: 15px;
  margin: 25px;
  text-align: left;
}

.libraryCard img {
    object-fit: contain;
    display: inline;
    width: 15%; 
    height: auto;
    float:left;
    margin:20px 20px 30px 20px;
    border-radius:0.5em;
    border: 1px solid #000;"
}

.libraryTitle {
    margin-bottom: 0px;
}

.libraryDate {
    font-size: 85%;
    margin-top: 2px;
    margin-bottom: 10px;
}

/* TOGGLEABLE HEADINGS */
/* Style the button that is used to open and close the collapsible content */
.button, .collapsible {
  background-color: transparent;
  font-family: 'Bean Burrito';
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  color: #000000;
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.button, .active, .collapsible:hover {
  color: #00736d;
}

.button, .collapsible:after {
  content: '\25BC'; /* Unicode character */
  color: #000000;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\25B2"; /* Unicode character */
}

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

/* A button to go at the bottom of blog posts that takes you back to the 'Blog' home page */

.clickable-button {
  display: inline-block;
  background: #015854;
  color: #F8CD43;
  border-radius: 1.5rem;
  padding: 1rem;
  font-weight: bold;
  font-family: 'NationalPark';
  font-size: 20px;
  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);
}

/* CLICKABLE IMAGES */
/* a simple div class that can be added to images that are also clickable links! */

.clickableImg: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;
}

/* CHARACTER ICONS */
/* basic styling for character icons that appear in visual lists of OCs */

.icon {
      width: 120px;
      height: 120px;
      border-radius: 8px;
      margin: 5px;
    }
    
    .icon:hover {
      transform: scale(1.1);
    }


/* 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: 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;
  }
}