body {
  background-image: url("https://emuooo.neocities.org/images/ref2.png");
  cursor: url("https://emuooo.neocities.org/images/my-mouse-pointer.cur"),auto;
  background-size: cover;
}


@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}





.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(12, [col-start] 1fr);
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: ;
  padding: 1em;
}

.wrapper > * {
  background-color: ;
  padding: 1em;
  
}
.main-header,
.main-footer {
  grid-column: col-start / span 12;
  text-align-last: center;
}

.main-footer{
  background-color:black;
  border:ridge 2px;
  border-color:#c5bbc9;
  color:white;
  font-size:12px;
  font-family:"Pixelated MS Sans Serif";
  }

.nav{
  grid-column: col-start / span 12; 
  background-color:black;
  border:ridge 2px;
  border-color:#c5bbc9;
  color:#808080;
  font-size:12px;
  font-family:"Pixelated MS Sans Serif";
  padding:5px;

  
}

.tiny{
  width: 100px;
  height: 100px;
  

  }

.content {
  background-color:black;
  color:white;
  font-size:12px;
  font-family:"Pixelated MS Sans Serif";
}



.article{
  grid-column: col-start 1 / span 12;
  grid-row: 4;
  background-color:black;
  border:ridge 2px;
  border-color:#c5bbc9;
  color:#808080;
  font-size:12px;
  font-family:"Pixelated MS Sans Serif";
  padding:5px;
  display: flex;
  flex-direction: column;
  
  }
  
  .erm {
  grid-column: col-start 1 / span 5;
  grid-row: 3;
  background-color:black;
  border:ridge 2px;
  border-color:#c5bbc9;
  color:#808080;
  font-size:12px;
  font-family:"Pixelated MS Sans Serif";
  padding:5px;
  display: flex;
  flex-direction: column;   
  }
  .erm2 {
  grid-column: col-start 6 / span 7;
  grid-row: 3;
  background-color:black;
  border:ridge 2px;
  border-color:#c5bbc9;
  color:#808080;
  font-size:12px;
  font-family:"Pixelated MS Sans Serif";
  padding:5px;
  text-align:center;
  display: flex;
  flex-direction: column;   
  
  }
  
  
   .fuck{
    float:right;
    padding:5px;
    word-spacing: 10px;
    }
    
  .fuck2{
    float:left;
    
    
    }
    
  .fuck3{
    margin-left:1px;
    
    }
    
.aboutme{
  display:flex;
  gap:100px;
  text-align: center;
  margin:10px;
}

.aboutmeimg{
  border-right:dotted 2px;
  border-color:#efc39a;
  padding:15px;
  }
  
u {
  color:white;
  text-decoration: underline;
  text-decoration-color:#efc39a;
}

hr.dashed {
  border-top: 2px  white;
}

details {
  text-align:left;
  color:#efc39a;
  margin-left:25px;
}

summary {
  text-align:left;
  color:#efc39a;
}

details[open] {
  text-align:left;
  color:#efc39a;
 
}

details[open] summary {
  text-align:left;
  color:#efc39a;
 
}  

  .circul { 
    border-radius: 50%; 
  }   

  .tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip { 
  --b: 2em; /* tail dimension */
  --p: 20%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */

  padding: 1em;
  border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/4) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/4);
  background: #cf9d38; /* the main color */
  position: relative;
  margin:1em;
  margin-bottom:100px;
}
.tooltip:before {
  content: "";
  position: absolute;
  right: 100%;
  top: clamp(0%,var(--p) - var(--b)/4,100% - var(--b)/2);
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: 
    radial-gradient(circle closest-side at 12% 88%,var(--g)),
    radial-gradient(20% 20% at 45% 48%,var(--g)),
    radial-gradient(25% 25% at 100% 25%,var(--g));
}  


.textarea{
  overflow: scroll;
  font-family:"Pixelated MS Sans Serif";
  }
  
  .fart {
    text-align:center;
  }
  
  
  #scroll-text {
   -moz-transform: translateX(100%);
  -webkit-transform: translateX(60%);
  transform: translateX(60%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
 
  -webkit-animation: my-animation 25s linear infinite;
  animation: my-animation 25s linear infinite;
}


@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }



}


.tooltip2 {
  position: relative;
  
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background: #cf9d38;
  font-family:"Pixelated MS Sans Serif";
  text-shadow: 0.5px 1px black;
  color: #ffffff;
  text-align: center;
  padding: 5px ;
  position: absolute;
  z-index: 1;
  bottom: 115%;
  left: 50%;
  font-size:16px;
  margin-left: -60px;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #cf9d38 transparent transparent transparent;
}

.tooltip2:hover .tooltiptext {
  visibility: visible;
}