/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*THIS HOW YOU SEE THE BOXES*/
* {
    box-sizing: border-box;
    /*border: 1px solid white;*/
  }



  
/*FONTS*/
@font-face {
  font-family:'Punk';
  src: url(./Assets/Fonts/Very%20very%20punk%20font.otf);
  
}
@font-face {
  font-family:'Carnage';
  src: url(./Assets/Fonts/ChainsawCarnage.ttf);
  
}
@font-face {
  font-family:'Kill';
  src: url(./Assets/Fonts/Killam.ttf);
  
}
/*FONTS*/


html{
  font-family: Carnage;
  -webkit-display: flow-root;
  height: 100%;
}
body {
  background-color: red;
  color: white;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
/*BACKGROUND*/
.Splatty{
  z-index: -1;
  width: 100%;
  height: 100%;
  position: fixed;
  mix-blend-mode: multiply;
  opacity: 0.6;
}


/*FOR THE MAINS*/
.intro{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 15vh;
  gap: 2rem;
}
.logoselect {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}
.logos{
  mix-blend-mode: hard-light;
  width: 600px;
  height: auto;
}
.logo_bg{
  width: 600px;
  height: 600px;
  object-fit: cover;
  display: block;
  position: absolute;
  opacity: 0%;
}
.gorimain{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
#loser{
  position: absolute;
  z-index: 3;
  width: 160px;
  height: auto;
  right: 29vw;
  top: -15vh;
  
}
/*DA NEWS*/
#news{
  font-size: 10px;
  font-family: Monospace;
  height: 21vh;
  width: 24vh;
  background-color: rgb(50, 50, 90, 0.9);
  margin: 0;
  padding: 2.5vh;
  position: absolute;
  left: 9vh;
  z-index: 1;

}
#input{
  mix-blend-mode: hard-light;
}
#news h3, #news h4{
  text-transform: uppercase;
  text-shadow: 1px 1px 12px white;
}
#news p{
  text-shadow: 1px 1px 12px red;
}

#news img{
  z-index: 3;
  height: auto;
  width: 58vh;
  top: -9vh;
  bottom: 0;
  left: -15vh;
  right: 0;
  position: absolute;
  image-rendering: pixelated;
  filter: saturate(0%) contrast(300%);
}
#newpa{
  color: red;
}

