.top-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  overflow: hidden;

  background: black;
  color: #00ff00;

  font-size: 12px;
  font-family: monospace;
  z-index: 999999999;
  text-shadow: 0 0 4px #00ff00;
}

.scroll-track {
  display: flex;
  white-space: nowrap;
  animation: scroll-left 15s linear infinite;
}

.scroll-track span {
  padding-right: 40px;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.box {
  width: 100px;
  height: 100px;
  margin: 50px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*backdrop-filter: blur(2px);*/
  background-color: rgba(169, 137, 137, 0.5);
  justify-content: center;
  align-items: center;
  color: rgb(238, 246, 237);
  z-index: 999999999;
}

.modal-content {
  font-family: cybernet;
  width: 50vw;
  background-color: rgba(172, 138, 138, 0.222);
  mix-blend-mode: screen;
  margin: 100px;
  padding: 50px;
  text-align: center;
  z-index: 99999999999;
  border-radius: 50px;
  box-shadow: 0 0 20px rgb(255, 255, 255); /* Outer glow with a white color and some transparency */
}

.modal-content p {
  color: black;
  text-shadow: 2px 2px 4px rgb(0, 245, 90) ; /* Text shadow with an offset, blur radius, and color */
}


.modal-content button {
  cursor: pointer;
  color: rgb(0, 255, 0);
  border-radius: 100px;
  background-color: rgb(102, 102, 102);
  border: 2px solid #00ff51; /* Change the color to your desired outline color */
}








#item-0,
#item-1,
#item-2,
#item-3,
#item-4,
#item-5,
#item-6,
#item-7 {
  z-index: 1; /* You can adjust this value as needed */
}

/* Set z-index for the iframe */
#iframeContainer {
  z-index: 1000; /* You can adjust this value as needed */
}

/* Set z-index for the gif */
.gif {
  z-index: 99999990; /* You can adjust this value as needed */
}


.border1 {
  z-index: 997;
}

.border2 {
  z-index: 998;
}

.bg1 {
  z-index: 997;
}
.justframe {
  z-index: 10000000;
  pointer-events: none;
}

@font-face {
  font-family: Cybernet;
  src: url(/font/Cybernet.ttf);
}

body {
  margin: 0;
  background-color: rgb(239, 239, 239);
  overflow: hidden;
  cursor: url(2bf5c84433a7835b5bd534073f506fd0.cur),pointer;
  
  
  
}


#overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

#iframeContainer {
  width: 100vw;
  height: 100vh;
  pointer-events: auto; /* Allows clicks on the iframe */
  filter: drop-shadow(0 0 5px rgba(255,255,255, 1));
}


a {

  color: rgb(213, 209, 209);
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 2px 4px #5b013a, 5px 0 4px #016b0a;
  text-align: center;
  padding-top: 50px;
  text-decoration:none;

}



/* 
.overlay0 {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  -moz-opacity: 0.8;
  opacity: .80;
 
  text-align: right;
  
} */



/* .overlay3 {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  -moz-opacity: 0.8;
  opacity: .80;
  
  text-align: right;
  
} */

/* 
.content3 {
  font-family: Cybernet;
  font-size: xx-small;
  display: none;
  position: absolute;
  top: 25%;
  right: 25%;
  width: 30%;
  height: 40%;
  padding: 25px;
  background-color: rgba(255, 255, 255, 0);
 
  overflow: auto;
  cursor: move;
  text-align: right; 
  vertical-align: top; 
} */

/* 
.overlay7 {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  -moz-opacity: 0.8;
  opacity: .80;
  
  text-align: right;
  
} */

/* .content7 {
  font-family: Cybernet;
  font-size: xx-small;
  display: none;
  position: absolute;
  top: 25%;
  right: 25%;
  width: 30%;
  height: 40%;
  padding: 25px;
  background-color: rgba(255, 255, 255, 0);
 
  overflow: auto;
  cursor: move;
  text-align: right; 
}
 */


