/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #EFC5E6;
  color: white;
  font-family: "fuzzy bubbles", Verdana;
  display: flex;
  justify-content: center;
}

aside {
  background-color: #7A4679;
  color: white;
  font-family: "fuzzy Bubbles", serif;
  width: 22%;
  padding-left: 15px;
  margin-left: 3px;
  padding-right: 10px;
  float: right;
 box-shadow: 5px 5px 10px -6px #350A34;
  border: 7px;
  border-left-color: #B079AE;
  border-right-color: #623161;
  font-style: italic;
  border-radius: 41px 0px 34px 32px / 0px 0px 42px 42px;
}

header {
 background-color: #D2A5CE;
 font-family: "Oregano", serif;
 padding: 6px;
 margin: 3px;
}

/*Navigation bar */

nav {
  background-color: #733344;
  font-family: "Oregano", serif;
  font-size: 30px;
  text-transform: uppercase;
  border: 3px;
  border-color:#42063E;
  border-radius: 5px; 
  padding-top: 2px;
  padding-bottom: 15px;
  margin: 5px;
  padding: 5px;
  overflow: hidden;
}



.libar {
  float: left;
  display: block;
  text-align: center;
  padding-bottom: 16px;
  margin-left: 7%;
}

.libar a {
   color: white;
   text-decoration: none;
}

li a:hover {
  color: #111111;
}

marquee{
 background: #733344;
 border-top: 2px dashed purple;
 border-bottom: 2px dashed purple;
}

footer {
  background-color:#e49bd4;
  position:fixed;
  bottom: 0px;
  font-size: 11px;
  border-top: 2px solid #d973c3;
}
/*Recipe Cards*/
.newcard  {
  background-color:#7A4679;
  border: 2px solid purple; 
  border-radius: 5px;
  max-width: 850px;
  padding: 15px;
  box-shadow: #7A4679 0px 4px 4px;
  
}

/*containers*/

.container {
  width: 1200px;
  max-width: 95%;
  border-radius: 4px; 
  border: 2px dotted #7A4679;
  overflow: auto;
  padding: 15px;
  background: #C972B6;
}

.listbox-1 {
background: #7A4679;
box-shadow: 0px -4px 7px  #422441;
border: 2px solid #422441;
border-radius: 5px;
padding: 10px;
color: white;
}
.listbox-1 h3 {
color: #EFC5E6;
}
.listbox-1 h4 {
color:  #EFC5E6;
}

 .list-box1 h5 {
color:  #EFC5E6;
}

.list-box2 {
background: #660061;
box-shadow: 0px 5px 25px #4a1c48;
border: 3px solid #4a1c48;
border-radius: 25px;
padding: 10px;
color: white;
}

.listbox-2 h3 {
color: pink;
}
 .list-box2 h4 {
color:  pink;
}
 .listbox-2 h5 {
color:  pink;
}

 .listbox-2 b {
color:pink;
}

 .listbox-3 {
background: #f1daf1;
box-shadow: 5px -4px 7px #e3b5e3; 
border: 2px solid #e3b5e3;
border-radius: 5px;
padding: 10px;
color: black;
}
.listbox-3 h3 {
color: #943894;
}
 .listbox-3 h4 {
color:  #943894;
}

.listbox-3 h5 {
color:  #943894;
}

.dark-box {
background: #389485;
box-shadow: inset 0px 0px 10px #DCC287;
border: 2px solid #362008;
border-radius: 25px;
padding: 15px;
margin: 10px;
overflow: auto;
filter: saturate(30%);
transition-duration: .8s;
}
.user-css .dark-box h3 {
color: tan;
}
.user-css .dark-box:hover {
filter: saturate(90%);
box-shadow: 0px 0px 15px #1d212e;
transition-duration: .8s;
}

.user-css .dark-box {
color: white;
}
.user-css dark-box b {
color: tan;
}


.user-css .darkb-box {
background: #040841;
box-shadow: 0px 0px 10px #bdd7d082;
border: 2px outset#362008;
border-radius: 5px;
padding: 10px;
}
.user-css .darkb-box  {
color: white;
}
.user-css .darkb-box h3 {
color: #f4e0a5;
}


/*Starlight Stories  */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #733344;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* 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) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}


/* Fonts */

.oregano-regular {
  font-family: "Oregano", cursive;
  font-weight: 400;
  font-style: normal;
}

.fuzzy-bubbles-regular {
  font-family: "Fuzzy Bubbles", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fuzzy-bubbles-bold {
  font-family: "Fuzzy Bubbles", sans-serif;
  font-weight: 700;
  font-style: normal;
}