.photocopy-effect
{
    position:fixed;
    inset: 0;

    background:url("graphics/photocopyTexture.jpg") repeat;

    opacity:0.3;
    mix-blend-mode: screen;
    pointer-events:none;

    z-index:9999;
}

body {
  margin: 0;
    
  padding-top: 1vw;

  background-color: rgb(17, 17, 17);
    
 animation: fadeIn 1s ease-in ; 


}
.photos-parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto,auto;
grid-column-gap: 1vw;
grid-row-gap: 1vw; 
}

.navbar-area { 
  grid-area: 1 / 1 / 2 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7vw;
}

.navbar-area img{

  margin-left: -15vw;
  height: 10vw;
}

.navbar-buttons
{
  display: flex;
  flex-direction: column;
}

.navbar-text
{

  text-decoration: none;
  color: rgb(200, 0, 255);
  font-size: 3vw;
  font-weight: bolder;
  text-shadow:
    1px 0 currentColor,
   -1px 0 currentColor,
    0 1px currentColor,
    0 -1px currentColor,
    1px 1px currentColor,
   -1px -1px currentColor,
    1px -1px currentColor,
   -1px 1px currentColor;
}

.navbar-text:hover
{
  color: rgb(111, 255, 0);

}

.navbar-home-text
{
  text-decoration: none;

  transform:scale(2,4);
  font-size: 3vw;
  color: rgb(200, 0, 255);
  font-weight: bolder;
  text-shadow:
    1px 0 currentColor,
   -1px 0 currentColor,
    0 1px currentColor,
    0 -1px currentColor,
    1px 1px currentColor,
   -1px -1px currentColor,
    1px -1px currentColor,
   -1px 1px currentColor;
   
}



.navbar-home-text:hover
{
    color: rgb(93, 203, 9);

}

.sub-options-area{
  grid-area: 2 / 1 / 3 / 7;
  display: flex;
  justify-content: center;
  gap: 10vw;
  border: 5px solid rgb(200, 0, 255);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 10vw;
  margin-right: 10vw;
  
}

.sub-options-area-text
{
  color: rgb(200, 0, 255);
  font-size: 3vw;
  font-weight: bolder;  
  text-shadow:
    1px 0 currentColor,
   -1px 0 currentColor,
    0 1px currentColor,
    0 -1px currentColor,
    1px 1px currentColor,
   -1px -1px currentColor,
    1px -1px currentColor,
   -1px 1px currentColor;
}


.photos-gallery{
  grid-area: 3/ 2 / 5 / 6;
  column-count: 3;
  
  



}

.photos-gallery img
{
  width: 100%;
  height: auto;

  
}

.lightbox-background
{
  
  position: fixed;
  z-index: 100;
  background-color: rgb(38, 72, 172);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 200ms ease-in-out;
}

.lightbox-background.active
{
  
  opacity: 1;
  pointer-events: all;
}

.lightbox-flex
{
  padding: 5%;
  display: flex;
  gap: 2vw;
  align-items: center;
  justify-content: center;
}

.lightbox-text
{
  font-size:3vw;
  color: rgb(0, 0, 0);
  font-weight: bolder;
  text-align: center;
  letter-spacing: -0.06cap;
  text-transform: uppercase;
    text-shadow:
    1px 0 currentColor,
   -1px 0 currentColor,
    0 1px currentColor,
    0 -1px currentColor,
    1px 1px currentColor,
   -1px -1px currentColor,
    1px -1px currentColor,
   -1px 1px currentColor;
   width: 30%;
}

.lightbox-background-image
{
  
  max-width: 60vw;
  max-height: 80vh;
  border: 7px solid rgb(0, 0, 0);

}

.lightbox 
{
  cursor: pointer;
  position: relative;

  margin-bottom: 1vw;
  
  
}

.lightbox::before
{
  
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  transition: all 255ms ease-in-out;
}






.lightbox-image
{
  width: 10%;
  height: 10%;
  display: block;
  
}

.lightbox:hover .lightbox-image
{ 
  
  transform:scale(1.03) ;

}


.tooltip{
    position:absolute;

    font-size: 1vw;
    font-weight: bolder;
    text-align: center;
    text-transform:lowercase;

    top: -10%;
    left:50%;
    transform:translateX(-50%);

    width:30%;

    padding:1vw;

    background:rgb(0, 0, 0);
    color:white;

    border-radius:3px;

    opacity:0;
    visibility:hidden;

    transition:.2s;

    z-index:10;

    pointer-events:none;
    box-shadow: 0 3px 12px rgba(80, 80, 80, .8);
}

.lightbox:hover .tooltip{
    opacity:1;
    visibility:visible;
}


  @keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}