#nprogress {

    pointer-events: none

}



#nprogress .bar {

    background: #fde047;

    height: 3px;

    left: 0;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1

}



#nprogress .peg {

    box-shadow: 0 0 10px #fde047, 0 0 5px #fde047;

    display: block;

    height: 100%;

    opacity: 1;

    position: absolute;

    right: 0;

    transform: rotate(3deg) translateY(-4px);

    width: 100px

}



#nprogress .spinner {

    display: block;

    left: 50%;

    position: fixed;

    top: 15px;

    transform: translateX(-50%);

    z-index: 1

}



#nprogress .spinner-icon {

    -webkit-animation: a .4s linear infinite;

    animation: a .4s linear infinite;

    border-radius: 50%;

    border-color: #fde047 transparent transparent #fde047;

    border-style: solid;

    border-width: 2px;

    box-sizing: border-box;

    height: 18px;

    width: 18px

}



@media (min-width: 768px) {

    #nprogress .spinner {

        background: #00000050;

        border-radius: 10px;

        padding: 20px;

        top: 50%

    }



    #nprogress .spinner-icon {

        border-width: 4px;

        height: 48px;

        transform: translateX(-50%);

        transform: translateY(-50%);

        width: 48px

    }

}



.nprogress-custom-parent {

    overflow: hidden;

    position: relative

}



.nprogress-custom-parent #nprogress .bar, .nprogress-custom-parent #nprogress .spinner {

    position: absolute

}



@-webkit-keyframes a {

    0% {

        -webkit-transform: rotate(0deg)

    }

    to {

        -webkit-transform: rotate(1turn)

    }

}



@keyframes a {

    0% {

        transform: rotate(0deg)

    }

    to {

        transform: rotate(1turn)

    }

}



*, :after, :before {

    border: 0 solid #e5e7eb;

    box-sizing: border-box

}



:after, :before {

    --tw-content: ""

}



html {

    -webkit-text-size-adjust: 100%;

    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;

    line-height: 1.5;

    -moz-tab-size: 4;

    -o-tab-size: 4;

    tab-size: 4

}



body {

    line-height: inherit;

    margin: 0

}



hr {

    border-top-width: 1px;

    color: inherit;

    height: 0

}



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 {

    border-collapse: collapse;

    border-color: inherit;

    text-indent: 0

}



button, input, optgroup, select, textarea {

    color: inherit;

    font-family: inherit;

    font-size: 100%;

    font-weight: inherit;

    line-height: 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, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {

    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 {

    color: #9ca3af;

    opacity: 1

}



input::placeholder, textarea::placeholder {

    color: #9ca3af;

    opacity: 1

}



[role=button], button {

    cursor: pointer

}



:disabled {

    cursor: default

}



audio, canvas, embed, iframe, img, object, svg, video {

    display: block;

    vertical-align: middle

}



img, video {

    height: auto;

    max-width: 100%

}



*, :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-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:

}



::-webkit-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-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-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:

}



.container {

    width: 100%

}



@media (min-width: 640px) {

    .container {

        max-width: 640px

    }

}



@media (min-width: 768px) {

    .container {

        max-width: 768px

    }

}



@media (min-width: 1024px) {

    .container {

        max-width: 1024px

    }

}



@media (min-width: 1280px) {

    .container {

        max-width: 1280px

    }

}



@media (min-width: 1536px) {

    .container {

        max-width: 1536px

    }

}



.static {

    position: static

}



.absolute {

    position: absolute

}



.relative {

    position: relative

}



.left-4 {

    left: 1rem

}



.top-4 {

    top: 1rem

}



.left-0 {

    left: 0

}



.bottom-0 {

    bottom: 0

}



.order-2 {

    order: 2

}



.col-span-3 {

    grid-column: span 3/span 3

}



.col-span-2 {

    grid-column: span 2/span 2

}



.row-span-3 {

    grid-row: span 3/span 3

}



.row-span-2 {

    grid-row: span 2/span 2

}



.m-4 {

    margin: 1rem

}



