.jumbotron {
  margin: 0%;
  height: 600px;
  background-image: url(img/banner.png);
  background-size: cover;
  background-position: center;

  text-shadow: 2px 2px 10px rgb(141, 5, 5);
}

.books {
  background-color: hsl(194, 30%, 70%);
  background-image: linear-gradient(
      180deg,
      rgba(0, 47, 85, 0.8) 0%,
      rgba(51, 121, 162, 0.5) 30%,
      rgba(0, 84, 255, 0) 58%
    ),
    url(img/Wavestexture2.jpg);
  background-size: cover;
}

.paperbg {
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 84, 255, 0) 5%
    ),
    url(img/whitepaper.jpg);
    background-size: 20%;
}

.navbar {
  background-color: rgb(227, 161, 39) !important;
  background: linear-gradient(
    90deg,
    rgba(244, 188, 25, 0.3) 0%,
    rgba(247, 140, 0, 0.515) 50%,
    rgba(244, 188, 25, 0.3) 100%
  ), url(img/yellowtexture.png);
}
.navbar-brand {
  text-shadow: 2px 2px 3px rgb(141, 5, 5);
}

.comic-neue-bold {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: normal;
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.text-coral {
  color: #f0ad30 !important;
}

.alan-quote {
  font-size: 1.5rem;
}

.footer-icons i {
  font-size: 1.5rem;
}
.footer-icons a {
  margin: 0 10px;
  transition: color 0.3s;
}
.footer-icons a:hover {
  color: #007bff;
}


/*CSS for flip cards*/

.custom-card-container {
  perspective: 1000px;
}
.custom-card {
  width: 100%;
  height: 200px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  position: relative;
  border: 0;
}
.custom-card.flipped {
  transform: rotateY(180deg);
}
.custom-card-front,
.custom-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #13304d;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}
.custom-card-front {
  background-color: #f8f9fa;
}
.custom-card-back {
  background-color: #13304d;
  color: white;
  transform: rotateY(180deg);
}