@font-face{font-family:BodoAmat;src:url(/assets/ui/Bodo%20Amat.ttf)}img{-webkit-user-select:none;user-select:none}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fff;background-color:#22003d;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{height:100%;margin:0;padding:0;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;align-items:center}#topbar{border-bottom:1px solid #56009b;height:3.4rem;align-items:center;display:flex;position:fixed;width:100%;background:#22003d}#logomark{height:100%}#splash{display:flex;margin-top:10em;align-items:center}#splash .divider{width:1px;height:100%;background:#56009b;margin:0 10em 0 5em}#splash.hidden{display:none}.menu-button{display:none;position:fixed;top:.8em;right:.8em;height:32px;z-index:21;cursor:pointer;transition:all .1s ease}.menu-button:hover{transform:scale(1.1)}#menu{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;position:fixed;background:#ff3a6e;top:0;right:-22em;z-index:20;width:20em;padding:1em;color:#fff;font-size:1em;transition:all .3s ease;opacity:0}#menu.active{right:0;opacity:1}.menu-username{display:flex}#user-avatar{margin:0 1em 0 auto}#menu-user-name{margin-left:1em;font-weight:500}.menu-items{display:flex;flex-direction:column;margin-top:1em}.menu-item{padding:.5em 1em;border-radius:.5em;margin:.5em 0;cursor:pointer;transition:background-color .1s ease}.menu-item:hover{background-color:#c31e4a}#logo{margin:0 auto;pointer-events:none}#game-list{font-family:BodoAmat;display:flex;justify-content:center;flex-direction:row;max-width:110em;flex-wrap:wrap;margin:0 auto;padding:10em 0;opacity:1;transition:opacity .5s;width:100%}#game-list.hidden{display:none}.game-list-item{display:flex;flex-direction:column;box-sizing:border-box;border:2px solid #56009b;border-radius:.5em;margin:.5em;width:32em;cursor:pointer;max-width:calc(100% - 1em);aspect-ratio:16 / 9;background-size:100%;transition:transform .1s}.game-list-item:hover{transform:scale(1.05);z-index:2}.game-list-item.dark{color:#22003d}#lonelyhorse{background-image:url(/assets/portfolio/LonelyHorse.png)}#lonelyhorse:hover{background-image:url(/assets/portfolio/LonelyHorse-Game.png)}#dragondrop{background-image:url(/assets/portfolio/DragonDrop.png)}#mystery{background-image:url(/assets/portfolio/Mystery.png)}#mystery:hover{background-image:url(/assets/portfolio/Mystery-Game.png)}#splodge{background-image:url(/assets/portfolio/Splodge.png)}#octopus{background-image:url(/assets/portfolio/Octopus.png)}#octopus:hover{background-image:url(/assets/portfolio/Octopus-Game.png)}#polys{background-image:url(/assets/portfolio/Polys.png)}#vampire{background-image:url(/assets/portfolio/Vampire.png)}#dizgruntled{background-image:url(/assets/portfolio/Dizgruntled.png)}#lamp{background-image:url(/assets/portfolio/Lamp.png)}#vampire:hover{background-image:url(/assets/portfolio/Vampire-Game.png)}#zodiac{background-image:url(/assets/portfolio/Zodiac.png)}.game-list-item:hover{background-color:#ffffff1a}.game-list-item-title{border-radius:.3em;flex-grow:1;font-size:1.3em;font-weight:500;padding:1em 1.5em;background:linear-gradient(to bottom,#0a0a0a99,#0a0a0a00)}.game-list-item.dark .game-list-item-title{background:linear-gradient(to bottom,#fff9,#fff0)}.game-list-item-description{font-size:16px;padding:1em 1.5em;opacity:0;transition:opacity .3s;color:#df94ff;background:#000c}.game-list.item.dark .game-list-item-description{color:#56009b;background:#fffc}.game-list-item:hover .game-list-item-description{opacity:1}#game-container{display:none;position:fixed;background:#150025;width:100%;height:100%;top:0;left:0;justify-content:center;align-items:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in,#game-container.fade-in{display:flex;animation:fadeIn .5s ease-in-out}canvas.screen{font-smooth:never;-webkit-font-smoothing:none;image-rendering:pixelated;width:100%;height:100%}input{border:none;background:none;padding:12px;box-sizing:border-box;border-radius:16px;font-family:BodoAmat;font-size:32px;color:#000;position:absolute}