.__className_9f4c01 {
     font-family: __Nunito_9f4c01, __Nunito_Fallback_9f4c01;
     font-style: normal
 }

 /*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/
 *,
 :after,
 :before {
     box-sizing: border-box;
     border: 0 solid #e5e7eb
 }

 :after,
 :before {
     --tw-content: ""
 }

 html {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     -moz-tab-size: 4;
     -o-tab-size: 4;
     tab-size: 4;
     font-family: 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;
     font-feature-settings: normal;
     font-variation-settings: normal
 }

 body {
     margin: 0;
     line-height: inherit
 }

 hr {
     height: 0;
     color: inherit;
     border-top-width: 1px
 }

 abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-size: inherit;
     font-weight: inherit
 }

 a {
     color: inherit;
     text-decoration: inherit
 }

 b,
 strong {
     font-weight: bolder
 }

 code,
 kbd,
 pre,
 samp {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
     font-size: 1em
 }

 small {
     font-size: 80%
 }

 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline
 }

 sub {
     bottom: -.25em
 }

 sup {
     top: -.5em
 }

 table {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse
 }

 button,
 input,
 optgroup,
 select,
 textarea {
     font-family: inherit;
     font-size: 100%;
     font-weight: inherit;
     line-height: inherit;
     color: inherit;
     margin: 0;
     padding: 0
 }

 button,
 select {
     text-transform: none
 }

 [type=button],
 [type=reset],
 [type=submit],
 button {
     -webkit-appearance: button;
     background-color: transparent;
     background-image: none
 }

 :-moz-focusring {
     outline: auto
 }

 :-moz-ui-invalid {
     box-shadow: none
 }

 progress {
     vertical-align: baseline
 }

 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
     height: auto
 }

 [type=search] {
     -webkit-appearance: textfield;
     outline-offset: -2px
 }

 ::-webkit-search-decoration {
     -webkit-appearance: none
 }

 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit
 }

 summary {
     display: list-item
 }

 blockquote,
 dd,
 dl,
 figure,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 hr,
 p,
 pre {
     margin: 0
 }

 fieldset {
     margin: 0
 }

 fieldset,
 legend {
     padding: 0
 }

 menu,
 ol,
 ul {
     list-style: none;
     margin: 0;
     padding: 0
 }

 textarea {
     resize: vertical
 }

 input::-moz-placeholder,
 textarea::-moz-placeholder {
     opacity: 1;
     color: #9ca3af
 }

 input::placeholder,
 textarea::placeholder {
     opacity: 1;
     color: #9ca3af
 }

 [role=button],
 button {
     cursor: pointer
 }

 :disabled {
     cursor: default
 }

 audio,
 canvas,
 embed,
 iframe,
 img,
 object,
 svg,
 video {
     display: block;
     vertical-align: middle
 }

 img,
 video {
     max-width: 100%;
     height: auto
 }

 [hidden] {
     display: none
 }

 *,
 :after,
 :before {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
     --tw-translate-y: 0;
     --tw-rotate: 0;
     --tw-skew-x: 0;
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     --tw-pan-x: ;
     --tw-pan-y: ;
     --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
     --tw-gradient-from-position: ;
     --tw-gradient-via-position: ;
     --tw-gradient-to-position: ;
     --tw-ordinal: ;
     --tw-slashed-zero: ;
     --tw-numeric-figure: ;
     --tw-numeric-spacing: ;
     --tw-numeric-fraction: ;
     --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgba(59, 130, 246, .5);
     --tw-ring-offset-shadow: 0 0 #0000;
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     --tw-blur: ;
     --tw-brightness: ;
     --tw-contrast: ;
     --tw-grayscale: ;
     --tw-hue-rotate: ;
     --tw-invert: ;
     --tw-saturate: ;
     --tw-sepia: ;
     --tw-drop-shadow: ;
     --tw-backdrop-blur: ;
     --tw-backdrop-brightness: ;
     --tw-backdrop-contrast: ;
     --tw-backdrop-grayscale: ;
     --tw-backdrop-hue-rotate: ;
     --tw-backdrop-invert: ;
     --tw-backdrop-opacity: ;
     --tw-backdrop-saturate: ;
     --tw-backdrop-sepia:
 }

 ::backdrop {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
     --tw-translate-y: 0;
     --tw-rotate: 0;
     --tw-skew-x: 0;
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     --tw-pan-x: ;
     --tw-pan-y: ;
     --tw-pinch-zoom: ;
     --tw-scroll-snap-strictness: proximity;
     --tw-gradient-from-position: ;
     --tw-gradient-via-position: ;
     --tw-gradient-to-position: ;
     --tw-ordinal: ;
     --tw-slashed-zero: ;
     --tw-numeric-figure: ;
     --tw-numeric-spacing: ;
     --tw-numeric-fraction: ;
     --tw-ring-inset: ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgba(59, 130, 246, .5);
     --tw-ring-offset-shadow: 0 0 #0000;
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     --tw-blur: ;
     --tw-brightness: ;
     --tw-contrast: ;
     --tw-grayscale: ;
     --tw-hue-rotate: ;
     --tw-invert: ;
     --tw-saturate: ;
     --tw-sepia: ;
     --tw-drop-shadow: ;
     --tw-backdrop-blur: ;
     --tw-backdrop-brightness: ;
     --tw-backdrop-contrast: ;
     --tw-backdrop-grayscale: ;
     --tw-backdrop-hue-rotate: ;
     --tw-backdrop-invert: ;
     --tw-backdrop-opacity: ;
     --tw-backdrop-saturate: ;
     --tw-backdrop-sepia:
 }

 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0
 }

 .static {
     position: static
 }

 .fixed {
     position: fixed
 }

 .relative {
     position: relative
 }

 .inset-0 {
     inset: 0
 }

 .top-0 {
     top: 0
 }

 .z-50 {
     z-index: 50
 }

 .order-1 {
     order: 1
 }

 .order-2 {
     order: 2
 }

 .order-3 {
     order: 3
 }

 .mx-auto {
     margin-left: auto;
     margin-right: auto
 }

 .my-4 {
     margin-top: 1rem;
     margin-bottom: 1rem
 }

 .mr-2 {
     margin-right: .5rem
 }

 .mr-4 {
     margin-right: 1rem
 }

 .line-clamp-4 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4
 }

 .line-clamp-none {
     overflow: visible;
     display: block;
     -webkit-box-orient: horizontal;
     -webkit-line-clamp: none
 }

 .block {
     display: block
 }

 .flex {
     display: flex
 }

 .grid {
     display: grid
 }

 .hidden {
     display: none
 }

 .h-20 {
     height: 5rem
 }

 .h-6 {
     height: 1.5rem
 }

 .max-h-96 {
     max-height: 24rem
 }

 .w-20 {
     width: 5rem
 }

 .w-32 {
     width: 8rem
 }

 .w-6 {
     width: 1.5rem
 }

 .w-full {
     width: 100%
 }

 .max-w-3xl {
     max-width: 48rem
 }

 .max-w-xl {
     max-width: 36rem
 }

 .grow {
     flex-grow: 1
 }

 .scale-100 {
     --tw-scale-x: 1;
     --tw-scale-y: 1
 }

 .scale-100,
 .scale-95 {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 .scale-95 {
     --tw-scale-x: .95;
     --tw-scale-y: .95
 }

 .items-center {
     align-items: center
 }

 .gap-1 {
     gap: .25rem
 }

 .gap-2 {
     gap: .5rem
 }

 .gap-3 {
     gap: .75rem
 }

 .space-x-1>:not([hidden])~:not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(.25rem * var(--tw-space-x-reverse));
     margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
 }

 .divide-y>:not([hidden])~:not([hidden]) {
     --tw-divide-y-reverse: 0;
     border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
 }

 .overflow-hidden {
     overflow: hidden
 }

 .overflow-y-auto {
     overflow-y: auto
 }

 .rounded-md {
     border-radius: .375rem
 }

 .rounded-xl {
     border-radius: .75rem
 }

 .rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0
 }

 .border-0 {
     border-width: 0
 }

 .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246/var(--tw-bg-opacity))
 }

 .bg-gray-500\/75 {
     background-color: hsla(220, 9%, 46%, .75)
 }

 .bg-indigo-600 {
     --tw-bg-opacity: 1;
     background-color: rgb(79 70 229/var(--tw-bg-opacity))
 }

 .bg-transparent {
     background-color: transparent
 }

 .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255/var(--tw-bg-opacity))
 }

 .bg-loading {
     background-image: url(../fonts/loading.54cb9f7d.svg)
 }

 .bg-center {
     background-position: 50%
 }

 .bg-no-repeat {
     background-repeat: no-repeat
 }

 .p-4 {
     padding: 1rem
 }

 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem
 }

 .py-2 {
     padding-top: .5rem;
     padding-bottom: .5rem
 }

 .py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem
 }

 .pt-\[25vh\] {
     padding-top: 25vh
 }

 .text-center {
     text-align: center
 }

 .text-sm {
     font-size: .875rem;
     line-height: 1.25rem
 }

 .text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem
 }

 .text-xs {
     font-size: .75rem;
     line-height: 1rem
 }

 .font-bold {
     font-weight: 700
 }

 .font-medium {
     font-weight: 500
 }

 .uppercase {
     text-transform: uppercase
 }

 .text-gray-400 {
     --tw-text-opacity: 1;
     color: rgb(156 163 175/var(--tw-text-opacity))
 }

 .text-gray-500 {
     --tw-text-opacity: 1;
     color: rgb(107 114 128/var(--tw-text-opacity))
 }

 .text-gray-800 {
     --tw-text-opacity: 1;
     color: rgb(31 41 55/var(--tw-text-opacity))
 }

 .text-gray-900 {
     --tw-text-opacity: 1;
     color: rgb(17 24 39/var(--tw-text-opacity))
 }

 .text-indigo-200 {
     --tw-text-opacity: 1;
     color: rgb(199 210 254/var(--tw-text-opacity))
 }

 .text-orange-400 {
     --tw-text-opacity: 1;
     color: rgb(251 146 60/var(--tw-text-opacity))
 }

 .text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255/var(--tw-text-opacity))
 }

 .placeholder-gray-400::-moz-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175/var(--tw-placeholder-opacity))
 }

 .placeholder-gray-400::placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175/var(--tw-placeholder-opacity))
 }

 .opacity-0 {
     opacity: 0
 }

 .opacity-100 {
     opacity: 1
 }

 .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }

 .ring-1 {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }

 .ring-black\/5 {
     --tw-ring-color: rgba(0, 0, 0, .05)
 }

 .filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }

 .duration-200 {
     transition-duration: .2s
 }

 .duration-300 {
     transition-duration: .3s
 }

 .ease-in {
     transition-timing-function: cubic-bezier(.4, 0, 1, 1)
 }

 .ease-out {
     transition-timing-function: cubic-bezier(0, 0, .2, 1)
 }

 body,
 html {
     --tw-bg-opacity: 1;
     background-color: rgb(248 250 252/var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(30 41 59/var(--tw-text-opacity))
 }

 .wrapper {
     position: relative;
     display: flex;
     min-height: 100vh;
     flex-direction: column;
     font-size: .875rem;
     line-height: 1.25rem
 }

 .site-main {
     margin-top: 4rem;
     display: grid;
     flex-grow: 1
 }

 @media (min-width: 1280px) {
     .site-main {
         margin-left: auto;
         margin-right: auto;
         margin-top: 0;
         max-width: 80rem
     }
 }

 .section-head {
     display: flex;
     align-items: center
 }

 .game-list {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.25rem
 }

 .game-list a {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: .5rem;
     font-weight: 700
 }

 @media (min-width: 1280px) {
     .game-list a {
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
         transition-duration: .5s;
         transition-timing-function: cubic-bezier(.4, 0, .2, 1)
     }

     .game-list a:hover {
         z-index: 10;
         transform-origin: center;
         --tw-scale-x: 1.25;
         --tw-scale-y: 1.25;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }
 }

 .site-main img {
     border-radius: .75rem
 }

 .game-list,
 .section-head {
     margin-left: 1rem;
     margin-right: 1rem
 }

 .game-list span {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     height: 2.5rem;
     overflow: hidden;
     text-align: center
 }

 .icon {
     display: inline-block;
     height: 1.25rem;
     width: 1.25rem
 }

 .icon-star {
     background-image: url(../fonts/icon-star.b5e8e152.svg);
     background-position: 50%;
     background-repeat: no-repeat
 }

 .hot {
     position: relative;
     overflow: hidden
 }

 .hot:before {
     position: absolute;
     left: 0;
     top: .25rem;
     --tw-translate-x: -1.25rem;
     --tw-rotate: -45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     --tw-bg-opacity: 1;
     background-color: rgb(239 68 68/var(--tw-bg-opacity));
     padding: .375rem 1.5rem;
     font-size: .75rem;
     line-height: 1rem;
     --tw-text-opacity: 1;
     color: rgb(255 255 255/var(--tw-text-opacity));
     --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-content: "HOT";
     content: var(--tw-content)
 }

 .site-header {
     position: fixed;
     left: 0;
     right: 0;
     z-index: 20;
     min-height: 3rem;
     border-bottom-right-radius: 1.5rem;
     border-bottom-left-radius: 1.5rem;
     --tw-bg-opacity: 1;
     background-color: rgb(249 115 22/var(--tw-bg-opacity));
     padding: .75rem
 }

 @media (min-width: 1280px) {
     .site-header {
         position: static;
         margin-left: 1.25rem;
         margin-right: 1.25rem;
         margin-bottom: 1.5rem;
         display: flex;
         align-items: center;
         gap: 1rem;
         --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
         --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
         box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
         --tw-shadow-color: #fdba74;
         --tw-shadow: var(--tw-shadow-colored)
     }

     .site-branding {
         margin-left: 1rem;
         margin-right: 1.5rem
     }
 }

 .menu-btn {
     position: absolute;
     right: .75rem;
     top: .75rem
 }

 @media (min-width: 1280px) {
     .menu-btn {
         display: none
     }
 }

 .nav-list {
     margin-top: 1rem;
     /* display: grid !important; */
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: .5rem;
 }

 @media (min-width: 1280px) {
     .nav-list {
         margin-top: 0;
         display: flex
     }
 }

 .nav-list a {
     display: block;
     border-radius: 9999px;
     border-width: 2px;
     --tw-border-opacity: 1;
     border-color: rgb(29 78 216/var(--tw-border-opacity));
     padding: .5rem 1rem;
     text-align: center;
     --tw-text-opacity: 1;
     color: rgb(255 255 255/var(--tw-text-opacity))
 }

 @media (min-width: 1280px) {
     .nav-list a {
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
         border-color: transparent;
         transition-duration: .5s
     }

     .nav-list a:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(250 204 21/var(--tw-bg-opacity))
     }
 }

 .nav-list .current {
     --tw-border-opacity: 1;
     border-color: rgb(253 224 71/var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: rgb(250 204 21/var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(255 255 255/var(--tw-text-opacity))
 }

 .search-btn {
     position: absolute;
     right: 3.5rem;
     top: .75rem
 }

 @media (min-width: 1280px) {
     .search-btn {
         position: static;
         width: 4rem;
         transition-duration: .5s
     }

     .search-btn,
     .search-btn:hover {
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }

     .search-btn:hover {
         --tw-scale-x: 1.1;
         --tw-scale-y: 1.1
     }
 }

 .search-panel-mask {
     position: fixed;
     inset: 0;
     background-color: hsla(220, 9%, 46%, .75)
 }

 .home {
     margin-top: 5rem
 }

 @media (min-width: 1280px) {
     .home {
         margin-top: 0;
         margin-bottom: .5rem;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 1.5rem
     }
 }

 .top-game-box {
     margin-left: 1rem;
     margin-right: 1rem;
     border-radius: 1.5rem;
     background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
     --tw-gradient-from: #fde047 var(--tw-gradient-from-position);
     --tw-gradient-to: rgba(253, 224, 71, 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
     --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
     padding: 1rem;
     --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: rgba(251, 146, 60, .2);
     --tw-shadow: var(--tw-shadow-colored)
 }

 .top-game-box h2 {
     margin-bottom: .75rem;
     text-align: center;
     font-size: 1.5rem;
     line-height: 2rem;
     font-weight: 900;
     --tw-text-opacity: 1;
     color: rgb(194 65 12/var(--tw-text-opacity))
 }

 .top-game-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .top-game-list a {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: .5rem;
     overflow: hidden;
     border-radius: 1rem;
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255/var(--tw-bg-opacity));
     --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }

 .top-game-list img {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0
 }

 .home .box,
 .home .box-2 {
     margin: 1rem;
     border-radius: .75rem;
     border-width: 2px;
     --tw-border-opacity: 1;
     border-color: rgb(224 242 254/var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: rgb(240 249 255/var(--tw-bg-opacity));
     --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: #e0f2fe;
     --tw-shadow: var(--tw-shadow-colored)
 }

 .box-2 {
     padding-top: 1rem;
 }

 @media (min-width: 1280px) {

     .home .box,
     .home .box-2 {
         margin: auto;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
         border-width: 1px;
         transition-duration: .3s
     }

     .home .box:hover,
     .home .box-2:hover {
         --tw-border-opacity: 1;
         border-color: rgb(224 242 254/var(--tw-border-opacity));
         --tw-bg-opacity: 1;
         background-color: rgb(255 255 255/var(--tw-bg-opacity))
     }
 }

 .home .section-head {
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .home .title {
     display: flex;
     align-items: center;
     gap: .5rem
 }

 .home .title h2 {
     margin-top: .75rem;
     margin-bottom: .75rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
     font-weight: 700
 }

 .home .title span {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
     border-bottom-right-radius: .5rem;
     --tw-bg-opacity: 1;
     background-color: rgb(217 249 157/var(--tw-bg-opacity));
     padding: .25rem .375rem;
     font-size: .875rem;
     line-height: 1.25rem;
     --tw-text-opacity: 1;
     color: rgb(77 124 15/var(--tw-text-opacity))
 }

 .link-more {
     padding: .25rem;
     font-size: .75rem;
     line-height: 1rem;
     font-weight: 700;
     text-transform: uppercase
 }

 .home .game-list {
     margin-bottom: 1rem;
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: .75rem
 }

 @media (min-width: 1280px) {
     .home .game-list {
         grid-template-columns: repeat(3, minmax(0, 1fr))
     }
 }

 .list .game-list {
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }

 @media (min-width: 1280px) {
     .list .game-list {
         grid-template-columns: repeat(10, minmax(0, 1fr))
     }
 }

 .list .section-head {
     margin-bottom: 1.5rem;
     flex-direction: column;
     justify-content: center;
     gap: .5rem
 }

 .list .section-head h1 {
     margin-top: .75rem;
     margin-bottom: .75rem;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 700
 }

 @media (min-width: 1280px) {
     .list .section-head h1 {
         font-size: 1.875rem;
         line-height: 2.25rem
     }
 }

 .breadcrumb {
     margin-left: 1rem;
     margin-right: 1rem;
     margin-top: 0.3rem;
     display: flex;
     gap: .5rem;
     --tw-text-opacity: 1;
     color: rgb(148 163 184/var(--tw-text-opacity))
 }

 @media (min-width: 1280px) {
     .breadcrumb {
         border-left-width: 4px;
         --tw-border-opacity: 1;
         border-left-color: rgb(74 222 128/var(--tw-border-opacity));
         padding-left: .75rem;
         font-size: .875rem;
         line-height: 1.25rem
     }
 }

 .breadcrumb a {
     --tw-text-opacity: 1;
     color: rgb(30 41 59/var(--tw-text-opacity))
 }

 @media (min-width: 1280px) {
     .detail section {
         display: flex;
         gap: 1.5rem
     }
 }

 .detail .meta {
     margin: 1rem;
     border-radius: 2rem;
     border-width: 4px;
     --tw-border-opacity: 1;
     border-color: rgb(191 219 254/var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255/var(--tw-bg-opacity));
     padding: 1rem;
     --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: #dbeafe;
     --tw-shadow: var(--tw-shadow-colored)
 }

 @media (min-width: 1280px) {
     .detail .meta {
         overflow: hidden;
         padding: 2rem
     }
 }

 .detail .thumbnail {
     height: 7rem;
     width: 7rem
 }

 @media (min-width: 1280px) {
     .detail .thumbnail {
         height: 12rem;
         width: 12rem
     }
 }

 .detail h1 {
     margin-top: .5rem;
     margin-bottom: .5rem;
     flex-grow: 1;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 700
 }

 @media (min-width: 1280px) {
     .detail h1 {
         margin-bottom: 1.25rem;
         margin-top: .75rem;
         font-size: 3rem;
         line-height: 1
     }
 }

 .detail .info {
     display: flex;
     align-items: center;
     gap: .5rem
 }

 .rating {
     display: inline-flex;
     align-items: center;
     gap: .25rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
     font-weight: 700;
     --tw-text-opacity: 1;
     color: rgb(249 115 22/var(--tw-text-opacity))
 }

 @media (min-width: 1280px) {
     .rating {
         font-size: 1.5rem;
         line-height: 2rem
     }
 }

 .detail .category {
     border-radius: .375rem;
     --tw-bg-opacity: 1;
     background-color: rgb(163 230 53/var(--tw-bg-opacity));
     padding: .25rem .375rem;
     font-size: .75rem;
     line-height: 1rem;
     text-transform: uppercase;
     --tw-text-opacity: 1;
     color: rgb(101 163 13/var(--tw-text-opacity))
 }

 .detail .button-play {
     margin: 1.5rem 2rem;
     display: block;
     border-radius: 9999px;
     --tw-bg-opacity: 1;
     background-color: rgb(34 197 94/var(--tw-bg-opacity));
     padding: 1rem;
     text-align: center;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 600;
     --tw-text-opacity: 1;
     color: rgb(255 255 255/var(--tw-text-opacity));
     --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: rgba(74, 222, 128, .4);
     --tw-shadow: var(--tw-shadow-colored)
 }

 @media (min-width: 1280px) {
     .detail .button-play {
         margin-left: auto;
         margin-right: auto;
         display: none;
         width: 24rem;
         transition-duration: .5s
     }

     .detail .button-play,
     .detail .button-play:hover {
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }

     .detail .button-play:hover {
         --tw-scale-x: 1.1;
         --tw-scale-y: 1.1
     }
 }

 .detail aside .game-list {
     margin-bottom: 1rem;
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }

 @media (min-width: 1280px) {
     .detail aside .game-list {
         grid-template-columns: repeat(3, minmax(0, 1fr))
     }
 }

 .description {
     overflow: hidden;
     text-overflow: ellipsis;
     padding-top: 1rem
 }

 @media (min-width: 1280px) {
     .description {
         max-width: 64rem;
         font-size: .875rem;
         line-height: 1.25rem
     }
 }

 .screenshots {
     position: relative;
     padding-top: 1.5rem
 }

 @media (min-width: 1280px) {
     .screenshots {
         max-width: 64rem
     }
 }

 .screenshots ul {
     display: flex;
     scroll-snap-type: x var(--tw-scroll-snap-strictness);
     justify-content: center;
     gap: .75rem
 }

 .popular h2,
 aside h2 {
     margin-top: .75rem;
     margin-bottom: .75rem;
     font-weight: 700
 }

 @media (min-width: 1280px) {

     .popular h2,
     aside h2 {
         font-size: 1.25rem;
         line-height: 1.75rem
     }
 }

 .popular .game-list {
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }

 @media (min-width: 1280px) {
     .popular .game-list {
         grid-template-columns: repeat(8, minmax(0, 1fr))
     }
 }

 .description.show-all {
     overflow: visible;
     display: block;
     -webkit-box-orient: horizontal;
     -webkit-line-clamp: none
 }

 .game-player {
     margin: 1rem;
     display: none;
     --tw-bg-opacity: 1;
     background-color: rgb(229 231 235/var(--tw-bg-opacity))
 }

 @media (min-width: 1280px) {
     .game-player {
         display: block
     }
 }

 .game-player-container {
     position: relative;
     display: flex;
     width: 100%;
     justify-content: center
 }

 .loading {
     position: absolute;
     top: 50%;
     display: block;
     height: 5rem;
     width: 5rem;
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     background-image: url(../fonts/loading.54cb9f7d.svg);
     background-position: 50%;
     background-repeat: no-repeat
 }

 .game-iframe {
     aspect-ratio: 9/16;
     height: 800px;
     max-height: 100vh;
     width: 540px;
     padding: 1rem
 }

 .site-footer {
     margin-top: 1rem;
     overflow: hidden;
     border-top-left-radius: 1.5rem;
     border-top-right-radius: 1.5rem;
     --tw-bg-opacity: 1;
     background-color: rgb(22 163 74/var(--tw-bg-opacity));
     text-align: center;
     font-size: .75rem;
     line-height: 1rem;
     --tw-text-opacity: 1;
     color: rgb(240 253 244/var(--tw-text-opacity))
 }

 @media (min-width: 1280px) {
     .site-footer {
         margin-left: 1.25rem;
         margin-right: 1.25rem
     }
 }

 .site-footer nav {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     --tw-bg-opacity: 1;
     background-color: rgb(21 128 61/var(--tw-bg-opacity));
     padding: .75rem
 }

 .site-footer .logo {
     margin: 1.5rem auto .5rem;
     width: 9rem
 }

 .site-footer p {
     margin-bottom: 2.5rem
 }

 .search-panel {
     position: fixed;
     inset: 0;
     top: 0;
     z-index: 50;
     overflow-y: auto;
     padding: 25vh 1rem 1rem
 }

 .search-container {
     position: relative;
     margin-left: auto;
     margin-right: auto;
     max-width: 36rem
 }

 .search-container>:not([hidden])~:not([hidden]) {
     --tw-divide-y-reverse: 0;
     border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
 }

 .search-container {
     overflow: hidden;
     border-radius: .75rem;
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255/var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(31 41 55/var(--tw-text-opacity))
 }

 .search-container::-moz-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175/var(--tw-placeholder-opacity))
 }

 .search-container::placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175/var(--tw-placeholder-opacity))
 }

 .search-container {
     --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
     --tw-ring-color: rgba(0, 0, 0, .05)
 }

 .search-input {
     width: 100%;
     border-width: 0;
     background-color: transparent;
     padding: 1rem
 }

 .search-input:focus {
     border-width: 0;
     outline: 2px solid transparent;
     outline-offset: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }

 .search-result {
     max-height: 24rem;
     overflow-y: auto;
     padding-top: 1rem;
     padding-bottom: 1rem;
     font-size: .875rem;
     line-height: 1.25rem
 }

 .page .section-head {
     margin-bottom: 1.5rem;
     flex-direction: column;
     justify-content: center;
     gap: .5rem
 }

 .page h1 {
     margin-top: .75rem;
     margin-bottom: .75rem;
     text-align: center;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 700
 }

 @media (min-width: 1280px) {
     .page h1 {
         font-size: 1.875rem;
         line-height: 2.25rem
     }
 }

 .page .content {
     margin: 1rem
 }

 .page p,
 .page ul {
     margin-top: .5rem;
     margin-bottom: .5rem
 }

 .page a {
     text-decoration-line: underline;
     text-decoration-style: dotted;
     text-underline-offset: 4px
 }

 .page ul {
     margin-left: 1.5rem;
     list-style-position: outside;
     list-style-type: disc
 }

 .page h2 {
     margin-top: .75rem;
     margin-bottom: .75rem;
     font-weight: 700
 }

 .scroll-top-btn {
     position: fixed;
     right: 1rem;
     bottom: 1rem;
     z-index: 50;
     border-radius: 9999px;
     --tw-bg-opacity: 1;
     background-color: rgb(249 115 22/var(--tw-bg-opacity));
     padding: 1rem;
     text-align: center;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 600;
     --tw-text-opacity: 1;
     color: rgb(255 255 255/var(--tw-text-opacity));
     --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: rgba(251, 146, 60, .4);
     --tw-shadow: var(--tw-shadow-colored)
 }

 @media (min-width: 1280px) {
     .scroll-top-btn {
         bottom: 2rem;
         right: 2rem;
         transition-duration: .5s
     }

     .scroll-top-btn,
     .scroll-top-btn:hover {
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
     }

     .scroll-top-btn:hover {
         --tw-scale-x: 1.1;
         --tw-scale-y: 1.1
     }
 }

 .banner {
     margin-bottom: 1rem;
     min-height: 250px;
     --tw-bg-opacity: 1;
     background-color: rgb(226 232 240/var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(148 163 184/var(--tw-text-opacity))
 }

 .focus\:border-0:focus {
     border-width: 0
 }

 .focus\:outline-none:focus {
     outline: 2px solid transparent;
     outline-offset: 2px
 }

 .focus\:ring-0:focus {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }

 @media (min-width: 1280px) {
     .xl\:block {
         display: block
     }

     .xl\:hidden {
         display: none
     }

     .xl\:h-8 {
         height: 2rem
     }

     .xl\:w-8 {
         width: 2rem
     }

     .xl\:w-full {
         width: 100%
     }

     .xl\:max-w-xl {
         max-width: 36rem
     }

     .xl\:flex-row-reverse {
         flex-direction: row-reverse
     }

     .xl\:justify-between {
         justify-content: space-between
     }

     .xl\:gap-4 {
         gap: 1rem
     }

     .xl\:pt-4 {
         padding-top: 1rem
     }

     .xl\:text-lg {
         font-size: 1.125rem;
         line-height: 1.75rem
     }
 }

 #nprogress {
     pointer-events: none
 }

 #nprogress .bar {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1031;
     height: 3px;
     width: 100%;
     --tw-bg-opacity: 1;
     background-color: rgb(132 204 22/var(--tw-bg-opacity))
 }

 #nprogress .peg {
     display: block;
     position: absolute;
     right: 0;
     width: 100px;
     height: 100%;
     box-shadow: 0 0 10px #84cc16, 0 0 5px #84cc16;
     opacity: 1;
     transform: rotate(3deg) translateY(-4px)
 }

 #nprogress .spinner {
     display: none;
     position: fixed;
     z-index: 1031;
     top: 50%;
     left: 50%;
     padding: 2rem;
     background-color: #00000050;
     border-radius: 8px;
     --tw-translate-x: -50%;
     --tw-translate-y: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }

 #nprogress .spinner-icon {
     width: 24px;
     height: 24px;
     box-sizing: border-box;
     border-color: #84cc16 transparent transparent #84cc16;
     border-style: solid;
     border-width: 4px;
     border-radius: 50%;
     animation: nprogress-spinner .4s linear infinite
 }

 @media (min-width: 768px) {
     #nprogress .spinner {
         top: 50%
     }
 }

 .nprogress-custom-parent {
     overflow: hidden;
     position: relative
 }

 .nprogress-custom-parent #nprogress .bar,
 .nprogress-custom-parent #nprogress .spinner {
     position: absolute
 }

 @keyframes nprogress-spinner {
     0% {
         transform: rotate(0deg)
     }

     to {
         transform: rotate(1turn)
     }
 }

 .list-item {
     width: 7rem;
     float: left;
     margin-left: 12px;
     margin-top: 5px;
 }

 .section-head2 {
     display: flex;
     flex-direction: column;
     padding: 1rem 1.4rem;
 }

 .section-head2 h1 {
     text-align: center;
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 700;
 }

 .meta {
     margin: 1rem;
     border-radius: 2rem;
     border-width: 4px;
     --tw-border-opacity: 1;
     border-color: rgb(191 219 254/var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255/var(--tw-bg-opacity));
     padding: 1rem;
     --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: #dbeafe;
     --tw-shadow: var(--tw-shadow-colored);
 }

 .button-play {
     margin: 1.5rem 2rem;
     display: block;
     border-radius: 9999px;
     --tw-bg-opacity: 1;
     background-color: rgb(34 197 94/var(--tw-bg-opacity));
     padding: 1rem;
     text-align: center;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 600;
     --tw-text-opacity: 1;
     color: rgb(255 255 255/var(--tw-text-opacity));
     --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-shadow-color: rgba(74, 222, 128, .4);
     --tw-shadow: var(--tw-shadow-colored);
 }

 .thumbnail {
     height: 7rem;
     width: 7rem;
 }

 .site-main img {
     border-radius: 0.75rem;
 }

 .category {
     border-radius: 0.375rem;
     --tw-bg-opacity: 1;
     background-color: rgb(163 230 53/var(--tw-bg-opacity));
     padding: 0.25rem 0.375rem;
     font-size: .75rem;
     line-height: 1rem;
     text-transform: uppercase;
     --tw-text-opacity: 1;
     color: rgb(101 163 13/var(--tw-text-opacity));
 }

 .info {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .site-branding {
     width: 90%;
     display: flex;
     justify-content: flex-start;
     height: 41px;
 }

 .site-branding img {
     width: 60px;
     height: 41px;
 }

 .text-logo {
     width: 60px;
     height: 41px;
     display: flex;
     flex-direction: column;
     color: #fff;
     z-index: 999;
     margin-left: 5px;
     margin-top: 5px;
 }

 .text-style {

     font-family: Comic Sans MS;
 }

 .text-style:first-child {
     font-size: 24px;
 }