/* .overlay6 {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  -moz-opacity: 0.8;
  opacity: .80;
  text-align: right;
  
} */
/* 
.content6 {
  filter: invert(100%) hue-rotate(180deg) contrast(3);
  font-family: Cybernet;
  font-size: xx-small;
  display: none;
  position: absolute;
  top: 25%;
  right: 25%;
  width: 30%;
  height: 40%;
  padding: 25px;
  background-color: rgba(255, 255, 255, 0);
  overflow: auto;
  cursor: move;
  text-align: right; 
  vertical-align: top; 
} */



.gif {
position: fixed;
  width: 40vw;
  filter: contrast(2);
  mix-blend-mode: luminosity;
  margin-bottom: 70vh;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgb(4, 22, 157));
}

.border1 {
  position: fixed;
  transform: rotate(180deg);
  width: 100vw;
  height: 100vh;
  mix-blend-mode: difference;
  filter: invert(0) brightness(10) grayscale(90%) ;
}

.border2 {
  position: fixed;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: exclusion;
  filter: invert(0) grayscale(90%) brightness(200%) drop-shadow(0 0 5px rgba(255,255,255, 1)) contrast(100);
}

.justframe {
  width: 100vw;
  height: 100vh;
  position: absolute;  
  filter: drop-shadow(0 0 10px rgba(21, 21, 21, 0.775)) grayscale(50%);
}


.bg1 {
  width: 100vw;
  height: 100vh;
  position: absolute;
 


}

.bg2 {
  width: 100vw;
  height: 100vh;
  position: absolute;
  filter: blur(10px);
  

  
}

.bg {
  font-family: Cybernet;
  font-size: xx-small;
  justify-items: center;
  align-items: center;
  display: inline-grid;
  align-items: center;
  width: 100vw;
  height: 100vh;

  

}

.angry-grid {
  position: absolute;
  display: grid;
  text-align: center;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 15px;
  height: 60vh;
  width: 48vw;
  border-radius: 20px;
  z-index: 1002; /* You can adjust this value as needed */
  }
  




#item-0 {
  display: grid;
  border-radius: 100px;
  background-image: url('0image.png');
  background-size: contain;
  background-position-y: 50%;
  filter: drop-shadow(0 0 7px rgb(254, 254, 254, 20));
  box-shadow: rgba(176, 195, 181, 0.99) 0px -23px 25px 0px inset, rgba(36, 42, 37, 0.685) 0px -36px 30px 0px inset, rgba(255, 255, 255, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(5, 56, 18, 0.219) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(104, 101, 101, 0.511) 0px 32px 16px;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 5;
  grid-column-end: 3;
  z-index: inherit;
  
}



div#item-0:hover {
  box-shadow: rgba(0, 0, 0, 0.34) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.536) 0px 18px 36px -18px inset;
}







#item-1 {
  display: grid;
 background-image: url(1image.png);
background-size: cover;
  border-radius: 100px;
  filter: drop-shadow(0 0 7px rgb(254, 254, 254, 20));
  box-shadow: rgba(254, 254, 255, 0.536) 0px -23px 25px 0px inset, rgba(42, 34, 41, 0.685) 0px -36px 30px 0px inset, rgba(255, 255, 255, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(67, 11, 43, 0.132) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(104, 101, 103, 0.511) 0px 32px 16px;
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 3;
  grid-column-end: 6;
  
}


div#item-1:hover {
  box-shadow: rgba(0, 0, 0, 0.64) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.759) 0px 18px 36px -18px inset;
}



#item-2 {
  display: grid;
  background-image: url(2image.png);
  background-size: cover;
  border-radius: 100px;
  filter: drop-shadow(0 0 7px rgb(254, 254, 254, 20));
  box-shadow: rgba(254, 254, 255, 0.536) 0px -23px 25px 0px inset, rgba(42, 34, 41, 0.685) 0px -36px 30px 0px inset, rgba(255, 255, 255, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(67, 11, 43, 0.132) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(104, 101, 103, 0.511) 0px 32px 16px;
  grid-row-start: 3;
  grid-column-start: 3;
  grid-row-end: 5;
  grid-column-end: 5;
  
  
}


div#item-2:hover {
  box-shadow: rgba(0, 0, 0, 0.64) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.759) 0px 18px 36px -18px inset;
}

