@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=IM+Fell+English:ital@0;1&display=swap');

body {
  /*library background code*/
  background-image:  url("https://ambers-sunroom.neocities.org/vecteezy_wooden-brown-empty-cupboard-with-shelves-clipart-on_26844821.png"), url("https://ambers-sunroom.neocities.org/pexels-phat-tr-ng-1662052981-37302575.jpg")  ;
  background-size:  70%, cover;
  background-attachment: fixed;
  min-height: 100vh;
  position: fixed, relative;
  background-repeat: no-repeat, repeat;
  opacity: .9, 1;
  background-position: -150px -30px  ,  center;
  
  /*fonts and cursor*/
  font-family: "IM Fell English", serif;
  cursor: url("https://ambers-sunroom.neocities.org/leaf_.png"), auto;
  
  

}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cinzel", serif;

}

/*keep cursor when hovering*/
a:hover {
 cursor: url("https://ambers-sunroom.neocities.org/leaf_.png"), progress !important;
}

body::before {
  
  content: "";
  position: fixed;
  inset: 0;        
  z-index: -1;     /* puts the GIF behind  website content */
  
  background-image: url("https://ambers-sunroom.neocities.org/Vine-Border-Lush-Decorative-Vine-Frame-PNG.png");
  background-size: 300px 300px;
  background-repeat:no-repeat;
  opacity: 0.7;    
  
  pointer-events: none; 



}

body::after{
    content: "";
  position: fixed;
  inset: 0;        
  z-index: -1;     /* puts the GIF behind  website content */
  
    background-image: url("https://ambers-sunroom.neocities.org/Vine-Border-Lush-Decorative-Vine-Frame-PNG.png");
    background-size: 300px 300px;
    background-repeat:no-repeat;
    opacity: 0.7;    
  
    pointer-events: none; 
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH, 0;
    -ms-filter: "FlipH";
}

#navlinks {
  list-style-type: none;
  margin-bottom: 25px;
  padding: 0;
  background-color: #1B3021;
  display: flex;
  justify-content: center;
  width: 80%;
  margin-left: auto;
  margin-right:auto;
  border-radius: 8px;
  gap: 100px;                


}
  
#navlinks li active {
  background-color: #04AA6D;
}


#navlinks li a {
  display: block;
  color: white;
  padding: 11px;
  text-decoration: none;
  font-size: 18px;
  transition: transform 0.2s ease;
}

#navlinks li a:hover {
  background-color: #111;
  text-decoration: underline;
  transform: scale(1.1);
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 600px;
  margin-left: 50em;
  margin-top: 10em;
  align-items: center;

}

.box > * {
  padding-left: 10px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: #A5C7B2;
  overflow: auto;
  height: 200px;
  width: 400px;
  text-align: center;     


}

/*#head {*/
/*  margin-left:auto;*/
/*  margin-right:auto;*/

/*}*/


.favs {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 2px;
  margin-right: 50em;
  margin-bottom: 500em;
  align-items: center;
  gap: 1px;

}

/*why the hell is there space btwn head and nav that i cant close - fix this!!!*/
/*also fix flex - favs class is showing under the box class. combine?*/
#genrenavtext {
  list-style-type: none;
  padding: 0;
  background-color: #BFD9C9;
  opacity:0.8;
  display: flex;
  justify-content: center;
  width: 30em;
  margin-left: auto;
  margin-right:auto;
  border-radius: 8px;
  gap: 50px;                


}
  
#genrenavtext li active {
  background-color: #04AA6D;
}


#genrenavtext li a {
  font-style:italic;
  display: block;
  color: #546159;
  padding: 5px;
  text-decoration: none;
  font-size: 18px;
  transition: transform 0.2s ease;
}



#genrenavtext li a:hover {

  text-decoration: underline;
}

.genrenav{
  margin:0;
  padding:0;
}


#HOF {
  color: #A5B2A1;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 50px;

}