body {
  font-family: "Overlock SC", sans-serif;
  background: #ffffff;
  padding-top: 55px;
}

.avatar {
  width: 70px;
  border-radius: 5px;
  object-fit: cover;
}

.mode {
  background: none;     
  border: none;          
  box-shadow: none;   
  padding: 0;       
  outline: none;          
  cursor: pointer;
}

/* EXTRAORDINARY GLITCH EFFECT */
.container h1 {
  position: relative;
  font-family: "Shadows Into Light", cursive;
  animation: glitch-skew 3s infinite linear alternate-reverse,
             glitch-flicker 4s infinite steps(30);
}

/* base text flicker */
@keyframes glitch-flicker {
  0% { opacity: 1; }
  95% { opacity: 1; }
  96% { opacity: 0.6; }
  98% { opacity: 1; }
  99% { opacity: 0.8; }
  100% { opacity: 1; }
}

p {
  font-family: "Reddit Mono", monospace;
}

/* ====== RGB Layers ====== */
.container h1::before,
.container h1::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  mix-blend-mode: difference;
}

/* Red layer */
.container h1::before {
  color: #ff004c;
  z-index: -1;
  animation: glitch-before 2.3s infinite linear alternate-reverse;
}

/* Cyan layer */
.container h1::after {
  color: #00eaff;
  z-index: -1;
  animation: glitch-after 2.2s infinite linear alternate-reverse;
}

/* ====== RANDOM SKEW ====== */
@keyframes glitch-skew {
  0%   { transform: skew(0deg); }
  25%  { transform: skew(1deg); }
  26%  { transform: skew(-3deg); }
  27%  { transform: skew(2deg); }
  60%  { transform: skew(0deg); }
  61%  { transform: skew(-1deg); }
  62%  { transform: skew(3deg); }
  100% { transform: skew(0deg); }
}

/* ====== RED LAYER NOISE ====== */
@keyframes glitch-before {
  0%, 5% { transform: translate(0); opacity: 0; }
  6%  { transform: translate(-3px, -1px) skew(-2deg); opacity: 0.8; }
  7%  { transform: translate(0); opacity: 0; }
  45% { transform: translate(0); opacity: 0; }
  46% { transform: translate(-4px, 2px) skew(1deg); opacity: 0.7; }
  47% { transform: translate(0); opacity: 0; }
  90% { transform: translate(0); opacity: 0; }
  91% { transform: translate(-2px, -3px) skew(-1deg); opacity: 0.8; }
  92% { transform: translate(0); opacity: 0; }
}

/* ====== CYAN LAYER NOISE ====== */
@keyframes glitch-after {
  0%, 10% { transform: translate(0); opacity: 0; }
  11% { transform: translate(2px, 1px) skew(2deg); opacity: 0.8; }
  12% { transform: translate(0); opacity: 0; }
  55% { transform: translate(0); opacity: 0; }
  56% { transform: translate(4px, -2px) skew(-1deg); opacity: 0.7; }
  57% { transform: translate(0); opacity: 0; }
  85% { transform: translate(0); opacity: 0; }
  86% { transform: translate(3px, 2px) skew(1deg); opacity: 0.8; }
  87% { transform: translate(0); opacity: 0; }
}

a {
  text-decoration: none;
  color: green;
}

.icons_p {
  cursor: default;
}

/* Icon styling */
p a i {
  font-size: 1.15rem;
  transition: all 0.25s ease;
  padding: 6px;
  border-radius: 8px;
}

/* Individual icon colors */
p a .fa-github { color: #181717; }     
p a .fa-itch-io { color: #f15f5f; }     
p a .fa-instagram { color: #E4405F; }    
p a .fa-envelope-open { color: #D44638; } 
p a .fa-youtube { color: red; } 

/* Hover effects */
p a:hover i {
  background: rgba(0,0,0,0.05);
}

.fullport {
    width: 50%;
}

@media (max-width: 600px) {
.fullport {
    width: 90%;
}
}

  /* Remove focus border when clicked or focused */
  .modal-body .btn-close:focus {
    outline: none;
    box-shadow: none;
  }