body {
    background-color: #FFFDC9;
}
.navbar-nav .nav-link {
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.navbar-nav .nav-link:hover {
    color: #00e1ff !important;
}
.banner-img {
    height: auto;
}
.welcome-container {
    background-color: rgba(255, 247, 0, 0.172);
}
.welcome-container h1, .about-container h1{
    color: #000000;
    font-family: 'Slackey';
    font-size: 60px;
    line-height: 65px;
}
.welcome-container p, .facts-p, .about-container p {
    color: #000000;
    font-size: 18px;
    font-family: Poppins, sans-serif;
}
.location-section, .facts-section {
    background-color: #9BFFF7;
    padding: 30px;
}
.title {
font-family: 'Slackey';
background-color: #FFF700; 
font-size: 33px; 
}
.location-card {
  width: 70%;     
  padding-bottom: 70%; 
  overflow: hidden;
  position: relative;
  margin: auto;
  transition: transform .2s, box-shadow .3s;;
}
.location-card:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.236);
}
.location-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-caption {
    font-family: 'Slackey';
    font-size: 19px;
}
.char-section, .loc-section, .about-section{
    background-color: rgba(255, 247, 0, 0.172);
}
.character-card {
  width: 84%;
  padding-bottom: 84%;
  overflow: hidden;
  position: relative;
  margin: auto;
  transition: transform .3s, box-shadow .3s;
}
.character-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}
.character-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
}
.card-caption {
  margin-top: 5px;
}
.desc {
    font-family: Poppins, sans-serif;
    font-size: 15px;
    line-height:28px;
}
.char-img, .loc-img {
    width:60%;
    height:60%;
}
@media (max-width: 900px) {
    .welcome-container h1, .about-container h1{
        font-size: 27px;
        line-height: 35px;
        text-align: center;
    }
    .welcome-container p, .facts-p .about-container p{
        font-size: 14px;
    }
    .title {
        font-size: 20px;
    }
    .location-card {
        width: 65%;
        padding-bottom: 65%; 
    }
    .character-card {
        width: 70%;
        padding-bottom: 70%;
    }
    .char-img, .loc-img{
        width: 50%;
        height: 50%;
    }
}