/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  /*background-color: white;
  color: black;*/
  font-family: Verdana;
  color: #fff;
  
  background-image: url('images/background-dark.png');
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
}

/* button*/
div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
/*.btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; 
}*/
.btn {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;

  padding: 14px 36px;
  font-size: 1.3rem;
  font-weight: bold;
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #fff;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #00ffff; /* glowing text */

  background: linear-gradient(
    45deg,
    #ff00ff,
    #ff66ff,
    #ff99cc,
    #ffff99,
    #66ffff,
    #ff00ff
  );
  background-size: 400% 400%;
  border: 3px ridge #ffccff; /* 2000s style bevel border */
  border-radius: 15px;
  cursor: pointer;
  box-shadow:
    0 0 20px #ff00ff,
    inset 0 0 10px #ffffff;
  
  animation: rainbowBackground 3s linear infinite,
             textBling 1s steps(1, end) infinite;
}

.btn:hover {
  transform: translateX(-50%) scale(1.15) rotate(-3deg);
  box-shadow:
    0 0 30px #00ffff,
    inset 0 0 15px #ffffff;
}

/* Moving background for the rainbow look */
@keyframes rainbowBackground {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Text bling effect (flicker glow) */
@keyframes textBling {
  0%, 100% { text-shadow: 0 0 5px #ff00ff, 0 0 15px #00ffff; }
  50%      { text-shadow: 0 0 10px #ffff00, 0 0 25px #ff00ff; }
}

input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background:
      url('images/sparkle.gif') repeat,
      url('images/background-light.png') no-repeat center center;
    
    background-size: cover; 
    min-height: 100vh;
}

.threat-image {
  position: absolute;
  bottom: 0;          /* stick to the bottom */
  left: 50%;          /* move its left edge to the center */
  transform: translateX(-50%); /* pull it back by half its own width (perfect centering) */
  z-index: 10;
}

.mid-image {
  position: fixed; /* stays in place even when scrolling */
  top: 43%;        /* halfway down the page */
  left: 50%;       /* horizontally center */
  transform: translate(-50%, -50%); /* true centering */
  z-index: 11; /* above the background, below the button if needed */
  width: 700px;
}