*{margin:0;padding:0;box-sizing:border-box}html{height:100%;background:linear-gradient(135deg,#c9d6ff,#e2e2e2)}body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;position:relative;overflow:hidden;text-align:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:url(/clouds.png);background-repeat:repeat;opacity:.7;animation:cloudDrift 120s linear infinite;z-index:-1}.container{perspective:1500px;max-width:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;padding:20px;text-align:center}.card,.container{width:100%;height:auto}.card{aspect-ratio:2/3;position:relative;box-shadow:0 15px 35px rgba(0,0,0,.5);border-radius:15px;transition:transform .3s ease-out,box-shadow .3s ease;cursor:pointer}.card-back,.card-front{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:15px;overflow:hidden}.card-front{background-color:white;transform:rotateY(0deg)}.card-front:after{content:"";position:absolute;top:-150%;left:-50%;width:200%;height:200%;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0));transform:rotate(30deg);animation:shine 7s ease-in-out infinite;pointer-events:none}.card-front img{width:100%;height:100%;object-fit:cover}.card-back{transform:rotateY(180deg);background:#ffffff}.card-back img{width:100%;height:100%;object-fit:cover}@keyframes spin{0%{transform:rotateY(0deg)}to{transform:rotateY(1turn)}}@keyframes shine{0%{transform:translateX(-100%) rotate(30deg)}20%,to{transform:translateX(100%) rotate(30deg)}}@keyframes cloudDrift{0%{background-position:0 0}to{background-position:100% 100%}}@keyframes pulse{0%{box-shadow:0 15px 35px rgba(0,0,0,.5)}50%{box-shadow:0 15px 45px rgba(0,0,0,.7),0 0 20px rgba(255,255,255,.5)}to{box-shadow:0 15px 35px rgba(0,0,0,.5)}}.container:hover .card{animation-play-state:paused;transform:scale(1.05);box-shadow:0 15px 35px rgba(0,0,0,.5),0 0 25px rgba(255,255,255,.7),0 0 40px rgba(173,216,230,.5)}.card,.container:hover .card{transition:transform .3s ease-out,box-shadow .3s ease-out}.card{transform-style:preserve-3d;animation:spin 20s linear infinite}.card-text-bottom,.card-text-top{text-align:center;font-family:Arial,sans-serif;color:#ffffff;text-shadow:0 2px 4px rgba(0,0,0,.7);width:100%;padding:20px;position:relative;z-index:1;margin-left:auto;margin-right:auto}.card-text-top{margin-bottom:15px;animation:fadeIn 1.5s ease-in-out 1.5s backwards}.card-text-bottom,.card-text-top{font-size:1.2rem;font-weight:700;letter-spacing:1px;width:100%;display:block;text-align:center}.card-text-bottom{margin-top:15px;animation:fadeIn 1.5s ease-in-out 2s backwards;left:0;right:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.twitter-link{color:#ffffff;text-decoration:none;position:relative;transition:all .3s ease}.twitter-link:hover{color:#00FFFF;text-shadow:0 0 10px rgba(0,255,255,.8),0 0 15px rgba(0,255,255,.6)}.twitter-link:after{content:"";position:absolute;width:100%;height:2px;bottom:-2px;left:0;background-color:#00FFFF;transform:scaleX(0);transform-origin:bottom right;transition:transform .3s ease}.twitter-link:hover:after{transform:scaleX(1);transform-origin:bottom left}@media (max-width:500px){body{padding:20px 10px}.container{max-width:85vw}.card{width:85vw;max-width:270px}}@media (max-width:375px){.container{max-width:90vw;padding:10px}.card-text-bottom,.card-text-top{padding:10px 5px;font-size:1rem}.card{width:90vw;max-width:270px}}