album.css

#myVideo {
  display: none;;
  position: fixed;
  right: 0;
  bottom: 0;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}


body {
  
    font-family: "Nunito", sans-serif;
    background: rgb(255, 255, 255);
}

#mainNavbar{
  font-family: Times NEw Roman;
  background-color: black;
}

#mainNavbar .nav-link {
font-size: 1.3rem;
    color: white;
    height: 2.7em;
}


.active{

    background-color: #F92C41;
}

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#title{
  color: rgb(209, 212, 12);
  text-shadow: 0px 2.2px rgb(5, 5, 5),
               /*0px 4px orange,*/
               0px 3px black;

               /*/*0px 5px black;*/
  font-size: 2.7rem;
font-family: 'Poller One', cursive;
}


.animate__animated.animate__zoomIn{
  --animate-duration: 5s;
}
.animate__animated.animate__fadeInLeft{
  --animate-duration: 2.2s;
}
.animate__animated.animate__fadeInRight{
  --animate-duration: 2.2s;
}



#footer{
  background-color: rgb(255, 255, 255);
  position: absolute;
  bottom: 0;
  width: 100%;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.flip-box {
  background-color: transparent;
  width: 22rem;
  height: 12.5rem;
  
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
#card-body{
  color: black;
}

hr{
  height: 1px;
  border-width:0;
  background-color: rgb(60, 204, 3);
}

#card-title{
  font-weight: bold;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}