
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');
/* Bright Retro ~ Press Start 2P / Silkscreen; HK Modular ~ Orbitron */
* {
  cursor: url("wand.png"), crosshair !important;
}

@font-face { 
  font-family: "Press Start 2P", "Nise-Sega", sans-serif; src: url(fonts/NiseSega.TTF); 
}

@font-face { 
  font-family: "Copperplate Gothic"; src: url("fonts/Copperplate\ Gothic.ttf"); 
}

@font-face {
  font-family: "Silkscreen", "Basilea", cursive; src: url("fonts/Basilea\ Regular.ttf")
}
body {
  margin: 0;
  padding: 0;
  color:white;
}
.content-area {
  margin-left: 5%;
  margin-right: 5%;
  background-color: rgba(0, 0, 0, 0.72);
}
.center {
  margin-left: auto;
  margin-right: auto;
}
.img-background {
  background-color: #3ea899;
  background-image:
    linear-gradient(180deg, rgba(62,168,153,0.82), rgba(62,168,153,0.92)),
    url("funny-pictures/casino-night-zone.gif");
  background-size: 100%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  min-height: 100%;
  height: auto;
  width: 100%;
}
.alpha-darken-bg {
  background-color: rgba(70, 30, 30, 0.829);
}
a {
  color: #00ffff
  /* background-color:rgba(255, 255, 255, 1);; */
}
#dank-memes {
  text-align: center;
}
#dank-memes > a {
  background-color:transparent;
}

#dank-memes img {
    /* box-shadow: 0.06rem 0.12rem 0 rgba(200, 100, 100, 0.5), 0 0.06rem 0 rgba(200, 100, 100, 0.5),
      0 0 5px rgba(0, 0, 0, 0.4); */
    transition: ease-in-out 0.2s;
}

#dank-memes img:hover {
  filter: hue-rotate(90deg);
  transform: translateY(-8pt);
  box-shadow: 0.06rem 0.12rem 0 rgba(200, 100, 100, 0.5), 0 0.06rem 0 rgba(200, 100, 100, 0.5),
    0 9pt 8px rgba(0, 0, 0, 0.28);
}

.invert-text {
/* Smooth transition for the effect */
  transition: filter 0.3s ease; 
}

.invert-text:hover {
/* 1 or 100% means total inversion */
  filter: invert(1); 
}

.header-img {
  max-height: 18px;
  vertical-align: middle;
}
div.content-area {
  padding: 1%;
}

