/* header */
/* navigation */
.current {
  color: #ebd2a2 !important;
}

:root {
  --main-bg-color: #FFE7EC;
  --primary-accent-color: #fcb77a;
  --secondary-accent-color: #faffc0;
  --tertiary-accent-color: #c0ffe4;
  --tertiary-accent-color-dark: #a8dfc8 ;
  --link-solid-color: black;
  --link-standout-color: #faffc0;
  --link-standout-highlight: #c0ffe4;
  color: black;
}

ul.nav {
  background-color: #946658;
  margin: 0;
  padding: 0;
  border-style: outset;
  border-width: thick;
  border-color: #a8dfc8;
}

nav li {
  float: center;
  font-size: 1em;
}
nav li a, nav .dropbtn {
  display: inline-block;
  color: var(--link-solid-color);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1em;
}
nav li a:hover, nav .dropdown:hover .dropbtn {
  background-color: var(--secondary-accent-color);
}
nav li.dropdown {
  display: inline-block;
}
nav .dropdown-content {
  display: none;
  position: absolute;
  /*background-color: #f9f9f9;*/
  background-color: var(--tertiary-accent-color);
  min-width: 160px;
  box-shadow: 0px 8px 16px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
nav .dropdown-content a {
  color: var(--link-solid-color);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
nav .dropdown-content a:hover {
  background-color: var(--tertiary-accent-color-dark);
}
nav .dropdown:hover .dropdown-content {
  display: block;
}

/* body */
body {
  background-color: #c7877f;
  background-image: linear-gradient(180deg, #c7877f 25%, #d3a38a 85%, #ebd2a2 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  max-width: 65%;
  margin: auto;
  text-align: center;
  border-left-style: solid;
  border-right-style: solid;
  border-width: thick;
  border-color: #946658;
}

html {
  height: 100dvh;
}

#page-container {
  position: relative;
  min-height: 100vh;
  background-color: #ffebb0;
  margin: 0;
}

/*Grid */
.item1 {
  grid-area: header;
}

.item2 {
  grid-area: menu;
}

.item3 {
  grid-area: main;
}

.item4 {
  grid-area: right;
}

.item5 {
  grid-area: footer;
}

.grid-container {
  display: grid;
  grid-template-areas: "header header header header header header" "menu main main main main right" "menu footer footer footer footer footer";
  grid-gap: 10px;
  padding: 10px;
}

.grid-container > div {
  background-color: #faffc0;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border-style: dashed;
  border-color: #c7877f;
}

.left-menu-container {
  text-align: left;
}

.footer-container {
  text-align: right;
}

/* Bunny Project sub grid */
.book-container {
  background-color: #faffc0;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border-style: solid;
  border-color: #c7877f;
}

/* Goat grid for bunny page
.articlegrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 25px;
}

.col1 {
    grid-column: 1 / 2;
}

.col2 {
    grid-column: 2 / 3;
}
*/
/* Shelf */
.card {
  position: relative;
  display: inline-block;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

/* footer */
ul {
  list-style-type: none;
}

img {
  height: auto;
  max-width: 100%;
  margin-top: 0rem;
  margin-bottom: 2.5rem;
}

/*# sourceMappingURL=styles.css.map */