html, body {
  height: 100%;
}

    /* === Your provided background + animations (fitted in) === */
    /* General background */
    body { 
  display: flex;
  flex-direction: column;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font-family: 'VT323', monospace;

      /* Multiple layers: animated dark overlay, animated gradient, mountain image */
      background:
        linear-gradient(rgba(255, 0, 0, 0.295), rgba(255, 255, 255, 0.25)), /* Dark overlay (top) */
        linear-gradient(-45deg, 
          rgba(161, 230, 82, 0.15), 
          rgba(0, 0, 0, 0.205), 
          rgba(234, 0, 255, 0.24), 
          rgba(161, 196, 253, 0.15)
        ), /* moving gradient */
        url('images/bgPixel.png'); /* base image layer */

      /* per-layer sizes/attachments/positions (same order as layers above) */
      background-size: cover, 400% 400%, cover; 
      background-attachment: fixed, fixed, fixed;
      background-position: center, 0% 25%, center;
      
      /* Two animations: gradient shift + breathing overlay */
      animation: gradientShift 10s ease infinite, breathingOverlay 10s ease-in-out infinite;
      color: #f4f4f4;
    }
    main{flex: 1;}
    .contain-spot{
      font-family: 'Luckiest Guy', serif;
    }
.bold{
  font-weight: bold;
}
    /* Gradient motion */
    @keyframes gradientShift {
      0%   { background-position: center, 0% 50%, center; }
      50%  { background-position: center, 100% 50%, center; }
      100% { background-position: center, 0% 50%, center; }
    }

    /* Breathing overlay fade in/out */
    @keyframes breathingOverlay {
      0%, 100% { background-color: rgba(0, 0, 0, 0.2); }
      50%      { background-color: rgba(0, 0, 0, 0.35); }
    }

    /* Hero section styling */
    .hero-section {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
    
    #loader {
  display: none;               /* keep hidden by default */
  position: absolute;          /* overlay inside .result-box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;               /* very high so it sits on top */
  pointer-events: none;        /* allow clicks to pass through if you want (optional) */
  background: transparent;/* subtle backdrop so GIF is visible on any content */
  padding: 12px 14px;
  border-radius: 10px;
}

#diceGif {
  display: block;
  width: 60px;
  height: auto;
  pointer-events: none;
  z-index: 10000;
}
    /* Random content box - slightly tweaked to be semi-transparent so the bg shows through */
    .result-box {
      min-height: 120px;
      border: 2px dashed rgba(255,255,255,0.15);
      padding: 20px;
      margin-top: 20px;
      background-color: rgba(255,255,255,0.85); /* changed to allow contrast; you can change to rgba(255,255,255,0.8) or lower */
      border-radius: 8px;
      transition: all 0.3s ease;
      color: #111;
      max-width: 700px;
      width: 100%;
  position: relative;    /* ADDED */
  z-index: 0;        
    }

    /* Hover effect for cards */
    .card:hover {
      transform: translateY(-5px);
      transition: transform 0.3s ease;
    }

    .gradient-text {
      background: linear-gradient(90deg, hotpink, yellow);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
 
    #randomBtn[disabled] { opacity: 0.6; cursor: not-allowed; }

    /* Responsiveness */
    @media (max-width: 576px) {
      .result-box { padding: 12px; }
      .hero-section h1 { font-size: 1.6rem; }
    }

    
.clock-border{
    position: relative;
    width: 150px;
    height: 150px;
    border:2px solid #00FFAA;
    border-radius:50%;
    box-sizing: border-box;
    background: #5c4213;
    opacity: 0.7;
    float: right;
  }

  /* numerals (kept similar to your layout, but adjust if needed) */
  .roman{
    position: absolute;
    font-size:15px;
    font-weight:lighter;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    pointer-events:none;
  }
  .num12 { top:8px; left:50%; top: -5px; transform:translateX(-50%); color:#ffee00; }
  .num3  { top:50%; right:0px; transform:translateY(-50%); color:#FFee00; }
  .num6  { bottom:8px; left:50%; top: 120px;transform:translateX(-50%); color:#FFee00; }
  .num9  { top:50%; left:0px; transform:translateY(-50%); color:#FFee00; }

  /* central container for hands (so we can center easily) */
  .hands {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  /* common hand rules */
  .hand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 100%; /* rotate around bottom-center */
    /* place bottom of element at the center: translate(-50%, -100%) */
    transform: translate(-50%, -100%) rotate(0deg);
    border-radius: 4px;
    box-sizing: border-box;
  }

  .sec-hand{
    width: 3px;
    height: 55px;
    background: #ffffff;
    /* slight offset so it points visually from center */
  }
  .sec-hand::after{
    content: '';
    position: absolute;
    left: -1px; /* center it */
    top: 55px; /* place at the end */
    width: 6px; /* wider than hand */
    height: 6px; /* square dot */
    background: #ffffff;
    border-radius: 50%;
  }
  .min-hand{
    width: 4px;
    height: 55px;
    background: #00ffaa;
  }

  .hour-hand{
    width: 5px;
    height: 40px;
    background: #00ffaa;
  }

  /* tiny pivot dot */
  .center-dot{
    position: absolute;
    left:50%;
    top:50%;
    width:12px;
    height:12px;
    background:#000000;
    border-radius:50%;
    transform: translate(-50%,-50%);
    z-index:10;
  }

.roman.num {
  position: absolute;
  left: 40%;
  top: 40%;
  transform: rotate(calc(var(--i) * 30deg)) 
             translateY(-60px)   /* pull inward */
             rotate(calc(var(--i) * -30deg));
  font-size: 18px;
  color: #f371ff;
  width: 30px;
  text-align: center;
}