html{
  height: 100%;
  scroll-behavior: smooth;
}
body{
  height: 100%;
}
.grid{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
 
}
body{
  
  width: 100%;
  height: 100%;
  margin: 0;
  
    animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in ease ease-out;
  animation-duration: 0.4s;
  background-color: rgb(0, 0, 0);
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.realimage{
  width: 100%;
  height: 100%;
 grid-column: 1 / 4; /* Span all columns */
  grid-row: 1 / -1;    /* Span all rows */
  width: 100%;         /* Ensure it fills the cell */
  height: 100%;        /* Ensure it fills the cell */

}


.imagediv{
  grid-column: 1 / -1; /* Span all columns */
  grid-row: 1 / -1;    /* Span all rows */
  width: 100%;         /* Ensure it fills the cell */
  height: 100%;        /* Ensure it fills the cell */
  object-fit: cover;   /* Optional: keeps the image aspect ratio while covering the area */
  position: fixed;
  z-index: -1;
}



.wrappergrid{
  display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr  ;
}

  


  

  




#middlecontainer{
  border: solid rgba(249, 249, 249, 0.929);
  justify-content: center;
 backdrop-filter: blur(10px);
  grid-column: 2;
  grid-row: 2;
  
  align-items: center;
  height: 500px;
  background-color: rgba(0, 0, 0, 0);
  width: 806px;
  align-self: center;
  justify-self: center;
  border-radius: 20px;
  color: inherit;  


  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
 
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.textinside{
 
align-self: center;
justify-self: center;
font-size: 25px;
text-decoration: none;
color: white;
transition: font-size 0.3s;
margin-top: 100px;
border: 3px solid white;
padding: 3px;
border-radius: 7px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.594);
justify-content: space-around;
transition: all 0.37s ease;


}

.textcontainer{
  margin-bottom: px;
  width: 100%;
  height: 20px;
 display: flex;
 justify-content: center;
 justify-content: space-around;
 color: rgb(255, 255, 255);
 box-shadow: rgb(255, 255, 255) 0px 0px 0;
}

.test{
  display: flex;
  justify-content: center;
  margin-top: 90px;
  font-size: 70px;
  color: rgb(255, 255, 255);
  box-shadow: rgb(255, 255, 255) 0px 0px 25px;

}

.explore{
  display: flex;
 align-items: center;
 justify-content: center;
  margin-top: 10px;
  font-size: 35px;
  color: white;
  text-shadow: rgb(255, 255, 255) 0px 0px 25px;
height: 200px;
}

#contactdiv{
  grid-row: 9;
  grid-column: 1/4;
  background-color: rgba(255, 0, 0, 0);
  
  
 font-size: 50px;
 
  color: rgb(255, 255, 255);
    font-family: "Pompiere", sans-serif;
    border: solid;
    background-color: rgba(0, 0, 0, 0.349);
    border-color: black;
    height: 300px;
    backdrop-filter: blur(10px);

    margin-top: 200px;
    
}


#workdiv{
  background-color: rgba(0, 0, 0, 0.43);
  border-top: 3px  solid  white ;
   border-bottom:  3px solid  white ;
  grid-column: 1/4;
  grid-row: 4/6;
  display: grid;
  backdrop-filter: blur(10px);

  height: 1000px;

 
}
@media (max-width: 480px) {
  
}

.workobject{
  display: grid;
  
  
  
color: rgb(255, 255, 255);

 grid-template-columns : 1fr 1fr 1fr; 
 grid-template-rows: 1fr 1fr 1fr;





}

.workindiv{
display: flex;
justify-self: center;
align-items: center;
height: 250px;
width: 300px;
display: flex;
justify-content: space-around;
border: solid rgb(255, 255, 255);
margin-top: 70px;
  border-radius: 12px;
  transition: all 0.2s;
  margin-bottom: 100px;
  margin-left: px;
  
}

.workindiv:hover{
    transform: scale(1.1); /* Grows 5% */
    .gametext{
      opacity: 1;
    }

}
.chicken{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: all 0.3s;
}




#aboutmediv{
  background-color: rgba(0, 0, 0, 0.69);
  grid-column: 1/4;
  grid-row: 7;
  color: white;
  border-bottom: 2px solid;
  backdrop-filter: blur(10px);
}

#aboutmecontainer{

  width: 100%;
  height: 100%;
}

.aboutmetext{
  font-size: 80px;
  display: flex;
  
  
  font-family: "EB Garamond", serif;
}

