:root{
    --yellow-1: #2b2a85;
    --yellow-2: #597ab6;
    --yellow-3: #06014b;
    --yellow-4: #060055;
    --cloud-color: rgba(255,255,255,0.85);
    --bubble-color: rgba(255,255,255,0.65);
    --anim-duration-slow: 40s;
    --anim-duration-medium: 25s;
    --anim-duration-fast: 14s;
  }

  /* Animated background */
  .animated-bg{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: block;
    background: linear-gradient(120deg, var(--yellow-1), var(--yellow-2) 30%, var(--yellow-3) 70%);
    background-size: 200% 200%;
    animation: gradientShift var(--anim-duration-medium) ease-in-out infinite;
  }
  @keyframes gradientShift{
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .animated-bg::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.035) 50%, rgba(255,255,255,0.035) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    animation: stripeMove var(--anim-duration-slow) linear infinite;
  }
  @keyframes stripeMove{
    from { background-position: 0 0; }
    to   { background-position: 80px 80px; }
  }

  /* Clouds */
  .cloud{
    position: absolute;
    top: 10%;
    left: -20%;
    width: 28rem;
    height: 9rem;
    background: linear-gradient(180deg, var(--cloud-color), rgba(255,255,255,0.75));
    border-radius: 50px;
    filter: blur(6px);
    opacity: 0.95;
    animation: cloudMove var(--anim-duration-slow) linear infinite;
    z-index: 2;
  }
  .cloud.small { width: 16rem; height: 5.4rem; top: 30%; left: -30%; opacity: .9; filter: blur(5px); animation-duration: 36s; }
  .cloud.mid   { width: 22rem; height: 7rem; top: 55%; left: -25%; opacity: .92; filter: blur(6px); animation-duration: 46s; animation-delay: 6s;}
  .cloud.right { left: 100%; top: 18%; animation-duration: 48s; animation-delay: 2s; }

  @keyframes cloudMove{
    0%   { transform: translateX(-10vw); }
    50%  { transform: translateX(60vw); }
    100% { transform: translateX(120vw); }
  }

  /* Floating bubbles */
  .bubble{
    position: absolute;
    bottom: -6rem;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), transparent 40%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    opacity: .9;
    z-index: 2;
    animation: bubbleRise var(--anim-duration-fast) ease-in infinite;
  }
  .bubble.xs { width: 2.2rem; height: 2.2rem; animation-duration: 12s; bottom: -3rem; opacity: .75; }
  .bubble.sm { width: 3.6rem; height: 3.6rem; animation-duration: 18s; bottom: -4.5rem; opacity: .8; }
  .bubble.lg { width: 8rem; height: 8rem; animation-duration: 28s; bottom: -8rem; opacity: .95; }

  @keyframes bubbleRise{
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: .8; }
    50%  { transform: translateY(-55vh) translateX(6vw); opacity: .7; }
    90%  { opacity: .1; }
    100% { transform: translateY(-100vh) translateX(10vw); opacity: 0; }
  }

  .bubble[data-left="10"] { left: 10%; animation-delay: 0s; }
  .bubble[data-left="25"] { left: 25%; animation-delay: 3s; }
  .bubble[data-left="40"] { left: 40%; animation-delay: 6s; }
  .bubble[data-left="60"] { left: 60%; animation-delay: 1s; }
  .bubble[data-left="75"] { left: 75%; animation-delay: 9s; }
  .bubble[data-left="85"] { left: 85%; animation-delay: 4s; }

  /* Page content styling (Bootstrap friendly) */
  .page-content{
    position: relative;
    z-index: 3;
    margin-top: 10rem;
    text-align: center;
    color: #3b2f00;
  }

  .school-brand{
    background: rgba(255,255,255,0.85);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    display: inline-block;
  }

  @media (prefers-reduced-motion: reduce){
    .animated-bg, .animated-bg::before, .cloud, .bubble {
      animation: none !important;
    }
  }
  
  
 /* Styles for screens up to 767px wide (e.g., mobile devices) */
@media only screen and (max-width: 767px) {
	#comingSoon {
		font-size:40px !important;
	}
}