*{
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}

body{
    min-height: 100vh;
    margin: 0;
}

a{
    text-decoration: none;
    color: inherit;
}


/*
COLOR PALETTE

Fire Red - #d23d2d

Vanilla Cream - #f8eecb

Retro Green - #31603d

Saffron - #f5c065

Russet - #6e433d

*/

.benguiat-pro-ITC-book-condensed{
    font-family: "itc-benguiat-condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.sofia-pro-regular{
    font-family: "sofia-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.sofia-pro-black{
    font-family: "sofia-pro", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.container{
    height: 150vh;
    display: flex;
    flex-direction: column;
    background-color: #f8eecb;
}

.box-1{
    height: 10%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}



.buttons{
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 25px;
}

.dropdown-1{
    width: 6%;
    position: relative;
    display: inline-block;
}

.dropbtn-1 {
  background-color:#31603d;
  color: #f8eecb;
  padding: 16px;
  font-size: 14pt;
  border: none;
  width: 100%;
  border-radius: 50px;
}

.dropdown-content-1 {
  display: none;
  position: absolute;
  background-color: #31603d;
  min-width: 160px;
  border-radius: 15px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content-1 a {
  color: #f8eecb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content-1 a:hover {background-color: #f5c065;
color: #6e433d;
border-radius: 15px;}

.dropdown-1:hover .dropdown-content-1 {display: block;}

.dropdown-1:hover .dropbtn-1 {background-color: #f5c065;
color: #6e433d;}



.dropdown-2{
    width: 7%;
    position: relative;
    display: inline-block;
}

.dropbtn-2 {
  background-color:#31603d;
  color: #f8eecb;
  padding: 16px;
  font-size: 14pt;
  border: none;
  width: 100%;
  border-radius: 50px;
}

.dropdown-content-2 {
  display: none;
  position: absolute;
  background-color: #31603d;
  min-width: 160px;
  border-radius: 15px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content-2 a {
  color: #f8eecb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content-2 a:hover {background-color: #f5c065;
color: #6e433d;
border-radius: 15px;}

.dropdown-2:hover .dropdown-content-2 {display: block;}

.dropdown-2:hover .dropbtn-2 {background-color: #f5c065;
color: #6e433d;}


.button-3{
    width: 7%;
    position: relative;
    display: inline-block;
}

.contact {
  background-color:#31603d;
  color: #f8eecb;
  padding: 16px;
  font-size: 14pt;
  border: none;
  width: 100%;
  border-radius: 50px;
}

.button-3:hover .contact{background-color: #f5c065;
color: #6e433d;}

.home-btn{
  width: 3%;
  right: 1%;
  position: absolute;
  display: inline-block;
}


.box-2{
    height: 90%;
    display: flex;
    flex-direction: column;
}


.row-1{
  height: 33%;
  display: flex;
  flex-direction: row;
  padding: 25px;
  gap: 20px;
  justify-content: space-evenly;
}

.rabble-image{
  width: 90%;
}

.book-1{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-2{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-3{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-4{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-5{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.row-2{
  height: 33%;
  display: flex;
  flex-direction: row;
  padding: 25px;
  gap: 20px;
  justify-content: space-evenly;
}



.book-6{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-7{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-8{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-9{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-10{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row-3{
  height: 33%;
  display: flex;
  flex-direction: row;
  padding: 25px;
  gap: 20px;
  justify-content: space-evenly;
}

.book-11{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-12{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-13{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-14{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-15{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}