body {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", Arial, sans-serif !important;
  -webkit-text-size-adjust: 100%;
  background: repeating-linear-gradient(
    45deg,
    hotpink,
    hotpink 20px,
    cyan 20px,
    cyan 40px
  );
  color: yellow;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 700px;
  margin: 30px auto;
  background: blue;
  border: 6px ridge yellow;
  padding: 20px;
  box-shadow: 10px 10px 0px red, -6px -6px 0px lime;
}

h1 {
  font-size: 44px;
  text-shadow: 3px 3px red, -2px -2px lime, 0px 0px 10px cyan;
  white-space: nowrap;
  word-break: keep-all;
}

.box {
  background: purple;
  border: 4px dotted lime;
  margin: 15px 0;
  padding: 12px;
  box-shadow: 4px 4px 0px yellow;
}

.rotate-left {
  transform: rotate(-2deg);
}

.rotate-right {
  transform: rotate(2deg);
}

marquee {
  font-size: 18px;
  color: white;
  font-weight: bold;
}

.tiny {
  font-size: 10px;
  opacity: 0.75;
}

/* under construction image */
.under-construction {
  display: block;
  margin: 20px auto 5px auto;
  width: 70%;
  max-width: 300px;
  height: auto;
}

/* pinned badge */
.wedding-badge {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  
  width: min(60vw, 180px);
  height: auto;

  opacity: 0.9;
  z-index: 10;

  pointer-events: none;

  /* CRITICAL FIX */
  background: repeating-linear-gradient(
    45deg,
    hotpink,
    hotpink 20px,
    cyan 20px,
    cyan 40px
  );
  background-attachment: fixed;
  background-position: 0 0;
  will-change: transform;
}

.hit-counter {
  margin-top: 15px;
  font-family: "Courier New", monospace;
  font-size: 16px;
  color: #99ff99;
  background: #002200;
  display: inline-block;
  padding: 10px 14px;
  border: 3px inset #00ff00;
  box-shadow: 2px 2px 0px yellow;
  letter-spacing: 2px;
  border-radius: 8px;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
}

#counter {
  font-weight: bold;
}