* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #000080 url("assets/tiled-background.gif") repeat;
  color: white;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
}

.wordart-header {
  display: block;
  margin: 0 auto -60px;
  
  filter:
    drop-shadow(3px 0 #160080)
    drop-shadow(-3px 0 #160080)
    drop-shadow(0 3px #160080)
    drop-shadow(0 -3px #160080)
    drop-shadow(8px 8px #f39521);
}


/* draggable gifs */

.draggable-sticker {
  position: absolute;
  z-index: 10;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.draggable-sticker:active {
  cursor: grabbing;
}

.draggable-sticker img {
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}


/* popups */

.popup-window {
  position: fixed;
  z-index: 9999;
  width: 540px;
  max-width: calc(100% - 50px);
  padding: 5px;
  color: black;
  background: #c0c0c0;
  border: 5px solid;
  border-color: white #404040 #404040 white;
  box-shadow: 15px 15px rgba(0, 0, 0, 0.7);
}

.winner-popup {
  top: 50%;
  left: 50%;
  width: 800px;
  padding: 8px;
  transform: translate(-50%, -50%);
  border-width: 7px;
  outline: 9px solid red;
  animation: popup-chaos 0.45s steps(1) infinite;
}

#popup2 {
  display: none;
  top: calc(50% - 45px);
  left: calc(50% - 70px);
  transform: translate(-50%, -50%);
}

#popup3 {
  display: none;
  top: calc(50% + 35px);
  left: calc(50% + 65px);
  transform: translate(-50%, -50%);
}

#popup4 {
  display: none;
  top: calc(50% - 20px);
  left: calc(50% + 30px);
  transform: translate(-50%, -50%);
}

.credit-card-popup {
  display: none;
  top: 50%;
  left: 50%;
  width: 850px;
  padding: 9px;
  transform: translate(-50%, -50%);
  outline: 12px solid red;
  animation: credit-card-chaos 0.3s steps(1) infinite;
}

.final-popup {
  display: none;
  top: calc(50% + 25px);
  left: calc(50% - 35px);
  width: 650px;
  transform: translate(-50%, -50%);
}

.popup-title-bar {
  display: flex;
  align-items: center;
  padding: 3px;
  color: white;
  background: #000080;
  border: 2px inset #c0c0c0;
  font-family: "Times New Roman", serif;
  font-size: 20px;
  font-weight: bold;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.popup-title-text {
  flex: 1;
  padding-left: 28px;
  text-align: center;
}

.credit-title-bar {
  color: yellow;
  background: red;
}

.fake-close-button,
.real-close-button {
  width: 28px;
  height: 25px;
  padding: 0;
  color: black;
  background: #c0c0c0;
  border: 3px solid;
  border-color: white #404040 #404040 white;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  cursor: pointer;
}

.fake-close-button:active,
.real-close-button:active {
  padding-top: 2px;
  padding-left: 2px;
  border-color: #404040 white white #404040;
}

.popup-inside {
  margin-top: 4px;
  padding: 35px 25px;
  color: black;
  background: white;
  border: 3px solid;
  border-color: #404040 white white #404040;
  text-align: center;
}

.popup-message {
  margin: 0 0 28px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.25;
}

.flashing-winner-text {
  margin: 0 0 35px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 58px;
  font-weight: bold;
  line-height: 1.1;
  animation: scam-flash 0.5s steps(1) infinite;
}

.final-message {
  color: #000080;
  font-size: 32px;
}

.popup-button {
  padding: 12px 28px;
  color: black;
  background: #c0c0c0;
  border: 4px solid;
  border-color: white #404040 #404040 white;
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.popup-button:active {
  position: relative;
  top: 2px;
  left: 2px;
  border-color: #404040 white white #404040;
}


/* fake card form */

.credit-card-inside {
  padding: 35px;
  background: yellow;
}

.credit-card-message {
  margin: 0 0 28px;
  color: red;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.1;
  animation: credit-message-flash 0.25s steps(1) infinite;
}

.fake-payment-form {
  max-width: 600px;
  margin: 0 auto 28px;
  padding: 18px;
  background: #c0c0c0;
  border: 5px solid;
  border-color: #404040 white white #404040;
  text-align: left;
}

.fake-field-row {
  display: flex;
  gap: 15px;
}

.fake-field-row .fake-field-group {
  flex: 1;
}

.fake-field-group {
  margin-bottom: 14px;
}

.fake-field-label {
  display: block;
  margin-bottom: 4px;
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.fake-input {
  min-height: 40px;
  padding: 8px;
  color: #808080;
  background: white;
  border: 3px solid;
  border-color: #404040 white white #404040;
  font-family: "Courier New", monospace;
  font-size: 18px;
}

.payment-button {
  color: white;
  background: red;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 22px;
}


/* flashing nonsense */

@keyframes popup-chaos {
  0% {
    outline-color: red;
    box-shadow:
      0 0 0 18px yellow,
      25px 25px rgba(0, 0, 0, 0.7);
  }

  25% {
    outline-color: cyan;
    box-shadow:
      0 0 0 18px magenta,
      25px 25px rgba(0, 0, 0, 0.7);
  }

  50% {
    outline-color: lime;
    box-shadow:
      0 0 0 18px blue,
      25px 25px rgba(0, 0, 0, 0.7);
  }

  75% {
    outline-color: magenta;
    box-shadow:
      0 0 0 18px #ff6600,
      25px 25px rgba(0, 0, 0, 0.7);
  }
}

@keyframes scam-flash {
  0% {
    color: red;
    text-shadow: 3px 3px yellow;
  }

  25% {
    color: blue;
    text-shadow: 3px 3px lime;
  }

  50% {
    color: magenta;
    text-shadow: 3px 3px cyan;
  }

  75% {
    color: #00aa00;
    text-shadow: 3px 3px #ff9900;
  }
}

@keyframes credit-card-chaos {
  0% {
    outline-color: red;
    box-shadow: 0 0 0 22px yellow;
  }

  25% {
    outline-color: blue;
    box-shadow: 0 0 0 22px lime;
  }

  50% {
    outline-color: magenta;
    box-shadow: 0 0 0 22px cyan;
  }

  75% {
    outline-color: #ff6600;
    box-shadow: 0 0 0 22px red;
  }
}

@keyframes credit-message-flash {
  0% {
    color: red;
  }

  50% {
    color: blue;
  }
}

@media (max-width: 700px) {
  .flashing-winner-text {
    font-size: 38px;
  }

  .credit-card-message {
    font-size: 27px;
  }

  .popup-message {
    font-size: 22px;
  }

  .fake-field-row {
    display: block;
  }
}