.mx-auto {

    margin-left: auto;

    margin-right: auto

}



.my-8 {

    margin-bottom: 2rem;

    margin-top: 2rem

}



.my-3 {

    margin-bottom: .75rem;

    margin-top: .75rem

}



.mx-4 {

    margin-left: 1rem;

    margin-right: 1rem

}



.my-2 {

    margin-bottom: .5rem;

    margin-top: .5rem

}



.my-4 {

    margin-bottom: 1rem;

    margin-top: 1rem

}



.mt-20 {

    margin-top: 5rem

}



.mb-8 {

    margin-bottom: 2rem

}



.mt-4 {

    margin-top: 1rem

}



.mb-4 {

    margin-bottom: 1rem

}



.ml-4 {

    margin-left: 1rem

}



.block {

    display: block

}



.inline-block {

    display: inline-block

}



.flex {

    display: flex

}



.grid {

    display: grid

}



.contents {

    display: contents

}



.list-item {

    display: list-item

}



.hidden {

    display: none

}



.aspect-square {

    aspect-ratio: 1/1

}



.h-full {

    height: 100%

}



.h-12 {

    height: 3rem

}



.h-5 {

    height: 1.25rem

}



.h-4 {

    height: 1rem

}


/* 
.min-h-screen {

    min-height: 100vh

} */



.w-20 {

    width: 5rem

}



.w-full {

    width: 100%

}



.w-32 {

    width: 8rem

}



.w-auto {

    width: auto

}



.w-5 {

    width: 1.25rem

}



.w-4 {

    width: 1rem

}



.max-w-4xl {

    max-width: 56rem

}



.grow {

    flex-grow: 1

}



.basis-3\/5 {

    flex-basis: 60%

}



.transform {

    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))

}



.list-outside {

    list-style-position: outside

}



.list-disc {

    list-style-type: disc

}



.grid-cols-3 {

    grid-template-columns:repeat(3, minmax(0, 1fr))

}



.grid-cols-2 {

    grid-template-columns:repeat(2, minmax(0, 1fr))

}



.flex-col {

    flex-direction: column

}



.flex-wrap {

    flex-wrap: wrap

}



.items-start {

    align-items: flex-start

}



.items-center {

    align-items: center

}



.justify-center {

    justify-content: center

}



.gap-2 {

    gap: .5rem

}



.gap-4 {

    gap: 1rem

}



.gap-1 {

    gap: .25rem

}



.overflow-hidden {

    overflow: hidden

}



.rounded-lg {

    border-radius: .5rem

}



.rounded-md {

    border-radius: .375rem

}



.rounded-xl {

    border-radius: .75rem

}



.bg-slate-200 {

    --tw-bg-opacity: 1;

    background-color: rgb(226 232 240/var(--tw-bg-opacity))

}



.bg-emerald-600\/80 {

    background-color: rgba(5, 150, 105, .8)

}



.bg-black\/10 {

    background-color: rgba(0, 0, 0, .1)

}



.bg-gradient-to-t {

    background-image: linear-gradient(to top, var(--tw-gradient-stops))

}



.bg-loading {

    background-image: url(../fonts/loading.7501d30c.svg)

}



.from-white {

    --tw-gradient-from: #fff;

    --tw-gradient-to: hsla(0, 0%, 100%, 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)

}



.bg-center {

    background-position: 50%

}



.bg-no-repeat {

    background-repeat: no-repeat

}



.p-4 {

    padding: 1rem

}



.px-1 {

    padding-left: .25rem;

    padding-right: .25rem

}



.py-1 {

    padding-bottom: .25rem;

    padding-top: .25rem

}



.px-2 {

    padding-left: .5rem;

    padding-right: .5rem

}



.text-center {

    text-align: center

}



.text-3xl {

    font-size: 1.875rem;

    line-height: 2.25rem

}



.text-sm {

    font-size: .875rem;

    line-height: 1.25rem

}



.text-xs {

    font-size: .75rem;

    line-height: 1rem

}