/*DA NEWS*/
/*FOR THE MAINS*/
.choose{
  position: absolute;
  right: 3rem;
  list-style: none;
  font-size: 2.5rem;
  letter-spacing: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.choose li{
  transition: 300ms;
}
.choose li a{
  font-family: Punk !important;
  text-decoration: none;
  text-shadow: 1px 1px 12px black;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  transition: 300ms;
}

.choose li:hover{
  transform: scale(112%);
  background-image: url(./Assets/Images/splat.gif);
  transition: 300ms;

}
.choose li:hover a{
    color: red;
  }
/*MAKE GOREKAT DISSAPEAR*/
.logoselect:has(#port:hover) #gore, 
.logoselect:has(#bout:hover) #gore, 
.logoselect:has(#info:hover) #gore{
  opacity: 0%;
  transition: 300ms;
}

/*THESE ARE THE BACKGROUNDs*/
.logoselect:has(#port:hover) #kat, 
.logoselect:has(#bout:hover) #hors, 
.logoselect:has(#info:hover) #boo{

 display: block;
 opacity: 100%;
 position: absolute;
 mask-image: url(./Assets/Images/SDADA.gif);
 mask-size: 600px, auto;
 mask-repeat: no-repeat;
 mask-position: absolute;
 mask-composite: subtract;
 transition-delay: 55ms !important;
 transition: 300ms;
}

  

/*THIS IS FOR THE PORTFOLIO*/
.portfolio{
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*THIS IS THE ACTUAL PAGE*/
.frame{
  overflow: hidden;
  background: none;
  padding: 1rem 1rem 1rem 9rem;
}
/*THIS IS THE ACTUAL PAGE /END*/
.artmedia img{
  width: auto;
  height: auto;
  max-height: 300px;
  max-width: 500px ;
 

}
.artmedia img:nth-child(odd){
 clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 90%);
}
.artmedia img:nth-child(even){
 clip-path: polygon(0% 0%, 95% 10%, 100% 90%, 0% 95%);
}
.artmedia img:nth-child(3n){
 clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
}
.artmedia img:nth-child(4n){
 clip-path: polygon(0% 0%, 100% 5%, 100% 95%, 0% 100%);
}
.artmedia{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: black rgb(255,255,255, 0);
  width: 100%;
  scroll-behavior: smooth;
  gap: 2rem;
}
/*THIS IS THE IFRAME*/
.framing{
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 21px;
  width: 75%;
  height: 120dvh;
  
}
/*THIS IS THE IFRAME /END*/
/*THIS IS FOR THE PORTFOLIO*/






#WIP{
  bottom: 0;
  position: absolute;
  display: flex;
  align-items: center;
  margin:12px;
}
#WIP *{
  display: none;
}
#WIP img{
  
  width: 150px;
  height: auto;
}
#WIP2{
  bottom: -90vh;
  position: absolute;
  display: flex;
  align-items: center;
}

#WIP2 img{
  
  width: 150px;
  height: auto;
}
@Layer mystuff{
.aboutme{
  background-color: rgb(0, 0, 0, 0.7);
  border: 2px solid red;
  border-radius: 21px 0px 21px 0px;
  padding: 6vh 6vw;
  font-size:1.1rem;
}

#identity img{
    opacity: 0;
    transition: 300ms;
}
#identity{
  transition: 300ms;
}
#identity:hover{
  opacity: 60%;
  
  transition: 300ms;
}
#identity:active{
  opacity: 100%;
  img{
    opacity: 100%;
    transition: 300ms;
  }
}
/*SHRINES AND STUFF*/
  .shrine{
    border-radius: 9px;
    margin: 3vh 0vh 3vh 3vh;
    background-color: rgb(25, 0, 0, 0.9);
    padding: 3vh;
    width: 66vw;
    height: max-content;
    overflow: hidden;
    overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: black rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    
  }
  .wackDIV{
    width: max-content;
  }
  .wackDIV img{
    padding: 0;
    border-radius: 9px ;
    margin: 2px;
    height: 300px;
    width: 200px;
    object-fit: cover;
    transition: 300ms;
  }
  .wackDIV img:hover{
    transform: scale(105%) rotate(3deg);
    box-shadow: 1px 1px 30px red;
    transition: 300ms;
    transition-delay: 0s;
    filter: invert(100%) sepia(100%) saturate(300%) hue-rotate(90deg);
    mix-blend-mode: hard-light;
  }
  .uniqueCommentary{
    border-radius: 9px;
    padding: 3vh;
    height: 60vh;
    width: 21vw;
    box-shadow: -3px 9px 18px black;
    background-color: rgb(25, 0, 0, 0.8);
    background-blend-mode: hard-light;
    background-size: cover;
    position: relative;
    object-fit: cover;

  }
  .uselessdiv{
    margin: 0;
    display: flex;
    justify-content: center;
    align-content: center;
  }

}
@Layer very_complex_selection{
  
  .uniqueCommentary span{
    transform: translateY(0);
    height: max-content;
    margin: 3vh;
    padding: 3vh;
    color: red;
    font-family: Monospace;
    text-shadow:1px 1px 9px red;
    font-size: 0.9rem;
    background-color: rgb(0, 0, 0, 0.9);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    border: 6px solid red;
    transition: 300ms;
  }
  .uniqueCommentary #suggestion{
    opacity: 1;
    border: 2px solid DarkRed;
    color: DarkRed;
    border-style: dashed;
    transition: 1500ms;
    transition-delay: 300ms;
  }
   .uniqueCommentary #suggestion::after{
    content: '';
    display: none;
  }
  .uniqueCommentary span::after{
    content: '';
    height: 100px;
    width: 100px;
    background-color: red;
    position: absolute;
    bottom: -100px;
    right: 12px;
    clip-path: polygon(55% 40%, 27% 0, 48% 0);

  }
  .uselessdiv:has(#K1:hover) #com1, 
  .uselessdiv:has(#K2:hover) #com2, 
  .uselessdiv:has(#K3:hover) #com3, 
  .uselessdiv:has(#K4:hover) #com4,
  .uselessdiv:has(#K5:hover) #com5,
  .uselessdiv:has(#K6:hover) #com6,
  .uselessdiv:has(#K7:hover) #com7,
  .uselessdiv:has(#K8:hover) #com8, 
  .uselessdiv:has(#K9:hover) #com9, 
  .uselessdiv:has(#K10:hover) #com10, 
  .uselessdiv:has(#K11:hover) #com11, 
  .uselessdiv:has(#K12:hover) #com12, 
  .uselessdiv:has(#K13:hover) #com13, 
  .uselessdiv:has(#K14:hover) #com14, 
  .uselessdiv:has(#K15:hover) #com15, 
  .uselessdiv:has(#K16:hover) #com16
  {
    animation: flick 400ms ease-in;
    transform: translateY(2px);
    opacity: 1;
    transition: 300ms;
  }
  
  .uselessdiv:has(img:hover) #suggestion{
    opacity: 0;
    transition-delay: 0s;
    transition: 10ms;
  }

  /*HERE FOR GORI TO TALK*/
  .talkatibe{
    position: absolute;
    top: 27vh;
    left: 27vh;
    height: auto;
    width: 200px;
    animation: dangle 9s infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    transform-origin: 60px 180px !important;
  }
  .talkatibe img{
    position: absolute;
    width: 200px;
    height: auto;
    opacity: 0;
    transform-origin: 100px 200px;
  }
  #Gori_idle{
    opacity: 1;
    z-index: 3;
    animation: bounce2 100ms ease-in;
    transition: 300ms;
  }
  .uselessdiv:has(img:hover) .uniqueCommentary #Gori_idle{
    opacity: 0;
    display: none;
    z-index: -1;
  }
  
  .uselessdiv:has(img:hover) .uniqueCommentary #Gori_talk{
    opacity: 1;
  }
  .uselessdiv:has(img:hover) .uniqueCommentary #Gori_talk{
    animation: bounce 300ms ease-in ;
  }
  .uselessdiv:has(#Gori_talk:hover).uselessdiv #extra{
    animation: flick 300ms ease-in;
    transform: translateY(2px);
    opacity: 1;
    transition: 300ms;
  }
}

/*MEDIA SCREENS  */
@media (max-width: 1031px){
 

  body{
    height: 60vh;
    overflow-y: scroll;
  }
  .int{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .int span{
    opacity: 1 !important;
  }
  .logs{
    display: static;
    z-index: -1;
    margin: 3vh;
    opacity: 0.8;
  }
  #click #gorish{
    height: auto;
    width: 300px;
  }
  .gorimain, .logoselect, .boutmain{
    display: flex;
    flex-direction: column;
  }
  .aboutme{
    display: flex;
    flex-direction: column;
  }
  #goback{
    position: static;
    padding-bottom: 3vh;
  }
.logoselect {
  top:3rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  }
.logos{
  mix-blend-mode: hard-light;
  width: 100% !important;
  height: auto;
  left: 0 !important;
  right: 0 !important;
}
.logo_bg{
  width: 100% !important;
  -webkit-mask-size: 100% !important;
  height: auto;
}

  .choose{
    bottom:-50vh;
    left: 0;
    right: 0;
    
  }
  .intro *{
    display: none;
  }
  #WIP{
    width: 100%;
    font-size:9px;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
  }
  #WIP img{
    width: 120px !important;
    height: auto;
  }
  
  /*PORTFLIO*/
  .frame{
  overflow: hidden;
  overflow-y: scroll !important;
  padding-left: 0vw;
  flex-direction: column;
  
  }
  .artmedia{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden !important;
  gap: 2rem;
}
.artmedia img{
  width: auto;
  height: auto;
  max-height: auto !important;
  max-width: 300px !important;

}
.framing{
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 21px;
  width: 90% !important;
  height: 80dvh !important;
  
}
/*PORT*/
  #news{
  font-size: 10px;
  font-family: Monospace;
  position: absolute;
  height: 21vh;
  width: 28vh;
  background-color: rgb(50, 50, 90, 0.9);
  margin: 0;
  bottom: -76vh;
  
  z-index: 1;
}
  

}


/*MEDIA SCREENS  */
/*ANIMATIONS*/
@keyframes whimsyborder {
    0% {
    border-radius: 15px;
    border: 1px solid red;
    }
    50% {
    border-radius: 1px; 
    border: 0px solid red;
    }
    75% {
    border-radius: 51px; 
    border: 3px solid red;
    }
    100% {
    border-radius: 15px; 
    border: 1px solid red;
    }
}


@keyframes flick{
  
  0%{
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  18%{
    opacity: 0;
  }
  27%{
    opacity: 0.3;
  }
  66%{
    opacity: 0.6;
  }
  99%{
    opacity: 0.9;
  }
  100%{
    opacity: 1;
  }
  
}
@keyframes dangle{
  0%{
  
    transform: rotate(-3deg);
  }
  11%{
    transform: rotate(-2deg);
  }
  22%{
    transform: rotate(0deg);
  }
  33%{
    transform: rotate(2deg);
  }
  44%{
    transform: rotate(3deg);
  }
  55%{
    transform: rotate(2deg);
  }
  66%{
    transform: rotate(0deg);
  }
  77%{
    transform: rotate(-2deg);
  }
  100%{
    transform: rotate(-3deg);
  }
}
@keyframes bounce{
  0%{
   
    transform: scale(1, 1);
  }
  50%{
    transform: scale(1, 1.1);
  }
  75%{
    transform: scale(1, 1.02);
  }
  100%{
    transform: scale(1, 1);
  }
    
}
@keyframes bounce2{
  0%{
   
    transform: scale(1, 1);
  }
  50%{
    transform: scale(1, 0.95);
  }
  100%{
    transform: scale(1, 1);
  }
    
}
@keyframes shake{
  0%{
    transform: translateY(3px) translatex(5px);
  }
  25%{
    transform: translateY(2px) translatex(-8px);
  }
  50%{
    transform: translateY(2px) translatex(2px);
  }
  75%{
    transform: translateY(-1px) translatex(2px);
  }
  100%{
    transform: translateY(3px) translatex(5px);
  }
}
/*ANIMATIONS*/  
.int span{
  opacity: 0;
}
#click{
  transition: 300ms;
}
#click:hover img{
  animation: shake 100ms infinite;
  transition: 300ms;
}
#c_sel{
  transition: 150ms;
}
#c_sel:has(#click:hover){
  transform: scale(105%) rotate(9deg);
  transition: 90ms;
}