@import url(https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap);a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,svg video,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var{border:0;color:#000;font-family:Archivo;margin:0;padding:0}body{background-color:#ffb6c1;font-size:1rem}*,:after,:before{box-sizing:border-box}.app{display:flex;flex-direction:column;min-height:100vh;overflow:hidden;padding:40px}@media screen and (max-width:568px){.app{padding:10px}}.content{align-items:center;border-left:2px solid #000;border-right:2px solid #000;display:flex;flex:1 1;gap:3rem;justify-content:center;overflow:hidden;padding:1rem}.content .content__canvas{flex:1 1;max-width:800px}.content .content__canvas .canvas,.content .content__canvas>div{width:100%}@media screen and (max-width:768px){.content{flex-direction:column}.content .content__canvas{flex:0 1;width:100%}}.canvas{aspect-ratio:2/1;background-color:#000;border-radius:5px;image-rendering:pixelated}.canvas__frame{background:#db7093;border:2px solid #000;border-radius:5px;padding:.5rem;transform:translate(-.4rem,-.4rem)}.canvas__container{position:relative}.canvas__overlay{align-items:center;background-color:#000000b3;border-radius:5px;color:#fff;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.canvas__overlay-content{background-color:#db7093;border-radius:5px;color:#fff;font-size:1.3rem;font-weight:700;padding:1.5rem}@media screen and (max-width:768px){.canvas__overlay-content{font-size:1rem;padding:.8rem}}.backdrop{background-color:#000;border-radius:5px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.button{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background-color:#db7093;border:2px solid #000;border-radius:5px;color:#000;cursor:pointer;display:flex;font-weight:700;gap:.5rem;height:2.5rem;justify-content:space-around;padding:.75rem 1.3rem;text-overflow:ellipsis;transform:translate(-4px,-4px);transition:all .1s ease-in-out;-webkit-user-select:none;user-select:none}.button--square{aspect-ratio:1;overflow:hidden;padding:0}.button--square .button__icon-right{aspect-ratio:1}.button--active,.button:active{transform:translate(0)}.keypad{grid-gap:0;background:#000;border-radius:5px;display:grid;gap:0;grid-template-columns:auto auto auto auto}.keypad__button{height:3.5rem;width:3.5rem}.keypad__button--numeric{background:#90ee90}.header{grid-gap:0 0;align-items:center;background:#add8e6;border:2px solid #000;display:grid;gap:0 0;grid-template-areas:"title control-panel github-link";grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;justify-items:center;padding:1rem;width:100%}@media screen and (max-width:768px){.header{grid-template-areas:"title github-link" "control-panel control-panel";grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}}.header>*,.header__title{display:flex;justify-content:center}.header__title{align-items:center;font-size:1.8rem;font-weight:700;gap:.3rem;grid-area:title;justify-self:flex-start}.header__control-panel{grid-area:control-panel;width:100%}.header__github-link{grid-area:github-link;justify-self:flex-end}@media screen and (max-width:568px){.header__github-link .button__children{display:none;grid-area:github-link}.header__github-link .button{aspect-ratio:1;overflow:hidden;padding:0}}.control-panel{display:flex;gap:3rem;justify-content:center;padding:.5rem 0;width:100%}.control-panel__button{background-color:#98fb98}@media screen and (max-width:768px){.control-panel{justify-content:space-between}}.dropdown{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:999}.dropdown__menu{opacity:0;position:absolute;top:calc(100% + 1rem);transform:translateY(-80px);transition:all .3s ease-in-out;visibility:hidden;width:100%;z-index:0}.dropdown__menu--active{opacity:1;transform:translateY(0);visibility:visible}.dropdown__menu-list{background-color:#db7093;border:2px solid #000;border-radius:5px;display:flex;flex-direction:column;transform:translate(-6px,-6px)}.dropdown__menu-list li{cursor:pointer;list-style:none;padding:1rem}.dropdown__menu-list li:hover{background-color:#d65c84}.dropdown__menu-list li:active{background-color:#d14774}.dropdown__menu-items-list{max-height:200px;overflow-x:hidden;overflow-y:scroll}.dropdown__menu-list-divider{border-bottom:2px solid #000}.inline-link{color:#db7093!important;font-weight:500;padding:3px;-webkit-text-decoration:wavy!important;text-decoration:wavy!important}.footer{align-items:center;background:#add8e6;border:2px solid #000;display:flex;gap:.3rem;justify-content:center;padding:1rem}.footer__heart{transform:scale(1);transition:transform .2s ease-in-out}.footer__heart:hover{transform:scale(1.4)}
/*# sourceMappingURL=main.e42e2632.css.map*/