.text-xl {

    font-size: 1.25rem;

    line-height: 1.75rem

}



.font-bold {

    font-weight: 700

}



.uppercase {

    text-transform: uppercase

}



.text-emerald-100\/90 {

    color: rgba(209, 250, 229, .9)

}



.text-blue-500 {

    --tw-text-opacity: 1;

    color: rgb(59 130 246/var(--tw-text-opacity))

}



.opacity-50 {

    opacity: .5

}



.shadow-md {

    --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)

}



.shadow-lg, .shadow-md {

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



.shadow-lg {

    --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)

}



.shadow-emerald-500\/30 {

    --tw-shadow-color: rgba(16, 185, 129, .3);

    --tw-shadow: var(--tw-shadow-colored)

}



.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)

}



html {

    --tw-bg-opacity: 1;

    background-color: rgb(7 89 133/var(--tw-bg-opacity))

}



body {

    --tw-gradient-from: #075985;

    --tw-gradient-to: rgba(7, 89, 133, 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    --tw-gradient-to: #0c4a6e;

    background-attachment: fixed;

    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));

    color: hsla(0, 0%, 100%, .8)

}



main {

    margin-top: 3rem

}



@media (min-width: 1280px) {

    main {

        margin-top: 0

    }

}



.site-header {

    position: fixed;

    width: 100%;

    z-index: 1

}



@media (min-width: 1280px) {

    .site-header {

        position: static

    }

}



.navbar, .navbar-nav {

    gap: .5rem

}



@media (min-width: 1280px) {

    .navbar, .navbar-nav {

        -moz-column-gap: 1rem;

        column-gap: 1rem;

        flex-wrap: wrap;

        padding-left: 3rem;

        padding-right: 3rem

    }

}



.navbar {

    --tw-backdrop-blur: blur(8px);

    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

    background-color: rgba(0, 0, 0, .05);

    border-bottom-width: 1px;

    border-color: rgba(0, 0, 0, .1);

    color: hsla(0, 0%, 100%, .8);

    font-size: .875rem;

    font-weight: 700;

    justify-content: space-between;

    line-height: 1.25rem

}



@media (min-width: 1280px) {

    .navbar {

        --tw-gradient-from: #84cc16;

        --tw-gradient-to: rgba(132, 204, 22, 0);

        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

        --tw-gradient-to: #22c55e;

        --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);

        --tw-shadow-color: rgba(0, 0, 0, .2);

        --tw-shadow: var(--tw-shadow-colored);

        background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

        border-bottom-width: 0;

        border-radius: 9999px;

        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

        display: flex;

        justify-content: center;

        margin: 1rem;

        position: relative

    }

}



.navbar-nav {

    --tw-gradient-from: #22c55e;

    --tw-gradient-to: rgba(34, 197, 94, 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    --tw-gradient-to: #84cc16;

    --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);

    --tw-shadow-color: rgba(0, 0, 0, .2);

    --tw-shadow: var(--tw-shadow-colored);

    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

    border-radius: 1.5rem;

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    margin: 0 1rem 1rem;

    padding: 1rem

}



@media (min-width: 1280px) {

    .navbar-nav {

        --tw-shadow: 0 0 #0000;

        --tw-shadow-colored: 0 0 #0000;

        background-image: none;

        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

        margin: 0;

        padding: .75rem

    }

}



.navbar-nav li {

    background-color: hsla(0, 0%, 100%, .1);

    border-color: hsla(0, 0%, 100%, .1);

    border-radius: .5rem;

    border-width: 2px;

    padding: .5rem

}



@media (min-width: 1280px) {

    .navbar-nav li {

        background-color: transparent;

        border-color: transparent

    }



    .navbar-nav li:hover {

        background-color: hsla(0, 0%, 100%, .2)

    }

}



.navbar-nav a {

    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06));

    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)

}



.navbar-brand {

    align-items: center;

    border-radius: 9999px;

    display: flex;

    height: 2.5rem;

    justify-content: center;

    overflow: hidden;

    position: absolute;

    width: 2.5rem

}



