html, body {
     height: 100%;
     margin: 0;
    }

    main {
     height: calc(100vh - 80px);
     display: flex;
    }

    .title {
     color:#ffffff;
     font-size:28px;
     text-align:center;
     text-shadow: 0 8px 16px rgba(0,0,0,0.7);
     margin: 16px;
    }

    .hero {
     color: #ffffff;
     font-size: 28px;
     display: flex;
     width: 100%;
     justify-content: center;
     align-items: center;
     text-align: center;
     text-shadow: 0 8px 16px rgba(0,0,0,0.7);
     animation: float 3.5s ease-in-out infinite;
     will-change: transform;
    }

    @keyframes float {
     0%   { transform: translateY(0); }
     50%  { transform: translateY(-10px); }
     100% { transform: translateY(0); }
    }

    footer {
     position: fixed;
     width: 100vw;
     bottom: 0px;
     left: 0px;
     z-index: 2;
     color: #ffffff;
     font-size:16px; 
     text-align:center;
     text-shadow: 0 8px 16px rgba(0,0,0,0.7);
     margin: 16px;
    }

    a {
     color: #ffffff;
     text-decoration: none;
    }

    .embed-glass {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(16px) saturate(1.2);
     -webkit-backdrop-filter: blur(16px) saturate(1.2);
     border-radius: 22px;
     border: 1px solid rgba(255, 255, 255, 0.28);
     box-shadow:0 8px 24px rgba(0,0,0,0.08);
     padding: 18px;
    }

    .ripple-global {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.7);
  transform: scale(0);
  animation: ripple-global 0.5s ease-out;
  z-index: 9999;
}

@keyframes ripple-global {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

   .card:active {
  animation: jelly 0.3s;
}

@keyframes jelly {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.95, 1.05); }
  100% { transform: scale(1); }
}

.tab span {
  display: inline-block;
  margin: 2px;
  padding: 2px 4px;
  background: #ffabab;
  color: #ffffff;
  border-radius: 6px;
}
.tab a {
  text-decoration: none;
  color: #ffffff;
}