canvas[data-astro-cid-y3soregm]{position:fixed;inset:0;z-index:-1}.button-border[data-astro-cid-fcftljzp]{border:.52vmax solid #ffae70;outline:.26vmax solid #52333f;position:absolute;left:50%;transform:translate(-50%);bottom:1.5vmax;z-index:50;zoom:.6}.button-base[data-astro-cid-fcftljzp]{background-color:#75221c;outline:.13vmax solid black;position:relative}.button[data-astro-cid-fcftljzp]{font-family:"Press Start 2P",cursive;font-size:2.08vmax;outline:.13vmax solid black;border:.26vmax solid;border-left-color:#e7b8b4;border-top-color:#f8c9c5;border-bottom-color:#4e1814;border-right-color:#79241e;background-color:#e64539;cursor:pointer;color:#ffee83;padding:1.3vmax 1.95vmax;transform:translateY(-20%)}.button[data-astro-cid-fcftljzp]:hover{transform:translateY(-10%)}.button[data-astro-cid-fcftljzp]:active{transform:translateY(0)}.container-grid{position:relative;height:100vh}:root{--dark: #fff2;--light: #f7edf0;--accent: #7353ba}.pen-wrapper{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.play-area{position:absolute;width:100%;height:100%;top:0;z-index:0;pointer-events:none}.play-win{width:8.51vmax;height:8.51vmax;border:.2vmax solid var(--dark);display:flex;justify-content:center;align-items:center;position:absolute;pointer-events:auto;&.play-win-1{left:1.5vmax;top:1.5vmax}&.play-win-2{right:1.5vmax;top:1.5vmax}&.play-win-3{right:1.5vmax;bottom:1.5vmax}&.play-win-4{left:1.5vmax;bottom:1.5vmax}}.win{background-color:var(--accent)}.tile-area{transform:rotateX(60deg) rotateY(0) rotate(45deg);transform-style:preserve-3d;width:45.57vmax;height:39.06vmax;padding:1.04vmax;border:.07vmax solid rgba(255,255,255,0);display:grid;grid-template-columns:repeat(5,1fr);gap:1vmax;@media (width <= 1111px) and (orientation: portrait){zoom:.8}}.tile-wrapper{width:6.51vmax;height:6.51vmax;*{pointer-events:none}}.tile{width:8.51vmax;height:8.51vmax;border:.13vmax solid var(--dark);font-size:3.13vmax;color:var(--dark);display:flex;justify-content:center;align-items:center;.am-img{width:100%;height:100%;border:none;object-fit:cover;pointer-events:auto}}.tile:hover{transform:translateZ(.33vmax)}.scene[data-astro-cid-kmetj66o]{perspective:80vmax;width:60%;text-align:center;@media (width <= 1111px) and (orientation: portrait){width:70%}*{transform-style:preserve-3d;font-size:4vmax;@media (width <= 1111px) and (orientation: portrait){font-size:2.8vmax}}}.layeredText[data-astro-cid-kmetj66o]{--layers-count: 24;--layer-offset: 1px;position:relative;font-family:Montserrat,sans-serif;font-weight:900;animation:wombat 12s infinite linear;span{color:#000;text-shadow:0 0 .1em #003}.layers,.layer{position:absolute;inset:0}.layer{--n: calc(var(--i) / var(--layers-count));transform:translateZ(calc(var(--i) * var(--layer-offset)));color:hsl(200 30% calc(var(--n) * 100%))}}@keyframes wombat{0%{transform:rotate(0) rotateX(30deg) rotate(360deg)}to{transform:rotate(360deg) rotateX(30deg) rotate(0)}}section[data-astro-cid-bbe6dxrz]{height:100vh;transform-style:preserve-3d;overflow:hidden;display:flex;flex-wrap:wrap;place-content:center;place-items:center}.logo-img[data-astro-cid-bbe6dxrz]{position:absolute;left:50%;transform:translate(-50%);bottom:0;width:15vmax}:root{--gradient: linear-gradient(to bottom, dodgerblue, #93d400)}@font-face{font-family:AnotherDanger;src:url(/20-projects-with-green-sock-animation-platform/assets/AnotherDanger.otf) format("opentype");font-weight:400;font-style:normal}body{--sb-track-color: #000;--sb-thumb-color: var(--gradient);--sb-size: .7vmax}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0;user-select:none;font-family:sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue}a,button,img{-webkit-tap-highlight-color:transparent;user-select:none}button{background-color:transparent;border:none;outline:none}body{min-height:100vh;height:max-content;width:100%;flex-direction:column;overflow-x:hidden}h1,h2,h3,h4,h5{font-family:AnotherDanger}body::-webkit-scrollbar{width:var(--sb-size)}body::-webkit-scrollbar-track{background:var(--sb-track-color)}body::-webkit-scrollbar-thumb{background:var(--sb-thumb-color)}@supports not selector(::-webkit-scrollbar){body{scrollbar-color:var(--sb-thumb-color) var(--sb-track-color)}}