/* :root{
    --main-bg-color: #fff;
    --main-text-color: #000;
    --topnav-bg-color: #2d3142;
    --topnav-text-color: #fff;
} */

/* body{
background-color: var(--main-bg-color);
color: var(--main-text-color)
} */

.topnav {
padding:5;
/* background-color: var(--topnav-bg-color); */
}

.topnav nav{
width: 100%;
}

.topnav ul{
list-style: none;
padding: 0;
}

.topnav a{
text-decoration: none;
/* color: var(--main-text-color); */
}

.main {
padding: 0px;
/* background-color: var(--main-bg-color); */
height: 100%;
}

.main h1{
font-size: 3rem;
font-weight: 400;
}

.container-fluid {
padding:0%;
}

.navbar-nav {
width: 100%;
}

/* Small responsive carousel */
.carousel-small {
  max-width: 360px;
}

.carousel-small .carousel-item img {
  height: 15vh;
  object-fit: cover;
}

@media (min-width: 576px) {
  .carousel-small .carousel-item img {
    height: 18vh;
  }
}

@media (min-width: 768px) {
  .carousel-small .carousel-item img {
    height: 20vh;
  }
}

@media (min-width: 1200px) {
  .carousel-small .carousel-item img {
    height: 22vh;
  }
}

/* Make it clear images are clickable and constrain modal image */
.carousel-small img {
  cursor: zoom-in;
}

.modal-img {
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}