:root {
  --titleFont: "Cinzel", serif;
  --bs-body-font-size: 100%;

  --title-font-size: 8rem;
  --title-font-size-2: 4rem;
}

html {
  font-size: var(--bs-body-font-size) !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: var(--titleFont);
}

.vheight-100 {
  height: 100vh;
}

.navbar {
  --bs-navbar-brand-font-size: 2rem;
}

.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  font-family: var(--titleFont);
  text-decoration: none;
  white-space: nowrap;
}


h1.special {
  font-size: var(--title-font-size);
  text-shadow: 0 5px 10px black;
}

h2.special {
  font-size: var(--title-font-size-2);
  text-shadow: 0 5px 10px black;
}

.bckg-overlay-black::before {
  content: '';
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0, 0.1);
}

.bckg-black-gradient-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 90%);
  z-index: -1;
}


#three-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -100;
}


#three-container canvas {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -100;
}

#divider {
height: 2px;
width: 80%;
background: blue;
background: linear-gradient(90deg, hsl(0, 0%, 0%), hsl(0, 0%, 30%), hsl(0, 0%, 100%));
}

    /* Masonry Gallery Container */
  .masonry-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    margin: 20px;
  }

  /* Individual Item Styling */
  .masonry-item {
      position: relative;
      padding:0!important;
      margin: 10px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* Ensure consistent size and fit for videos and images */
  .masonry-media {
      width: 100%;
      height: 100%;
      object-fit: contain;  /* Ensures consistent aspect ratio for images/videos */
      border-radius: 10px;
      display: block;
  }

  /* Ensure all media items are responsive */
  img.img-fluid, video.img-fluid {
      width: 100%;
      height: auto; /* Keep aspect ratio */
      border-radius: 10px;  /* Rounded corners */
      display: block; /* Prevents inline spacing */
  }
  /* Add hover effect for items */
  .masonry-item:hover {
      transform: scale(1.05);
      transition: transform 0.3s ease-in-out;
  }

  .avatar-home {
    width: 50%;
    margin: 5rem  auto;
    display: block;
  }
  
@media (max-width: 575.98px) {



}

@media (max-width: 767.98px) {
  :root {

  }
}

@media (max-width: 991.98px) {
  * {
    text-align: center;
  }

  :root {
    --title-font-size: 4rem;
    --title-font-size-2: 2rem;
    
  }

  .vheight-100 {
    height: fit-content;
  }

  .avatar-home {
    width: 50%;
    margin: 5rem  auto;
    display: block;
  }
}

@media (max-width: 1199.98px) {
  :root {

  }
}

@media (max-width: 1200px) {
  :root {

  }
}