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

img {
  image-rendering: pixelated;
}

body {
  background: #00ff00;
  font-family: Arial, Helvetica, sans-serif;
}

/* FRAME */
.browser-frame {
  width: 90%;
  max-width: 1100px;
  margin: 40px auto;
  border: 6px solid black;
  background: #000;
}

.browser-bar {
  background: linear-gradient(#2c2cff, #000080);
  color: white;
  padding: 6px;
}

/* CONTENT */
.content {
  background: repeating-linear-gradient(
    45deg,
    #9fdcff,
    #9fdcff 20px,
    #bfa9ff 20px,
    #bfa9ff 40px
  );
  padding: 30px;
  text-align: center;
  position: relative;
}

/* CRT */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.06) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* TITLE */
h1 {
  font-size: 64px;
  color: orange;
  text-shadow: 4px 4px black;
}

.wobble {
  animation: wobble 1.5s infinite alternate;
}

@keyframes wobble {
  from { transform: translateX(-1px); }
  to { transform: translateX(1px); }
}

/* MARQUEE */
.marquee {
  background: black;
  color: #00ff00;
  margin: 20px 0;
  padding: 10px;
}

.jitter {
  animation: jitter 0.3s infinite;
}

@keyframes jitter {
  0% { transform: translateX(0); }
  50% { transform: translateX(-1px); }
  100% { transform: translateX(1px); }
}

/* SPRITES */
.sprites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.sprites img {
  max-height: 120px;
}

.bob {
  animation: bob 1.8s infinite alternate;
}

@keyframes bob {
  to { transform: translateY(-6px); }
}

/* SPIN */
.spin {
  animation: spin 2s linear infinite;
}

.intermittent {
  animation-play-state: running;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* STATUS */
.status {
  font-family: "Courier New", monospace;
  margin: 10px 0;
}

.blink {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* LOADING BAR */
.loading-frame {
  width: 80%;
  height: 22px;
  margin: 15px auto;
  background: #c0c0c0;
  border: 3px solid black;
}

.loading-bar {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #000080,
    #000080 10px,
    #2c2cff 10px,
    #2c2cff 20px
  );
}

/* SOUND BUTTON */
.sound-btn {
  margin: 10px;
  font-family: Arial;
}

/* WIN98 DIALOG */
.win98 {
  display: none;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: #c0c0c0;
  border: 3px solid black;
  padding: 10px;
  z-index: 999;
}

.win98-title {
  background: navy;
  color: white;
  padding: 4px;
}

/* EASTER EGG */
.easter {
  animation: party 0.5s infinite;
}

@keyframes party {
  50% { background-color: yellow; }
}