body {
    margin: 0;
    padding: 0;
    background-color: black;
    background: url('bg.gif');
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
}
.animated-3d-text {
    font-size: 3rem;
    font-weight: 900;
    color: #ffdd00;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 
      1px 1px 0 #f00,
      2px 2px 0 #0f0,
      3px 3px 0 #00f,
      4px 4px 0 #f0f,
      5px 5px 0 #0ff;
    animation: glow 1.5s infinite alternate;
  }
  @keyframes glow {
    0% {
      text-shadow: 
        1px 1px 0 #f00,
        2px 2px 0 #0f0,
        3px 3px 0 #00f,
        4px 4px 0 #f0f,
        5px 5px 0 #0ff;
      transform: rotateX(0deg) rotateY(0deg);
    }
    50% {
      text-shadow: 
        2px 2px 5px #f00,
        4px 4px 5px #0f0,
        6px 6px 5px #00f,
        8px 8px 5px #f0f,
        10px 10px 5px #0ff;
      transform: rotateX(10deg) rotateY(10deg);
    }
    100% {
      text-shadow: 
        1px 1px 0 #f00,
        2px 2px 0 #0f0,
        3px 3px 0 #00f,
        4px 4px 0 #f0f,
        5px 5px 0 #0ff;
      transform: rotateX(0deg) rotateY(0deg);
    }
  }
  .text-3d {
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffdd00;
    text-transform: uppercase;
    text-align: center;
    text-shadow:
      1px 1px #ff9900,
      2px 2px #ff8800,
      3px 3px #ff7700,
      4px 4px #ff6600,
      5px 5px #ff5500,
      6px 6px #ff4400,
      7px 7px #ff3300;
  }
  .font1 {
    font-family: 'Pacifico', cursive;
    font-size: 2rem;
    color: #ffdd00;
    text-shadow:
      1px 1px #ff9900,
      2px 2px #ff8800,
      3px 3px #ff7700,
      4px 4px #ff6600;
  }
  .font2 {
    font-family: 'Roboto Slab', serif;
    font-size: 3rem;
    color: #00ffff;
    text-shadow:
      1px 1px #008888,
      2px 2px #006666,
      3px 3px #004444;
  }
  .bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('snow.gif') repeat;
  pointer-events: none;
  z-index: 9999;
}
/* Slowly shaky animation */
.shaky {
  display: inline-block;
  animation: shaky 2s infinite ease-in-out;
}

@keyframes shaky {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-2px, 1px) rotate(-1deg); }
  40%  { transform: translate(2px, -1px) rotate(1deg); }
  60%  { transform: translate(-1px, 2px) rotate(0deg); }
  80%  { transform: translate(1px, -2px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* Slow left-right shaky animation */
.shaky-lr {
  display: inline-block;
  animation: shakyLR 2s infinite ease-in-out;
}

@keyframes shakyLR {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
.modal-dialog {
    margin: 1.75rem auto;
    max-width: 300px;
}
#doors {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 9999;
  cursor: pointer;
}

/* Left and right doors */
.door-left, .door-right {
  width: 50%;
  height: 100%;
  background: #111;
  transition: transform 1.5s ease-in-out;
}

/* Door opening transforms */
.open-left {
  transform: translateX(-100%);
}
.open-right {
  transform: translateX(100%);
}

/* Optional door content (like handles) */
.door-left::before, .door-right::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 50px;
  background: #888;
  transform: translateY(-50%);
}

.door-left::before { right: 20px; }
.door-right::before { left: 20px; }
#doorText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  z-index: 10;
  pointer-events: none; /* so clicks pass to doors */
}
/* Page content hidden behind doors */
#pageContent {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.show-content {
  opacity: 1;
}