/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* latin-ext */
@font-face {
  font-family: 'Sour Gummy';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourgummy/v1/8AtGGs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5opPVCC4oC5ANR1N88Nk_lqNLW5MoLmauZ8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sour Gummy';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourgummy/v1/8AtGGs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5opPVCC4oC5ANR1N88Nk8FqNLW5MoLma.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


      input {
        outline: none;
        border: none;
      }

      input[type=text] {
        background-image: url('./assets/ui/input.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: transparent;
        border: none;
        padding: 10px 20px;
      }
    
      input[type=button], button {
        background-image: url('./assets/ui/button.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: transparent;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
      }

      #difficulty {
        background-image: url('./assets/ui/arrow.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        transform: rotate(180deg);
      }
      
      input[type=button]:hover, button:hover {
        background-image: url('./assets/ui/button-hover.png');
      }

      input[type=button]:active, button:active {
        background-image: url('./assets/ui/button-active.png');
      }
    
/* layer: default */
.m-10{margin:2.5rem;}
.m-auto{margin:auto;}
.hidden{display:none;}
.ha{height:auto;}
.max-w-200{max-width:50rem;}
.max-w-600px{max-width:600px;}
.w-100{width:25rem;}
.w-30{width:7.5rem;}
.w-full{width:100%;}
.flex{display:flex;}
.flex-grow-1{flex-grow:1;}
.flex-col{flex-direction:column;}
.flex-col-reverse{flex-direction:column-reverse;}
.flex-wrap{flex-wrap:wrap;}
.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.select-none{-webkit-user-select:none;user-select:none;}
.items-center{align-items:center;}
.justify-center{justify-content:center;}
.gap-1{gap:0.25rem;}
.gap-10{gap:2.5rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.border{border-width:1px;}
.px-8{padding-left:2rem;padding-right:2rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.text-right{text-align:right;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-6xl{font-size:3.75rem;line-height:1;}
.font-sans{font-family:"Sour Gummy",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
.outline-3{outline-width:3px;}
.outline-black{--un-outline-color-opacity:1;outline-color:rgb(0 0 0 / var(--un-outline-color-opacity)) /* #000 */;}
.outline,
.outline-solid{outline-style:solid;}
@media (min-width: 768px){
.md\:flex-row{flex-direction:row;}
}