:root {
  --white-100: hsl(206, 5%, 100%);
  --white-200: hsl(206, 5%, 90%);
  --white-300: hsl(206, 5%, 80%);
  --white-400: hsl(206, 5%, 65%);
  --white-500: hsl(206, 5%, 45%);

  --black-100: hsl(210, 20%, 10%);
  --black-200: hsl(210, 20%, 8%);
  --black-300: hsl(210, 20%, 6%);
  --black-400: hsl(210, 20%, 4%);
  --black-500: hsl(210, 20%, 1%);
}
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
body {
  background: black;
}
#home_div{
  overflow: hidden;
}
#year_div{
  overflow-y: auto;
  overflow-x: hidden;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

#about_card{
  height: 450px;
}
.PageTitle{
  font-size: 4.5rem;
  color: white !important;
  font-family: "Special Elite", serif;
  font-weight: 400;
  font-style: normal;
}

a {
  color: #f8f5f0 !important;
  background-color: transparent;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: red;
  background-color: transparent;
  transform: scale(1.1);
}


.grid-gallery{
  width: 100%;
  margin: 20px auto;
  columns: 4;
  column-gap: 20px;
}
.grid-gallery .grid-item{
  width: 100%;
  margin-bottom: 10px;
  break-inside: avoid;
}

.grid-gallery .grid-item img{
 max-width: 100%;
  border-radius: 15px;
}

.carousel-size{
  width: 1024px;
  height: auto ;
  padding: 5vh;
}

@media (max-width: 1200px) {
  .grid-gallery {
  width: calc(100% - 40px);
    columns: 3;
  }
}
@media (max-width: 768px) {
  .grid-gallery {
    columns: 2;
  }
  .carousel-size{
    width: 512px;
    height: auto ;
    padding: 2vh;
  }
}
  @media (max-width: 480px) {
    .grid-gallery {
      columns: 1;
    }
    .carousel-size{
      width: 256px;
      height: auto ;
      padding: 1vh;
    }
    .PageTitle{
      font-size: 2.5rem;
      color: white !important;
      font-family: "Special Elite", serif;
      font-weight: 400;
      font-style: normal;
    }
  }