#root{padding:2rem;text-align:center}:root{--box-width: 50;--box-height: 30;--box-depth: 35}.loading{display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#f7cfd8;justify-content:center;align-items:center;z-index:9999;opacity:1;visibility:visible;transition:opacity .8s ease-in-out,visibility 0s linear .8s}.loading.hide{opacity:0;visibility:hidden}#scene{position:relative;perspective:1000px;width:100%;height:calc(var(--box-height) * 2px);margin:100px auto;opacity:1;transform:translateY(20px);display:flex;justify-content:center;gap:50px}.boxBase{position:relative;margin:0;width:calc(var(--box-width) * 2px);height:100%;transform-style:preserve-3d;animation:turnAround .3s linear infinite,bounce 1s infinite ease-in-out}.boxBase:nth-of-type(1){animation-delay:.1s}.boxBase:nth-of-type(2){animation-delay:.2s}.boxBase:nth-of-type(3){animation-delay:.3s}.boxBase>div{position:absolute;background:#f4f8d3;box-shadow:0 4px 20px #a6f1e0;left:50%;top:50%;transform-origin:center}.front{width:calc(var(--box-width) * 1px);height:calc(var(--box-height) * 1px);transform:translate(-50%,-50%) translateZ(calc(var(--box-depth) * .5px))}.back{width:calc(var(--box-width) * 1px);height:calc(var(--box-height) * 1px);transform:translate(-50%,-50%) translateZ(calc(var(--box-depth) * -.5px)) rotateY(180deg)}.top{width:calc(var(--box-width) * 1px);height:calc(var(--box-depth) * 1px);transform:translate(-50%,-50%) translateY(calc(var(--box-height) * -.5px)) rotateX(-90deg) rotateY(180deg)}.bottom{width:calc(var(--box-width) * 1px);height:calc(var(--box-depth) * 1px);transform:translate(-50%,-50%) translateY(calc(var(--box-height) * .5px)) rotateX(-90deg)}.right{width:calc(var(--box-depth) * 1px);height:calc(var(--box-height) * 1px);transform:translate(-50%,-50%) translate(calc(var(--box-width) * .5px)) rotateY(90deg)}.left{width:calc(var(--box-depth) * 1px);height:calc(var(--box-height) * 1px);transform:translate(-50%,-50%) translate(calc(var(--box-width) * -.5px)) rotateY(-90deg)}@keyframes turnAround{0%,to{transform:rotateX(60deg) rotate(0)}50%{transform:rotateX(90deg) rotate(360deg)}}@keyframes bounce{40%{height:40px}50%{transform:translateY(100px);height:34px;border-radius:20px}65%{height:40px}}.content-wrapper{opacity:0;transform:translateY(20px);transition:opacity .8s ease-in-out,transform .8s ease-in-out;width:100%;min-height:100vh}.content-wrapper.visible{opacity:1;transform:translateY(0)}.main-content{padding:2rem;background-color:#f9f9f9;border-radius:10px;box-shadow:0 4px 10px #0000001a;max-width:70%;margin:0 auto;min-height:100vh}.welcome-title{font-size:2.5rem;color:#4a4a4a;text-align:center;margin-bottom:1.5rem}.navigation-list{list-style-type:none;padding:0;display:flex;justify-content:center;gap:2rem}.navigation-list li{position:relative}.navigation-list li a{text-decoration:none;color:#f0c1e1;font-weight:700;padding:.5rem 1rem;position:relative;z-index:1;transition:color .3s ease}.navigation-list li a:before{content:"";position:absolute;top:0;left:0;width:10px;height:4px;background-color:#f0c1e1;border-radius:40%;opacity:0;z-index:-1;transition:none}.navigation-list li a:hover{color:#fff}.navigation-list li a:hover:before{opacity:1;animation:circleExpand .3s ease-out forwards}@keyframes circleExpand{0%{transform:translate(0) scale(0);opacity:.3}to{transform:scale(9);opacity:1;top:50%;left:50%}}.navigation-list li a.active{color:#fff}.navigation-list li a.active:before{width:150%;height:150%;opacity:1;background-color:#f0c1e1;transform:translate(-50%,-50%);top:50%;left:50%}.page-content{margin-top:2rem;padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000d}section{margin-bottom:2rem;background-color:#f9f9f9;box-shadow:0 2px 8px #0000001a;border-radius:8px}.profile img{width:200px;height:200px;border-radius:40%;margin:0 auto 1rem}.profile{display:flex;justify-content:center}.profile-container{display:block;margin-left:3rem;font-size:1.5rem;color:#4a4a4a;text-align:left}.profile h2{font-size:2rem;margin-bottom:.5rem}.profile p{margin-bottom:1rem}.subinfo{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.subinfo h2{font-size:1.5rem;margin-bottom:1rem}.subinfo h3{font-size:1.2rem;margin-bottom:.5rem}.subinfo section{border-radius:0;overflow:hidden;color:#4a4a4a;text-align:center;padding:1rem}.skills{width:400px}.skills .skills-container{justify-content:center;display:flex;position:relative;width:200px;height:200px;margin:20% auto -20%}.skills .skills-container img{position:absolute;transition:transform .3s ease}.skills img{width:50px;height:50px;border-radius:20%}.about-site{text-align:left;background-color:#1e1e1e;color:#0f0;padding:.5rem;margin:1rem;border-radius:8px;font-family:Courier New,Courier,monospace;box-shadow:0 0 10px #00ff0080}.about-site h2{font-size:1rem;margin-bottom:1rem}.about-site p{margin:2px auto;color:#909090}.about-site a{color:#0f0;text-decoration:underline}.works-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;padding:2rem 0}.work-item{background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 8px #0000001a;transition:transform .3s ease}.work-item:hover{transform:translateY(-5px)}.work-item h3{font-size:1.5rem;margin-bottom:1rem}.work-item p{margin-bottom:1rem}.work-item img{max-width:100%;border-radius:8px;margin-bottom:1rem}.contact{justify-content:center}.contact h2{color:#4a4a4a;font-size:2rem;margin-bottom:1rem}.contact p{margin-bottom:1rem}.contact img{display:flex;max-width:10%;margin:0 auto 1rem;transition:transform .3s ease}.contact img:hover{transform:scale(1.2)}.game-container{width:100%;height:80vh;position:relative;background:#f0f0f0;overflow:hidden}.start-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:1rem 2rem;font-size:1.2rem;cursor:pointer;background-color:pink;border:none;border-radius:8px;box-shadow:0 4px 6px #0000001a;transition:all .3s ease}.start-button:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 6px 8px #0003}.score{position:absolute;top:20px;left:20px;font-size:1.5rem;color:#333}.circle{position:absolute;width:50px;height:50px;border-radius:50%;background-color:pink;cursor:pointer;transition:all .1s ease-out;box-shadow:0 2px 4px #0000001a}.circle:hover{transform:scale(1.1);box-shadow:0 4px 8px #0003}