@media (min-width: 1280px) {

    .navbar-brand {

        --tw-bg-opacity: 1;

        background-color: rgb(255 255 255/var(--tw-bg-opacity));

        left: .75rem;

        top: .75rem

    }

}



.navbar-toggler {

    --tw-text-opacity: 1;

    align-items: center;

    color: rgb(253 224 71/var(--tw-text-opacity));

    display: flex;

    height: 2.5rem;

    justify-content: center;

    margin-left: auto;

    width: 2.5rem

}



@media (min-width: 1024px) {

    .navbar-toggler {

        display: none

    }
    .logo_img{
 	       display:none !important;
  	  }

}



.icon-home {

    --tw-text-opacity: 1;

    color: rgb(253 224 71/var(--tw-text-opacity))

}



@media (min-width: 1280px) {

    .icon-home {

        --tw-text-opacity: 1;

        color: rgb(250 204 21/var(--tw-text-opacity))

    }

}



.icon-menu {

    --tw-text-opacity: 1;

    color: rgb(253 224 71/var(--tw-text-opacity))

}



.game-list {

    display: grid;

    gap: 1rem;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    margin-left: 1rem;

    margin-right: 1rem

}



@media (min-width: 1280px) {

    .game-list {

        grid-template-columns:repeat(12, minmax(0, 1fr))

    }

}



.section-title h1 {

    --tw-gradient-from: #bef264;

    --tw-gradient-to: hsla(82, 85%, 67%, 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    --tw-gradient-to: #0891b2;

    -webkit-background-clip: text;

    background-clip: text;

    background-image: linear-gradient(to right, var(--tw-gradient-stops));

    color: transparent;

    display: inline-block

}



.more-link {

    border-color: rgba(132, 204, 22, .2);

    border-width: 1px;

    color: rgba(132, 204, 22, .8);

    justify-content: center;

    margin-left: 1rem;

    margin-right: 1rem;

    padding: .5rem

}



.more-link, .site-footer {

    display: flex;

    font-size: .75rem;

    line-height: 1rem

}



.site-footer {

    --tw-bg-opacity: 1;

    align-items: center;

    background-color: rgb(7 89 133/var(--tw-bg-opacity));

    color: rgba(224, 242, 254, .5);

    flex-direction: column

}



.site-footer p {

    opacity: .6;

    padding-bottom: 1.5rem;

    padding-top: 1.5rem

}



.site-footer-nav {

    --tw-bg-opacity: 1;

    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06));

    background-color: rgb(3 105 161/var(--tw-bg-opacity));

    display: flex;

    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);

    gap: 1rem;

    justify-content: center;

    padding: .5rem;

    width: 100%

}



.breadcrumb {

    border-bottom-width: 1px;

    border-color: rgba(0, 0, 0, .1);

    display: flex;

    font-size: .75rem;

    gap: 1.5rem;

    line-height: 1rem;

    margin-left: 1rem;

    margin-right: 1rem;

    padding-bottom: .75rem;

    padding-top: .75rem

}



.breadcrumb-item {

    position: relative

}



.breadcrumb-item:after {

    --tw-content: "/";

    content: var(--tw-content);

    opacity: .5;

    position: absolute;

    right: -1rem

}



.detail {

    --tw-border-opacity: 1;

    --tw-bg-opacity: 1;

    --tw-text-opacity: 1;

    background-color: rgb(255 255 255/var(--tw-bg-opacity));

    border-color: rgb(239 246 255/var(--tw-border-opacity));

    border-radius: 1.5rem;

    border-width: 8px;

    color: rgb(100 116 139/var(--tw-text-opacity));

    grid-column: span 6/span 6;

    grid-column-start: 4;

    margin: 1rem

}



@media (min-width: 1280px) {

    .detail {

        margin: 0 1.5rem 1rem

    }

}



.game-category .section-title {

    font-size: 1.5rem;

    line-height: 2rem;

    margin: 1rem;

    text-align: center

}



