@charset "utf-8";


#zero {
    /* height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: auto;
	margin: auto; */

    height: auto;
    width: auto;
    max-width: 300px;
    margin: auto;
    object-fit: cover;

}

#one {
    /* height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: auto;
	margin: auto; */

    height: auto;
    width: auto;
    max-width: 500px;
    margin: auto;
    object-fit: cover;

}

#two {
    /* height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: auto;
	margin: auto; */

    height: auto;
    width: auto;
    max-width: 600px;
    margin: auto;
    object-fit: cover;

}

#three {
    /* height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: auto; */

    height: auto;
    width: auto;
    max-width: 442px;
    margin: auto;
    object-fit: cover;

}


figure {
    margin: 1px;
}

img {
    margin: 0 10px 0 10px;
    width: 200px;

}

figcaption {
    width: 200px;
    margin: 0 0 30px 10px;
    /* align-self: auto; */
    text-align: center;
}

#AllBooks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#thumbnails {
    display: block;
    margin-left: 7%;
    margin-right: auto;
    margin-top: 5em;

}

#carouselExampleControls {
    margin-top: 20px;
    height: 550px;
}

.Cards .card-group {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    max-width: 100%;
}

.Cards .card-group .card {
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

.card-group .card img {
    height: auto;
    width: auto;
    max-width: 100%;
}



.card-group .card .card-body {
    background-color: black;
}



.card-body .card-text {
    color: white;
}

.card .card-body .card-title {
    color: white;
}

#CardsArea {
    /* visibility:hidden;
    visibility: collapse;
    height: 0px; */
    display: none;
    /* we are hidding the CardsArea */
}

.navBtn {
    padding: .5em;
    border-radius: 1em;
  }
  
  .navChoice {
    padding: .5em;
    border-radius: 1em;
    margin: .5em;
    max-width: fit-content;
    text-align: center;
  }
  
  .active {
    background-color: black;
  }

  .navbar-brand:hover {
    background-color: gray;
  }
  
  .navChoice:hover {
    background-color  : gray;
  }