.page{flex-wrap:wrap;place-content:center;width:100%;height:100vh;padding:2vmax;display:flex}.mario-container{perspective:1000px;justify-content:center;align-items:center;width:100%;height:100vh;margin:0;font-family:"Press Start 2P",monospace;display:flex;position:relative;overflow:hidden}.mario-container:before{content:"";pointer-events:none;background-image:radial-gradient(2px 2px at 20px 30px,#ffffff4d,#0000),radial-gradient(2px 2px at 40px 70px,#fff3,#0000),radial-gradient(1px 1px at 90px 40px,#fff6,#0000);background-size:100px 100px;width:100%;height:100%;animation:20s linear infinite float-particles;position:absolute;top:0;left:0}@keyframes float-particles{0%{transform:translateY(0)}to{transform:translateY(-100px)}}.question-block{background-blend-mode:overlay;cursor:pointer;width:120px;height:120px;transform-style:preserve-3d;background:linear-gradient(145deg,#fc0 0%,gold 50%,#fc0 100%),repeating-linear-gradient(0deg,#0000,#0000 10px,#0000001a 10px 12px),repeating-linear-gradient(90deg,#0000,#0000 10px,#0000001a 10px 12px);border-radius:8px;justify-content:center;align-items:flex-end;transition:all .3s;animation:3s ease-in-out infinite block-idle;display:flex;position:relative;overflow:visible;transform:rotateX(10deg)rotateY(10deg);box-shadow:inset -4px -4px #d4a400,inset 4px 4px #fff176,8px 8px #b68f00,12px 12px #7a5e00,12px 12px 30px #00000080,-8px -8px 20px #0000004d}@keyframes block-idle{0%,to{transform:rotateX(10deg)rotateY(10deg)translateY(0)}50%{transform:rotateX(10deg)rotateY(10deg)translateY(-6px)}}.question-block:hover{animation:.6s ease-out block-bounce;box-shadow:inset -4px -4px #d4a400,inset 4px 4px #fff176,6px 6px #b68f00,8px 8px #7a5e00,8px 8px 35px #0009,-6px -6px 15px #0006}@keyframes block-bounce{0%{transform:rotateX(10deg)rotateY(10deg)translateY(0)scale(1)}30%{transform:rotateX(10deg)rotateY(10deg)translateY(-12px)scale(1.05)}60%{transform:rotateX(10deg)rotateY(10deg)translateY(-6px)scale(1.02)}to{transform:rotateX(10deg)rotateY(10deg)translateY(0)scale(1)}}.mushroom{opacity:0;z-index:10;transform-style:preserve-3d;flex-direction:column;align-items:center;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);display:flex;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(100%)rotateX(10deg)}.mushroom .cap{background:radial-gradient(at 25% 25%,#ff6b6b 0%,red 35%,#d40000 80%,#a00000 100%);border:3px solid #000;border-radius:50% 50% 20% 20%/80% 80% 20% 20%;width:70px;height:45px;animation:2s ease-in-out infinite cap-shine;position:relative;transform:translateZ(10px);box-shadow:inset -3px -3px #b30000,inset 3px 3px #f44,0 8px 12px #00000080,0 -4px 8px #fff3}@keyframes cap-shine{0%,to{box-shadow:inset -3px -3px #b30000,inset 3px 3px #f44,0 8px 12px #00000080,0 -4px 8px #fff3}50%{box-shadow:inset -3px -3px #b30000,inset 3px 3px #f77,0 8px 12px #00000080,0 -4px 8px #ffffff4d}}.spot{background:radial-gradient(circle,#fff 0%,#f5f5f5 70%,#e0e0e0 100%);border:2px solid #000;border-radius:50%;animation:2s ease-in-out infinite spot-pulse;position:absolute;transform:translateZ(5px)}.spot1{width:16px;height:16px;animation-delay:0s;top:6px;left:12px}.spot2{width:12px;height:12px;animation-delay:.3s;top:8px;right:8px}.spot3{width:10px;height:10px;animation-delay:.6s;top:20px;left:25px}.head{z-index:2;background:linear-gradient(145deg,#fff 0%,#f8f8f8 50%,#e8e8e8 100%);border:3px solid #000;border-radius:0 0 25px 25px;width:50px;height:30px;margin-top:-3px;position:relative;transform:translateZ(5px);box-shadow:inset -2px -2px #d0d0d0,inset 2px 2px #fff,0 4px 6px #0006,0 -2px 4px #fff3}.eyes{gap:14px;animation:4s ease-in-out infinite blink;display:flex;position:absolute;top:5px;left:50%;transform:translate(-50%)translateZ(8px)}.eye{background:radial-gradient(circle at 30% 30%,#333 0%,#000 100%);border-radius:50%;width:8px;height:8px;transition:all .2s}@keyframes blink{0%,90%,to{transform:translate(-50%)translateZ(8px)scaleY(1)}95%{transform:translate(-50%)translateZ(8px)scaleY(.1)}}.block-front{color:#fff;text-shadow:3px 3px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;justify-content:center;align-items:center;width:100%;height:100%;font-family:"Press Start 2P",monospace;font-size:28px;display:flex;position:absolute;top:0;left:0;transform:translateZ(10px)}.question{z-index:2;opacity:1;font-size:80px;transition:opacity .4s;animation:2s ease-in-out infinite question-glow;position:relative}.question-block:hover .question{opacity:0}@keyframes question-glow{0%,to{text-shadow:3px 3px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;transform:scale(1)}50%{text-shadow:3px 3px #000,-1px -1px #000,1px -1px #000,-1px 1px #000,0 0 10px #ffffff80;transform:scale(1.05)}}.screws{background:radial-gradient(circle at 30% 30%,#f0d000 0%,#d4a400 100%);border:2px solid #000;border-radius:50%;width:10px;height:10px;animation:8s linear infinite screw-rotate;position:absolute;transform:translateZ(12px);box-shadow:inset -1px -1px #b68f00,0 2px 4px #0000004d}@keyframes screw-rotate{0%{transform:translateZ(12px)rotate(0)}to{transform:translateZ(12px)rotate(360deg)}}.top-left{top:6px;left:6px}.top-right{animation-delay:2s;top:6px;right:6px}.bottom-left{animation-delay:4s;bottom:6px;left:6px}.bottom-right{animation-delay:6s;bottom:6px;right:6px}.question-block:hover .mushroom{opacity:1;animation:.6s cubic-bezier(.68,-.55,.265,1.55) forwards mushroom-pop;transform:translate(-50%)translateY(-20px)rotateX(15deg)}@keyframes mushroom-pop{0%{opacity:0;transform:translate(-50%)translateY(100%)rotateX(15deg)scale(.8)}60%{opacity:1;transform:translate(-50%)translateY(-30px)rotateX(15deg)scale(1.1)}80%{transform:translate(-50%)translateY(-15px)rotateX(15deg)scale(.95)}to{opacity:1;transform:translate(-50%)translateY(-20px)rotateX(15deg)scale(1)}}.question-block:hover:after{content:"▶";pointer-events:none;color:#fff;text-shadow:3px 3px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;opacity:1;background:radial-gradient(circle,#ffffff4d 1px,#0000 1px) 0 0/15px 15px;font-family:"Press Start 2P",monospace;font-size:64px;transition:opacity .2s .2s,transform .4s .2s;animation:.8s ease-out sparkle;position:absolute;top:10px;left:40px}@keyframes sparkle{0%{opacity:0;transform:scale(1)translateZ(15px)}50%{opacity:1;transform:scale(1.25)translateZ(15px)}to{transform:scale(1.1)translateZ(15px)}}.question-block:hover:before{content:"";border:2px solid #fff9;border-radius:50%;width:0;height:0;animation:.8s ease-out sound-wave;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateZ(10px)}@keyframes sound-wave{0%{opacity:1;width:0;height:0;transform:translate(-50%,-50%)translateZ(10px)}to{opacity:0;width:200px;height:200px;transform:translate(-50%,-50%)translateZ(10px)}}
::view-transition-group(root){animation-timing-function:var(--expo-in)}::view-transition-new(root){animation:2s both scale;-webkit-mask:url(/assets/boyfriend.gif) 50%/0 no-repeat;mask:url(/assets/boyfriend.gif) 50%/0 no-repeat}::view-transition-old(root){animation:2s both scale}.dark::view-transition-old(root){animation:2s both scale}@keyframes scale{0%{-webkit-mask-size:0;mask-size:0}10%{-webkit-mask-size:50vmax;mask-size:50vmax}90%{-webkit-mask-size:50vmax;mask-size:50vmax}to{-webkit-mask-size:2000vmax;mask-size:2000vmax}}:root{--expo-in:linear(0 0%,.0085 31.26%,.0167 40.94%,.0289 48.86%,.0471 55.92%,.0717 61.99%,.1038 67.32%,.1443 72.07%,.1989 76.7%,.2659 80.89%,.3465 84.71%,.4419 88.22%,.554 91.48%,.6835 94.51%,.8316 97.34%,1 100%);--expo-out:linear(0 0%,.1684 2.66%,.3165 5.49%,.446 8.52%,.5581 11.78%,.6535 15.29%,.7341 19.11%,.8011 23.3%,.8557 27.93%,.8962 32.68%,.9283 38.01%,.9529 44.08%,.9711 51.14%,.9833 59.06%,.9915 68.74%,1 100%);background:#fff}:root{background:#fff}.dark{background:#000}