.description {

    font-size: .875rem;

    height: 4rem;

    line-height: 1.25rem;

    overflow-y: auto;

    padding-bottom: 2rem;

    position: relative

}



@media (min-width: 1280px) {

    .description {

        height: auto;

        margin-left: 9rem;

        margin-top: 1rem

    }

}



.home .section-title {

    --tw-border-opacity: 1;

    border-left-color: rgb(253 224 71/var(--tw-border-opacity));

    border-left-width: 4px;

    line-height: 1.25rem;

    margin-bottom: 1rem;

    margin-top: 1rem;

    padding-left: .75rem

}



.home section, .home section ul {

    margin-bottom: 1rem

}



.list-item {

    border-radius: .5rem

}



.list-item a {

    display: block;

    overflow: hidden;

    position: relative

}



@media (min-width: 1280px) {

    .list-item a:hover {

        display: flex;

        justify-content: flex-end

    }



    .list-item a:hover .list-item-meta {

        --tw-gradient-from: transparent;

        --tw-gradient-to: transparent;

        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

        --tw-gradient-to: rgba(0, 0, 0, .9);

        background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

        bottom: 0

    }

}



.list-item-meta {

    --tw-translate-x: -50%;

    align-items: center;

    bottom: -100%;

    display: flex;

    flex-direction: column;

    font-size: .75rem;

    height: 100%;

    justify-content: flex-end;

    left: 50%;

    line-height: 1rem;

    padding: .5rem;

    position: absolute;

    text-align: center;

    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));

    width: 100%

}



.list-item-rating {

    --tw-text-opacity: 1;

    background-image: url(../fonts/icon_star.489f2ed3.svg);

    background-position: 0;

    background-repeat: no-repeat;

    color: rgb(249 115 22/var(--tw-text-opacity));

    font-size: .875rem;

    font-weight: 700;

    line-height: 1.25rem;

    margin-top: .25rem;

    padding-left: 1.5rem

}



.play-button {

    --tw-gradient-from: #eab308;

    --tw-gradient-to: rgba(234, 179, 8, 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    --tw-gradient-to: #fb923c;

    --tw-text-opacity: 1;

    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);

    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);

    --tw-shadow-color: rgba(0, 0, 0, .2);

    --tw-shadow: var(--tw-shadow-colored);

    background-image: linear-gradient(to right, var(--tw-gradient-stops));

    border-radius: 9999px;

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    color: rgb(255 255 255/var(--tw-text-opacity));

    flex-grow: 1;

    font-size: 1.125rem;

    font-weight: 700;

    line-height: 1.75rem;

    padding: .75rem 2.25rem;

    text-align: center;

    transition-duration: .15s;

    transition-property: transform;

    transition-timing-function: cubic-bezier(.4, 0, .2, 1)

}



.game-detail .game-list {

    grid-template-columns:repeat(3, minmax(0, 1fr))

}



.game-detail h1 {

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.75rem;

    padding-bottom: .5rem

}



@media (min-width: 768px) {

    .game-detail h1 {

        font-size: 1.875rem;

        line-height: 2.25rem

    }

}



.game-meta {

    align-items: center;

    display: flex

}



.game-meta > :not([hidden]) ~ :not([hidden]) {

    --tw-space-x-reverse: 0;

    margin-left: calc(.5rem * (1 - var(--tw-space-x-reverse)));

    margin-right: calc(.5rem * var(--tw-space-x-reverse))

}



.game-rating {

    --tw-text-opacity: 1;

    background-image: url(../fonts/icon_star.489f2ed3.svg);

    background-position: 0;

    background-repeat: no-repeat;

    color: rgb(249 115 22/var(--tw-text-opacity));

    font-size: 1.125rem;

    font-weight: 700;

    line-height: 1.75rem;

    padding-left: 1.5rem

}



.list-item {

    --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);

    --tw-shadow-color: rgba(0, 0, 0, .2);

    --tw-shadow: var(--tw-shadow-colored);

    border-radius: 1rem;

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    overflow: hidden

}