.video-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  margin-bottom: 1rem;
}
.video-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}
.top-nav {
  font-weight: bold;
  font-family: 'Orbitron', 'Copperplate Gothic', sans-serif;
  font-size: 22px;
}
.harrypotterobamasonic10inu {
  font-family: "Press Start 2P", "Nise-Sega", sans-serif;
  font-weight: 100;
  background: linear-gradient(to right, #00ffff, #00ffff, #00ffff, #00ffff, #00ffff, #00ffff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top:-1em;
  text-align: center;
} 
.hpos10i-rainbow {
  /* font-family: "Press Start 2P", "Nise-Sega", sans-serif; */
  font-weight: 100;
  background: linear-gradient(to right, #00ffff, #00ffff, #00ffff, #00ffff, #00ffff, #00ffff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top:-1em;
  text-align: center;
}

h2 {
  font-family: "Press Start 2P", "Nise-Sega", sans-serif;
  font-weight: 100;
  color:#00ffff;
}

/* snitch */


button {
  background-image: linear-gradient(to right, #00ffff, #00ffff);
  border-radius: 50px;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  padding: 10px 25px;
  transition: all 0.1s ease-in-out;
}

button.redpill{
  background-image: linear-gradient(to right, #d10101, #bc1717);
  border-radius: 50px;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  padding: 10px 25px;
  transition: all 0.1s ease-in-out;
}

button:active {
  opacity: 0.8;
}

button:focus {
  outline: none;
  box-shadow: 0 0 1px 2px #00ffff;
}

.modal-wrapper {
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.modal-wrapper.open {
opacity: 1;
z-index: 999;
}

.modal {
background-color: rgb(0, 0, 0);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 380px;
max-width: 95%;
}

.modal-header {
background: #00ffff;
background-image: linear-gradient(to right, #00ffff, #00ffff);
color: #fff;
padding: 15px 0;
}

.modal-header h3 {
margin: 0;
}

.modal-body {
padding: 15px 20px;
}

.modal-body h4 {
margin: 0;
}

.modal-body p {
letter-spacing: 0.5px;
line-height: 24px;
margin: 10px 0 0;
}

.modal-footer {
background-color: #eee;
padding: 15px 0;
}

@font-face { 
font-family: "Press Start 2P", "Nise-Sega", sans-serif; src: url(fonts/NiseSega.TTF); 
}

.larger-tx, .ca {
  font-size:1.3rem;
}
.highlight {
  font-size:1rem;
  font-family: 'Courier';
}
.bridge {
  list-style-type: none;
}

.mayan {
  font-size:1.3rem;
  font-family: 'Courier';
}
.addy{
  color:turquoise;
  font-family: 'Courier';
  overflow-wrap: break-word;
}
.shinybtn {
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 15px 25px;
	background-color: #00ffff;
	background-image: linear-gradient(#00ffff,#00ffff);

	/* text styles */
  color: #000;
  font-weight: bol;
	text-decoration: none;
	font-size: 25px;
	font-family: sans-serif;
  margin-bottom: 3rem;
}

.shinybtn:after {
  content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.2));
}

.bybit-orange {
  color:#00ffff;
}

.none {
  display:none;
}

.parody {
  font-family: "Silkscreen", "Basilea", cursive;
}
/* Elysium / HYPE-2025 accents */
.addy { color: #00ffff !important; }
h2 { color: #00ffff !important; text-shadow: 0 0 8px rgba(0,255,255,0.45); }
.top-nav a { color: #ffffff; }
.top-nav a:hover { color: #00ffff; }
hr { color: #00ffff !important; background-color: #00ffff !important; }
.marquee-hype { color: #00ffff !important; }
#elysium-pills { position: fixed; inset: 0; width:100%; height:100%; pointer-events: none; z-index: 2147483000; overflow: hidden; }
.elysium-pill {
  position: absolute; width: 28px; height: 14px; border-radius: 999px;
  background: linear-gradient(135deg, #00ffff 0%, #3ea899 55%, #00ffff 100%);
  box-shadow: 0 0 8px rgba(0,255,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  will-change: transform, opacity;
  animation: elysium-pill-fall var(--dur, 1.4s) linear forwards;
}
.elysium-pill img { width: 10px; height: 10px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0,0,0,0.35); }
@keyframes elysium-pill-fall {
  0% { transform: translate3d(0,0,0) rotate(var(--rot0, -20deg)); opacity: 0.95; }
  100% { transform: translate3d(var(--dx,0px), var(--dy,120px), 0) rotate(var(--rot1,160deg)); opacity: 0; }
}
.hero-banner { display:block; width:min(920px,100%); margin: 12px auto; border: 4px solid #00ffff; box-shadow: 0 0 0 3px #00ffff; }

.HarryPotterObamaSonic10Inu, .HarryPotterHyperMarioKinetiqMethLiquid47i {
  font-family: "Press Start 2P", "Nise-Sega", sans-serif;
  font-weight: 100;
  background: linear-gradient(to right, #00ffff, #00ffff, #00ffff, #00ffff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top:-1em;
  text-align: center;
  line-height: 1.4;
  font-size: clamp(14px, 2.6vw, 28px);
}

/* Mobile overflow guards */
html, body { max-width: 100%; overflow-x: clip; }
.top-nav { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
.top-nav a { white-space: normal; word-break: break-word; }
img, video { max-width: 100%; height: auto; }
textarea { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
.hero-banner { max-width: 100%; }
marquee { max-width: 100%; }
.content-area { overflow-x: clip; }
@media (max-width: 560px) {
  .top-nav { font-size: 14px; }
  .HarryPotterHyperMarioKinetiqMethLiquid47i { font-size: 12px !important; padding: 0 6px; }
  .ca, .larger-tx, .mayan { font-size: 1rem !important; }
  p[style*="font-size: 24px"] { font-size: 16px !important; }
  img[width="400px"], img[width="400"] { width: 100% !important; height: auto !important; }
  .modal { width: 92vw; }
}

/* ADHD / AUTISM SPECTRUM TEST */
.spectrum-test {
  margin: 14px 0 18px;
  padding: 14px 12px 16px;
  border: 3px solid #00ffff;
  box-shadow: 0 0 0 3px #00ffff, 4px 4px 0 #000;
  background: rgba(0,0,0,0.55);
  max-width: 100%;
}
.spectrum-title {
  margin: 0 0 4px;
  font-family: "Press Start 2P", "Nise-Sega", monospace;
  font-size: clamp(11px, 2.8vw, 16px);
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0,255,255,0.5);
  line-height: 1.45;
}
.spectrum-sub {
  margin: 0 0 12px;
  color: #00ffff;
  font-family: "Silkscreen", "Basilea", cursive;
  font-size: clamp(14px, 3.2vw, 20px);
}
.spectrum-scale { margin: 0 0 12px; }
.spectrum-bar {
  height: 14px;
  border: 2px solid #000;
  border-radius: 999px;
  background: linear-gradient(90deg, #3ea899 0%, #00ffff 35%, #00ffff 70%, #00ffff 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.spectrum-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: #fff;
  font-family: "Orbitron", monospace;
  letter-spacing: 0.5px;
}
.spectrum-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spectrum-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 2px solid #00ffff;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,255,255,0.08), rgba(0,255,255,0.12));
  color: #fff;
  cursor: pointer;
  font-family: "Basilea", "Silkscreen", cursive;
  font-size: clamp(13px, 3.3vw, 17px);
  line-height: 1.3;
  box-shadow: 2px 2px 0 #000;
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}
.spectrum-opt:hover { border-color: #00ffff; }
.spectrum-opt:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.spectrum-opt .lvl {
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  color: #000;
  background: #00ffff;
  border: 2px solid #000;
}
.spectrum-opt[data-level="4"] .lvl { background: #00ffff; color: #fff; }
.spectrum-opt[data-level="3"] .lvl { background: #00ffff; color: #fff; }
.spectrum-opt[data-level="2"] .lvl { background: #3ea899; color: #fff; }
.spectrum-opt .txt { flex: 1; }
.spectrum-opt.selected {
  border-color: #00ffff;
  background: linear-gradient(90deg, rgba(0,255,255,0.35), rgba(0,255,255,0.25));
  outline: 2px solid #00ffff;
}
.spectrum-order-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-family: monospace;
}
.spectrum-result {
  margin: 12px 0 0;
  min-height: 1.4em;
  padding: 10px 12px;
  border: 2px dashed #00ffff;
  color: #00ffff;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(11px, 2.6vw, 14px);
  line-height: 1.5;
  display: none;
}
.spectrum-result.show { display: block; background: rgba(0,0,0,0.45); }
@media (max-width: 560px) {
  .spectrum-test { padding: 12px 8px 14px; }
  .spectrum-opt { padding: 10px 8px; }
}

/* Funny Videos slots */
.elysium-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 12px 0 8px;
}
@media (min-width: 800px) {
  .elysium-videos { grid-template-columns: 1fr 1fr; }
}
.elysium-video-slot {
  margin: 0;
  border: 3px solid #00ffff;
  box-shadow: 0 0 0 3px #00ffff;
  background: rgba(0,0,0,0.55);
  overflow: hidden;
  position: relative;
  min-height: 180px;
}
.elysium-video-slot video {
  display: none;
  width: 100%;
  height: auto;
  max-height: 360px;
  background: #000;
  vertical-align: middle;
}
.elysium-video-slot.has-video video { display: block; }
.elysium-video-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  padding: 16px;
  color: #00ffff;
  font-family: "Press Start 2P", "Nise-Sega", monospace;
  font-size: clamp(10px, 2.4vw, 13px);
  line-height: 1.55;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,255,0.05) 3px, rgba(0,255,255,0.05) 4px),
    linear-gradient(135deg, rgba(62,168,153,0.35), rgba(0,255,255,0.25));
}
.elysium-video-slot.has-video .elysium-video-ph { display: none; }
.elysium-video-ph code {
  color: #00ffff;
  font-size: 0.95em;
  word-break: break-all;
}

.addy.ca-wrap, .ca-wrap {
  overflow-wrap: anywhere;
  word-break: break-all;
  display: inline;
}

/* Blue glow pass */
@keyframes ely-blue-shift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes ely-glow-pulse{0%,100%{text-shadow:0 0 4px #00ffff,0 0 12px #00b3ff,0 0 24px #0066ff}50%{text-shadow:0 0 6px #7df9ff,0 0 18px #00d8ff,0 0 36px #1e40ff}}
h1,h2,h3{background:linear-gradient(90deg,#00ffff,#00d8ff,#3b82f6,#1e40ff,#7df9ff,#00ffff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#00ffff !important;animation:ely-blue-shift 4s linear infinite;filter:drop-shadow(0 0 6px rgba(0,216,255,.8)) drop-shadow(0 0 16px rgba(30,64,255,.55));text-shadow:none !important}
p,li{text-shadow:0 0 6px rgba(0,216,255,.45),0 0 14px rgba(30,64,255,.25)}
span[style*="#00ffff"],strong,b{animation:ely-glow-pulse 2.4s ease-in-out infinite}
a{color:#7df9ff;text-shadow:0 0 6px #00d8ff,0 0 14px #0066ff}
.ca{color:#7df9ff !important;text-shadow:0 0 8px #00d8ff,0 0 20px #1e40ff}


/* ELYSIUM47i NFT section */
.ely-nft-section {
  margin: 8px 0 18px;
  padding: 8px 4px 16px;
  text-align: center;
}
.ely-nft-copy {
  color: #7df9ff !important;
  font-size: clamp(16px, 4vw, 22px);
  line-height: 1.45;
  margin: 6px auto 16px;
  max-width: 36em;
  text-shadow: 0 0 8px #00d8ff, 0 0 20px #1e40ff;
}
.ely-nft-video-wrap {
  margin: 0 auto;
  max-width: min(560px, 100%);
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(135deg, #00ffff, #00d8ff, #3b82f6, #1e40ff, #7df9ff);
  box-shadow:
    0 0 12px rgba(0,255,255,0.75),
    0 0 28px rgba(0,184,255,0.55),
    0 0 48px rgba(30,64,255,0.4);
  overflow: hidden;
}
.ely-nft-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  border-radius: 15px;
  background: #000;
  vertical-align: middle;
}
@media (max-width: 560px) {
  .ely-nft-section { padding: 4px 0 12px; }
  .ely-nft-video-wrap { border-radius: 14px; }
  .ely-nft-video { border-radius: 11px; max-height: 320px; }
}
