* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #030208;
	color: #ffffff;
	font-family: "MS Sans Serif", Geneva, sans-serif;
}

canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*.image-overlay {*/
/*  padding: 0;*/
/*	position: absolute;*/
/*	top: 0;*/
/*	left: 0;*/
/*	width: 100%;*/
/*	height: 100%;*/
/*	background-image: url('shruggy shrug nobg.png');*/
/*	background-size: contain;*/
/*	background-position: center;*/
/*	background-repeat: no-repeat;*/
/*	mix-blend-mode: screen;*/
/*	opacity: 0.85;*/
/*  image-rendering: pixelated;*/
/*	image-rendering: crisp-edges;*/
/*	z-index: 0;*/
	
/*}*/

.image-overlay {
  padding: 0;
  position: absolute;
  top: 0;
  left: 3rem;
  width: 100%;
  height: 100%;
  background-image: url('shruggy shrug nobg.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.87
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 0;
  
  /* Apply the high-contrast digital texture filter */
  filter: url(#crispy-noise);
}

/* Base configuration for the glitching slice layers */
.image-overlay::before,
.image-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  image-rendering: inherit;
  will-change: transform, clip-path, opacity;
}

/* Layer 1: Leftward, high-contrast crispy glitch slice */
.image-overlay::before {
  filter: hue-rotate(-90deg) contrast(1.5) brightness(1.2);
  animation: crisp-glitch-1 3s steps(1) infinite;
}

/* Layer 2: Rightward, pixelated glitch slice */
.image-overlay::after {
  filter: hue-rotate(90deg) contrast(2);
  animation: crisp-glitch-2 2.2s steps(1) infinite;
}

/* Rigid clip-paths create perfectly sharp horizontal slices */
@keyframes crisp-glitch-1 {
  0%, 100% { opacity: 0; transform: translateX(0); }
  7%, 9% { 
    clip-path: inset(20% 0 65% 0); 
    transform: translateX(-12px) skewX(10deg);
    opacity: 0.9;
  }
  10%, 61% { opacity: 0; }
  62%, 64% { 
    clip-path: inset(75% 0 10% 0); 
    transform: translateX(8px);
    opacity: 0.8;
  }
  65% { opacity: 0; }
}

@keyframes crisp-glitch-2 {
  0%, 100% { opacity: 0; transform: translateX(0); }
  23%, 25% { 
    clip-path: inset(5% 0 85% 0); 
    transform: translateX(14px) scaleY(1.1);
    opacity: 0.9;
  }
  26%, 84% { opacity: 0; }
  85%, 88% { 
    clip-path: inset(45% 0 40% 0); 
    transform: translateX(-10px) skewX(-15deg);
    opacity: 0.8;
  }
  89% { opacity: 0; }
}

.forum-container {
	position: absolute;
	top: 20px;
	left: 20px;
	max-width: 450px;
	background: rgba(26, 26, 36, 0.9);
	border: 2px solid #4a4a5a;
	box-shadow: 4px 4px #000000;
	padding: 20px;
}

.forum-container p {
	margin-bottom: 12px;
	line-height: 1.4;
}

.forum-container a {
	color: #00ffff;
}

.forum-container ul {
	margin-left: 20px;
	margin-bottom: 12px;
}
/* Container framework maintaining design parity */
.linktree-box {
  position: absolute;
  top: 20px;
  right: 20px;
  max-width: 450px;
  background: rgba(26, 26, 36, 0.9);
  border: 2px solid #4a4a5a;
  box-shadow: 4px 4px #000000;
  padding: 20px;
  box-sizing: border-box;
}

/* Linktree-styled core buttons using flex layout alignment */
.linktree-box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  background: #254f1a; /* Linktree Brand Green */
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background-color 0.2s steps(2), color 0.2s steps(2);
}

/* Base parameters for your icon frame asset */
.linktree-box .custom-lt-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  
  /* Link your clean static state image asset directly here */
  content: url('icon_linktree_normal.png');
  
  /* Preserves pixel art clean lines if your icons are low-res vectors */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- HOVER INTERACTIVE ACTIONS ---------- */
.linktree-box a:hover {
  background: #ffffff;
  color: #1e2321; /* Linktree Deep Forest Charcoal text */
  border-color: #254f1a;
}

/* Swaps out the normal file view for your custom hover state PNG */
.linktree-box a:hover .custom-lt-icon {
  content: url('icon_linktree_hover.png');
}

/* ---------- ACTIVE CLICK ACTIONS ---------- */
.linktree-box a:active {
  background: #1e2321;
  color: #ffffff;
}

/* Swaps the normal file view out for your active state PNG */
.linktree-box a:active .custom-lt-icon {
  content: url('icon_linktree_active.png');
}

/* Mobile viewport scalability overrides */
@media screen and (max-width: 768px) {
  .forum-container, 
  .linktree-box {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    margin: 15px auto;
    box-sizing: border-box;
  }
}