/* Retro arcade look */
body {
  margin: 0;
  min-height: 100vh;
  background: #0b0b0b;
  color: #00ff99;
  font-family: "Courier New", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  text-align: center;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: 4px;
  margin-bottom: 10px;
  text-shadow: 0 0 8px #00ff99;
}

.subtitle {
  font-size: 1rem;
  margin-bottom: 40px;
  color: #88ffcc;
}

.icon-button {
  position: fixed;
  width: 90px;
  height: 90px;
  background: #00ff99;
  border: 3px solid #00cc77;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 0 0 3px #003322,
    0 0 18px #00ff99;

  animation: crtFlicker 3.5s infinite;
  transition:
    transform 0.25s cubic-bezier(.25,1.5,.5,1),
    box-shadow 0.25s ease;
}


.icon-button img {
  width: 48px;
  height: auto;
  filter:
    drop-shadow(0 0 6px #00ff99)
    drop-shadow(0 0 12px #00ff99);
}

.icon-button:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 0 3px #003322,
    0 0 30px #00ff99;
}

.icon-button:active {
  transform: scale(0.95);
}

.top-left {
  top: 480px;
  left: 480px;
}

.top-right {
  top: 480px;
  right: 480px;
}

.bottom-left {
  bottom: 480px;
  left: 480px;
}

.bottom-right {
  bottom: 480px;
  right: 480px;
}

@keyframes crtFlicker {
  0%   { opacity: 1; }
  3%   { opacity: 0.9; }
  6%   { opacity: 1; }
  8%   { opacity: 0.85; }
  10%  { opacity: 1; }
  100% { opacity: 1; }
}

.top-left:hover {
  transform: translate(18px, 18px) scale(1.1);
}

.top-right:hover {
  transform: translate(-18px, 18px) scale(1.1);
}

.bottom-left:hover {
  transform: translate(18px, -18px) scale(1.1);
}

.bottom-right:hover {
  transform: translate(-18px, -18px) scale(1.1);
}

h1 {
  animation: crtFlicker 4s infinite;
}