#item-3 {
  display: grid;
  background-image: url(3image.png);
background-size: contain;
  border-radius: 100px;
  filter: drop-shadow(0 0 7px rgb(254, 254, 254, 20));
  box-shadow: rgba(144, 144, 227, 0.536) 0px -23px 25px 0px inset, rgba(42, 34, 41, 0.685) 0px -36px 30px 0px inset, rgba(255, 255, 255, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(67, 11, 43, 0.132) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(23, 11, 19, 0.511) 0px 32px 16px;
  grid-row-start: 3;
  grid-column-start: 5;
z-index: inherit;
  grid-row-end: 5;
  grid-column-end: 8;
  
}


div#item-3:hover {
  box-shadow: rgba(255, 255, 255, 0.404) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.3) 0px 18px 36px -18px inset;
}


#item-4 {
  display: grid;
  background-image: url('4image.png');
  background-size: cover;
  background-position: 50%;
  border-radius: 100px;
  filter: saturate(1) invert(0) drop-shadow(0 0 7px rgb(254, 254, 254, 20));
  box-shadow: rgba(216, 186, 203, 0.662) 0px -23px 25px 0px inset, rgba(42, 34, 41, 0.685) 0px -36px 30px 0px inset, rgba(76, 76, 76, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(67, 11, 43, 0.132) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(104, 101, 103, 0.511) 0px 32px 16px;
  grid-row-start: 1;
  grid-column-start: 6;

  grid-row-end: 3;
  grid-column-end: 8;
  
}


div#item-4:hover {
  box-shadow: rgba(106, 106, 106, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}


#item-5 {
  display: grid;
  background-image: url(5image.png);
background-size: contain;
  border-radius: 100px;
  filter: drop-shadow(0 0 7px rgb(254, 254, 254, 20));
  box-shadow: rgba(196, 197, 162, 0.536) 0px -23px 25px 0px inset, rgba(42, 34, 41, 0.685) 0px -36px 30px 0px inset, rgba(255, 255, 255, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(67, 11, 43, 0.132) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(104, 101, 103, 0.511) 0px 32px 16px;
  grid-row-start: 1;
  grid-column-start: 8;

  grid-row-end: 4;
  grid-column-end: 10;
  
}


div#item-5:hover {
  box-shadow: rgba(106, 106, 106, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}


#item-6 {
  display: grid;
  background-image: url(6image.png);
background-size: contain;
  border-radius: 100px;
  filter: drop-shadow(0 0 7px rgb(254, 254, 254, 20));
  box-shadow: rgba(255, 255, 255, 0.312) 0px -23px 25px 0px inset, rgba(42, 34, 41, 0.685) 0px -36px 30px 0px inset, rgba(255, 255, 255, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(67, 11, 43, 0.132) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(104, 101, 103, 0.511) 0px 32px 16px;
  grid-row-start: 1;
  grid-column-start: 1;

  grid-row-end: 2;
  grid-column-end: 3;
  
}


div#item-6:hover {
  box-shadow: rgba(106, 106, 106, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}


#item-7 {
  display: grid;
  background-image: url(7image.jpg);
  background-size: cover;
    border-radius: 100px;
    filter: drop-shadow(0 0 7px rgb(254, 254, 254, 20));
    box-shadow: rgba(187, 249, 152, 0.536) 0px -23px 25px 0px inset, rgba(42, 34, 41, 0.685) 0px -36px 30px 0px inset, rgba(255, 255, 255, 0.316) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.02) 0px 2px 1px, rgba(67, 11, 43, 0.132) 0px 4px 2px, rgba(0, 0, 0, 0.03) 0px 8px 4px, rgba(0, 0, 0, 0.222) 0px 16px 8px, rgba(104, 101, 103, 0.511) 0px 32px 16px;
grid-row-start: 4;
  grid-column-start: 8;

  grid-row-end: 5;
  grid-column-end: 10;
  
}


div#item-7:hover {
  box-shadow: rgba(106, 106, 106, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

::-webkit-scrollbar {
  display: none;
}



#wrapper {
  margin-left:auto;
  margin-right:auto;
  width:960px;
}

 



audio {
  display: none;
}