.aboutmetextcontainer{
  
  background-color: rgba(0, 0, 255, 0);
}

.aboutmetextcontainer{
  width: 100%;
  height: 100%;

}

.explaintext{
  margin-top: 20px;
  display: flex;
  font-size: 30px;
  margin-left: 13px;
  margin-right: 13px;
    width: 100%;
    height: 400px;
 align-items: center;
}

.aboutmetextdiv{
  border-bottom: 2px solid;
}


.erenheader{
  font-size: 160px;
  grid-column: 2/3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(55, 54, 54);
  text-shadow: 0px 0px 25px white;
 width: 100%;
  user-select: none;
}

#blackbar{
  background-color: rgba(0, 0, 0, 0.888);
  grid-column: 1/5;
display: flex;
align-items: center;
justify-content: center;
height: 435px;
width: 100%;
background: linear-gradient(to bottom, rgb(0, 0, 0), rgba(186, 171, 171, 0.087))
}



.R{
transition: all 0.4s;
animation: grow 0.8s ;

}

@keyframes grow{
  from{
    font-size: 0px;
  }
  to{
    font-size: 175px;
  }
}

.E2{
  transition: all 0.4s;
animation: grow 0.8s;
}

.N{
transition: all 0.4s;
animation: grow 0.8s ;

}

/* All elements you want to animate */
.E {
   
                  /* start at 0 */
  animation: grow 1s ; /* run animation once */
  transition: all 0.4s;

}



.E:hover{
  transform: scale(1.3);
  text-shadow: 2px 2px 5px rgb(194, 202, 194);
}

.R:hover{
  transform: scale(1.3);
  text-shadow: 2px 2px 5px rgb(194, 202, 194);
}
.E2:hover{
  transform: scale(1.3);
  text-shadow: 2px 2px 5px rgb(194, 202, 194);
}
.N:hover{
  transform: scale(1.3);
  text-shadow: 2px 2px 5px rgb(194, 202, 194);
}


.textinside:hover{
  transform:  scale(1.25);
}

.profilediv{
 display: flex;
justify-self: center;
width: 100%;
justify-content: center;

}

.profiletext{
  font-size: 50px;
justify-self: center;
}

.projecttext{
  font-size: 20px;
  justify-self: center;
  display: flex;
  color: white;
  margin-top: 15px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.294);
    font-family: "Dancing Script", cursive;
    border-radius: 20px;

}

.projecttitle{
  display: flex;
  justify-content: center;
  color: white;
  margin-top: 15px;
  box-shadow: 3.5px 3.5px 3.5px rgba(0, 0, 0, 0.395);
  font-family: "Fjalla One", sans-serif;
  border-radius: 20px;
}

.contacttext{
  width: 100%;
  height: 60px;
 display: flex;
  justify-content: center;
  margin-top: 25px;
  
}


.discord{
  height: 60px;
  bottom: 0px;
  margin-top: 140px;
 margin-left: 20px;
 transition: height 0.25s;

}

.discord:hover{
  height: 70px;
}
.imageholder{
    justify-content: center;
  display: flex;
}

.footer{
  grid-row: 10;
  grid-column: 1/4;
  justify-content: center;
  padding-top: 60px;
  background-color: rgba(0, 0, 0, 0.413);

  
}

.kacabtext{
  display: flex;
  justify-content: center;
  color: white;
  align-items: center;
  align-self: center;
}

.goup{
  background-color: rgba(252, 252, 252, 0);
  display: flex;
 
  
  right: 60px;
  
 height: 60px;
  width: 70px;
  align-items: center;

  justify-content: center;
  margin-top: 15px;
  border: solid white;

  position: fixed;
  
  right: 30px;
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0px 0px 40px rgb(0, 0, 0);
  border-radius: 20px;
  transition:  color 0.5s;
  font-size: 15px;
  color: white;
  transition:  color 0.3s,background-color 0.3s;
 text-decoration: none;
 bottom: 30px;

  
}
 
  
  
.goup:hover{
  background-color: rgba(255, 255, 255, 0.151);
  color: rgba(216, 161, 248, 0.987);
  
} 

.gouptext{
   text-decoration: none;
   color: inherit;
   border-bottom: solid 1px;
}
  

.footertext{
  margin-bottom: 13px;
}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
 
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.profilelink{
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  font-size: 17px;
}


.gametext{
  background-color: rgb(97, 91, 79);
  padding: 4px;
  border-radius: 3px;
  border: solid 1.2px rgba(255, 255, 255, 0.698);
  opacity: 0;
}