.ad-container {

    margin-left: auto;

    margin-right: auto

}



@media (min-width: 300px) {

    .ad-container {

        width: 300px

    }



    .banner {

        height: 100px

    }



    .banner_sm {

        height: 50px

    }



    .rectangle, .square {

        height: 250px

    }



    .square {

        width: 250px

    }

}



@media (min-width: 320px) {

    .ad-container {

        width: 320px

    }

}



@media (min-width: 468px) {

    .banner {

        height: 60px;

        width: 468px

    }

}



@media (min-width: 728px) {

    .banner {

        height: 90px;

        width: 728px

    }

}



@media (min-width: 970px) {

    .banner_fw, .banner_lg {

        width: 970px

    }



    .banner_lg {

        height: 250px

    }

}



.adsbygoogle {

    background-color: rgba(0, 0, 0, .05);

    margin-left: auto;

    margin-right: auto;

    width: 100%

}



.site-policy {

    font-size: .875rem;

    line-height: 1.25rem;

    margin-left: 1rem;

    margin-right: 1rem;

    margin-top: 1rem;

    padding-bottom: 1rem

}



@media (min-width: 768px) {

    .site-policy {

        padding: 2rem

    }

}



@media (min-width: 1280px) {

    .site-policy {

        margin-left: auto;

        margin-right: auto;

        width: 1120px

    }

}



.site-policy h1 {

    color: hsla(0, 0%, 100%, .8);

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 2rem;

    padding-bottom: .75rem

}



.site-policy h2 {

    font-size: 1.125rem;

    font-weight: 700;

    line-height: 1.75rem;

    margin-bottom: .75rem;

    margin-top: .75rem

}



.site-policy ul {

    list-style-position: outside;

    list-style-type: disc;

    margin-left: 1rem

}



.site-policy p, .site-policy ul {

    margin-bottom: .5rem;

    margin-top: .5rem

}



@media (min-width: 1280px) {

    .xl\:sr-only {

        clip: rect(0, 0, 0, 0);

        border-width: 0;

        height: 1px;

        margin: -1px;

        overflow: hidden;

        padding: 0;

        white-space: nowrap;

        width: 1px

    }



    .xl\:absolute, .xl\:sr-only {

        position: absolute

    }



    .xl\:order-2 {

        order: 2

    }



    .xl\:order-1 {

        order: 1

    }



    .xl\:order-3 {

        order: 3

    }



    .xl\:my-6 {

        margin-bottom: 1.5rem;

        margin-top: 1.5rem

    }



    .xl\:mx-6 {

        margin-left: 1.5rem;

        margin-right: 1.5rem

    }



    .xl\:my-8 {

        margin-bottom: 2rem;

        margin-top: 2rem

    }



    .xl\:my-4 {

        margin-bottom: 1rem;

        margin-top: 1rem

    }



    .xl\:ml-36 {

        margin-left: 9rem

    }



    .xl\:block {

        display: block

    }



    .xl\:flex {

        display: flex

    }



    .xl\:w-32 {

        width: 8rem

    }



    .xl\:w-1\/4 {

        width: 25%

    }



    .xl\:basis-1\/3 {

        flex-basis: 33.333333%

    }



    .xl\:grid-cols-4 {

        grid-template-columns:repeat(4, minmax(0, 1fr))

    }



    .xl\:grid-cols-9 {

        grid-template-columns:repeat(9, minmax(0, 1fr))

    }



    .xl\:grid-cols-3 {

        grid-template-columns:repeat(3, minmax(0, 1fr))

    }



    .xl\:flex-row {

        flex-direction: row

    }



    .xl\:flex-col {

        flex-direction: column

    }



    .xl\:items-start {

        align-items: flex-start

    }



    .xl\:items-end {

        align-items: flex-end

    }



    .xl\:justify-between {

        justify-content: space-between

    }



    .xl\:gap-4 {

        gap: 1rem

    }



    .xl\:text-4xl {

        font-size: 2.25rem;

        line-height: 2.5rem

    }

}