/* FONTS */
/* @import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee+Outline&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@600&display=swap');
@font-face {
  font-family:  'Kiona';
  src:  url('/static/fonts/Kiona-Bold.woff2') format('woff2');
}

/* DOC SETTINGS */
html body{
	  overflow: none;
    background-color: black;
}
#section-gallery{
    background: #000000
    /* background-size: 250% 250%;
    animation: gradient 15s ease infinite;
    min-height: calc(100vh - 150px); */
    /* overflow: none; */
}
@keyframes gradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }  
}

a:link{
  color: white;
}
a:visited{
  color: white;
}

.btn{
  scale: 0.8;
}

/* HEADERS */
h1{
	font-family: 'Kiona';
  font-size:  1.5rem;
}

h2 {
  font-family: 'Kiona';
  font-weight: normal;
  font-style: normal;
  font-size:  2em;
  opacity: 0;
  color: #36138a;
  margin-bottom: 0;
  text-shadow:
    -1px -1px 0 #36138a,  
    1px -1px 0 #36138a,
    -1px 1px 0 #36138a,
    1px 1px 0 #36138a;
}
@media (max-width: 576px) {
  h2 {
    font-size: 1.75rem;
  }
  #myNav p{
    font-size: 0.9rem;
  }
}

h2 span {
  /* translate effect */
  position: relative;
  top: 10px;
  left: 10px;
  /* fade effect */
  opacity: 0;
}
 h3{
  font-family: 'Kiona';
 }

h4{
  font-family: 'Bungee Outline';
  font-size:  3rem;
  opacity:  0;
}

h4 span {
  /* translate effect */
  position: relative;
  top: 10px;
  left: 10px;
  /* fade effect */
  opacity: 0;
}

h6{
  font-family: 'Kiona';
  font-size: 2em;
  text-shadow:
    -1px -1px 0 #e2526b,  
    1px -1px 0 #e2526b,
    -1px 1px 0 #e2526b,
    1px 1px 0 #e2526b;
}

.bio-card{
  color: white;
  background-color: #00000048;
}

/* .bio-card p{
  color: white;
  font-size: 0.9em;
} */

p{
  font-family: 'Cabin', sans-serif;
  font-size: 1.1em;
  margin-bottom: 0;
  z-index: 1;
}

nav p {
  font-size: 1.1rem;

}
#email-link:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
#email-link:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
#email-link:hover {
  color: silver;
  background-color: transparent;
  text-decoration: underline;
}
#email-link:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
/*Navbar properties */
.navbar {
  background-color: black;
 
}
.nav-link{
  font-family: 'Kiona';
}

.navbar-dark .navbar-nav .nav-link {
    color: #778899;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: "white";
}

footer{
  background-color: black;
  height:25px;
}

footer p{
  font-size: 15px;
  color: #818181;
}

 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  height: 75vh;
  text-align: center; /* Centered text/links */
  /* margin-top: 30px; 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #f1f1f1;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #818181;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 8%;
  right: 10%;
  font-size: 100px;
  z-index: 1;
}
.overlay .videoTitle {
  position: absolute;
  top: 18%;
  color: white;
  font-size: 30px;
}
@media (max-width: 500px) {
  .overlay-content {
    top: 20%;
  }

  .overlay .closebtn {
    position: absolute;
    right: 5%;
    top: 15%;
    font-size: 60px;
    z-index: 1;
  }
  
  .overlay .videoTitle {
    position: absolute;
    top: 25%;
    color: white;
    font-size: 20px;
  }
}

/* relevant styles */
.img__wrap {
  position: relative;
  /* height: 200px;
  width: 257px; */
}

.img__description_layer {
  position: relative;
  padding-top: 2rem;
  color: #fff;
  visibility: visible;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
  z-index: 0;
}

.img__img {
    width: 100%;          /* fill container width */
    height: auto;         /* adjust height automatically */
    object-fit: contain;  /* preserve aspect ratio without stretching */
    display: block;
}


.img__wrap:hover .img__img{
  transform: scale(1.1);
  -webkit-box-shadow: 0px 0px 10px 8px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 10px 8px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 8px rgba(0,0,0,0.5);
}

.img__wrap:hover .img__description_layer {
  visibility: visible;
  transform: scale(1.1);
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4),
               0 0 20px rgba(255, 255, 255, 0.3),
               0 0 30px rgba(255, 255, 255, 0.8); /* optional color glow */
  transition: all 0.3s ease;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);
}

.img__wrap:hover .img__description {
  transform: translateY(0);
}

#logo {
  max-height: 100px;   /* limits height but still flexible */
  height: auto;       /* scales automatically */
  width: auto;        /* keeps aspect ratio */
}