*,::before,::after { box-sizing: border-box } a { color: #1abc9c; text-decoration: none; background-color: #fff0 } a:hover { color: orange; text-decoration: underline } article,aside,figcaption,figure,footer,header,hgroup,main,section { display: block } .text-center { text-align: center!important } .game-container { margin: 30px 0 } .cat-list { display: flex; flex-wrap: wrap; margin-top: 8px } img { max-width: 100% } .container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-right: auto; margin-left: auto } @media (min-width: 576px) { .container,.container-sm { max-width:540px } } @media (min-width: 768px) { .container,.container-md,.container-sm { max-width:720px } } @media (min-width: 992px) { .container,.container-lg,.container-md,.container-sm { max-width:960px } } @media (min-width: 1200px) { .container,.container-lg,.container-md,.container-sm,.container-xl { max-width:1140px } } @media (min-width: 1400px) { .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl { max-width:1320px } } /* aaaaaaaaaa */ i.disabled { opacity: .5; pointer-events: none } *,::after,::before { box-sizing: border-box } @media (prefers-reduced-motion:no-preference) { :root { scroll-behavior: smooth } } hr { margin: 1rem 0; color: inherit; border: 0; border-top: var(--bs-border-width) solid; opacity: .25 } .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: var(--bs-heading-color) } .h1,h1 { font-size: calc(1.375rem + 1.5vw) } @media (min-width: 1200px) { .h1,h1 { font-size:2.5rem } } .h2,h2 { font-size: calc(1.325rem + .9vw) } @media (min-width: 1200px) { .h2,h2 { font-size:2rem } } .h3,h3 { font-size: calc(1.3rem + .6vw) } @media (min-width: 1200px) { .h3,h3 { font-size:1.75rem } } .h4,h4 { font-size: calc(1.275rem + .3vw) } @media (min-width: 1200px) { .h4,h4 { font-size:1.5rem } } .h5,h5 { font-size: 1.25rem } .h6,h6 { font-size: 1rem } p { margin-top: 0; margin-bottom: 1rem } ol,ul { padding-left: 2rem } dl,ol,ul { margin-top: 0; margin-bottom: 1rem } li { margin-bottom: 5px; } a { color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)); text-decoration: none } figure { margin: 0 0 1rem } img,svg { vertical-align: middle } tbody,td,tfoot,th,thead,tr { border-color: inherit; border-style: solid; border-width: 0 } label { display: inline-block } button { border-radius: 0 } button:focus:not(:focus-visible) { outline: 0 } button,input,optgroup,select,textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit } button,select { text-transform: none } [role=button] { cursor: pointer } select { word-wrap: normal } [type=button],[type=reset],[type=submit],button { -webkit-appearance: button } [type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled) { cursor: pointer } ::-moz-focus-inner { padding: 0; border-style: none } textarea { resize: vertical } .list-unstyled { padding-left: 0; list-style: none } .img-fluid { max-width: 100%; height: auto } :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; --bs-breakpoint-md: 768px; --bs-breakpoint-lg: 992px; --bs-breakpoint-xl: 1200px; --bs-breakpoint-xxl: 1400px } .row { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)) } .row>* { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y) } .col { flex: 1 0 0% } .col-1 { flex: 0 0 auto; width: 8.33333333% } .col-2 { flex: 0 0 auto; width: 16.66666667% } .col-3 { flex: 0 0 auto; width: 25% } .col-4 { flex: 0 0 auto; width: 33.33333333% } .col-5 { flex: 0 0 auto; width: 41.66666667% } .col-6 { flex: 0 0 auto; width: 50% } .col-7 { flex: 0 0 auto; width: 58.33333333% } .col-8 { flex: 0 0 auto; width: 66.66666667% } .col-9 { flex: 0 0 auto; width: 75% } .col-10 { flex: 0 0 auto; width: 83.33333333% } .col-11 { flex: 0 0 auto; width: 91.66666667% } .col-12 { flex: 0 0 auto; width: 100% } @media (min-width: 768px) { .col-md-1 { flex:0 0 auto; width: 8.33333333% } .col-md-2 { flex: 0 0 auto; width: 16.66666667% } .col-md-3 { flex: 0 0 auto; width: 25% } .col-md-4 { flex: 0 0 auto; width: 33.33333333% } .col-md-5 { flex: 0 0 auto; width: 41.66666667% } .col-md-6 { flex: 0 0 auto; width: 50% } .col-md-7 { flex: 0 0 auto; width: 58.33333333% } .col-md-8 { flex: 0 0 auto; width: 66.66666667% } .col-md-9 { flex: 0 0 auto; width: 75% } .col-md-10 { flex: 0 0 auto; width: 83.33333333% } .col-md-11 { flex: 0 0 auto; width: 91.66666667% } } @media (min-width: 992px) { .col-lg-1 { flex:0 0 auto; width: 8.33333333% } .col-lg-2 { flex: 0 0 auto; width: 16.66666667% } .col-lg-3 { flex: 0 0 auto; width: 25% } .col-lg-4 { flex: 0 0 auto; width: 33.33333333% } .col-lg-5 { flex: 0 0 auto; width: 41.66666667% } .col-lg-6 { flex: 0 0 auto; width: 50% } .col-lg-7 { flex: 0 0 auto; width: 58.33333333% } .col-lg-8 { flex: 0 0 auto; width: 66.66666667% } .col-lg-9 { flex: 0 0 auto; width: 75% } .col-lg-10 { flex: 0 0 auto; width: 83.33333333% } .col-lg-11 { flex: 0 0 auto; width: 91.66666667% } .col-lg-12 { flex: 0 0 auto; width: 100% } } @media (min-width: 1200px) { .col-xl-1 { flex:0 0 auto; width: 8.33333333% } .col-xl-2 { flex: 0 0 auto; width: 16.66666667% } .col-xl-3 { flex: 0 0 auto; width: 25% } .col-xl-4 { flex: 0 0 auto; width: 33.33333333% } .col-xl-5 { flex: 0 0 auto; width: 41.66666667% } .col-xl-6 { flex: 0 0 auto; width: 50% } .col-xl-7 { flex: 0 0 auto; width: 58.33333333% } .col-xl-8 { flex: 0 0 auto; width: 66.66666667% } .col-xl-9 { flex: 0 0 auto; width: 75% } .col-xl-10 { flex: 0 0 auto; width: 83.33333333% } .col-xl-11 { flex: 0 0 auto; width: 91.66666667% } .col-xl-12 { flex: 0 0 auto; width: 100% } } .page-item.disabled .page-link { color: var(--bs-body-bg); pointer-events: none; cursor: auto; background-color: var(--bs-success); border-color: #dee2e6 } .btn-close { --bs-btn-close-color: #fff; --bs-btn-close-bg: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.01335 9.52277L14.1589 15.6683C14.3638 15.8662 14.6382 15.9757 14.9231 15.9733C15.2079 15.9708 15.4804 15.8565 15.6818 15.6551C15.8832 15.4537 15.9975 15.1812 16 14.8964C16.0024 14.6115 15.8929 14.3371 15.695 14.1322L9.54947 7.98665L15.695 1.84108C15.8929 1.63619 16.0024 1.36177 16 1.07693C15.9975 0.792085 15.8832 0.519611 15.6818 0.31819C15.4804 0.116769 15.2079 0.00251626 14.9231 4.10675e-05C14.6382 -0.00243413 14.3638 0.107065 14.1589 0.304956L8.01335 6.45053L1.86778 0.304956C1.66196 0.111957 1.38914 0.00660217 1.10703 0.0111832C0.824916 0.0157641 0.555655 0.129922 0.356217 0.329501C0.156779 0.52908 0.0428113 0.798422 0.0384299 1.08054C0.0340485 1.36265 0.139597 1.6354 0.332741 1.84108L6.47723 7.98665L0.331654 14.1322C0.227895 14.2324 0.145134 14.3523 0.0881987 14.4849C0.0312633 14.6174 0.00129449 14.7599 4.1018e-05 14.9042C-0.00121245 15.0484 0.0262742 15.1915 0.0808977 15.325C0.135521 15.4585 0.216187 15.5798 0.318189 15.6818C0.420191 15.7838 0.541486 15.8645 0.674996 15.9191C0.808507 15.9737 0.951559 16.0012 1.09581 16C1.24005 15.9987 1.38261 15.9687 1.51515 15.9118C1.64769 15.8549 1.76756 15.7721 1.86778 15.6683L8.01335 9.52277Z" fill="%23A5B6E1"/></svg>'); --bs-btn-close-opacity: 0.5; --bs-btn-close-hover-opacity: 0.75; --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); --bs-btn-close-focus-opacity: 1; --bs-btn-close-disabled-opacity: 0.25; --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); box-sizing: content-box; width: 1em; height: 1em; padding: .25em .25em; color: var(--bs-btn-close-color); background: #fff0 var(--bs-btn-close-bg) center/1em auto no-repeat; border: 0; border-radius: .375rem; opacity: var(--bs-btn-close-opacity) } .btn-close:hover { color: var(--bs-btn-close-color); text-decoration: none; opacity: var(--bs-btn-close-hover-opacity) } .btn-close:focus { outline: 0; box-shadow: var(--bs-btn-close-focus-shadow); opacity: var(--bs-btn-close-focus-opacity) } .offcanvas{ --bs-offcanvas-zindex: 1045; --bs-offcanvas-width: 400px; --bs-offcanvas-height: 30vh; --bs-offcanvas-padding-x: 1rem; --bs-offcanvas-padding-y: 1rem; --bs-offcanvas-color: var(--bs-body-color); --bs-offcanvas-bg: var(--bs-body-bg); --bs-offcanvas-border-width: var(--bs-border-width); --bs-offcanvas-border-color: var(--bs-border-color-translucent); --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm); --bs-offcanvas-transition: transform 0.3s ease-in-out; --bs-offcanvas-title-line-height: 1.5 } .offcanvas { position: fixed; bottom: 0; z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; color: var(--bs-offcanvas-color); visibility: hidden; background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; transition: var(--bs-offcanvas-transition) } @media (prefers-reduced-motion:reduce) { .offcanvas { transition: none } } @media (max-width: 575.98px) { .offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%) } } @media (max-width: 767.98px) { .offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%) } } @media (max-width: 991.98px) { .offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%) } } @media (max-width: 1199.98px) { .offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%) } } @media (max-width: 1399.98px) { .offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%) } } .offcanvas.offcanvas-start { top: 0; left: 0; width: var(--bs-offcanvas-width); border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(-100%) } .offcanvas.offcanvas-end { top: 0; right: 0; width: var(--bs-offcanvas-width); border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); transform: translateX(100%) } .offcanvas.show:not(.hiding),.offcanvas.showing { transform: none } .offcanvas.hiding,.offcanvas.show,.offcanvas.showing { visibility: visible } .d-flex { display: flex!important } .flex-column { flex-direction: column!important } .flex-wrap { flex-wrap: wrap!important } .mt-4 { margin-top: 1.5rem!important } .mt-5 { margin-top: 3rem!important } .mb-3 { margin-bottom: 1rem!important } .mb-4 { margin-bottom: 1.5rem!important } .mb-5 { margin-bottom: 3rem!important } .py-4 { padding-top: 0.5rem!important; padding-bottom: 0.5rem!important } /* dumv */ :root { --background: var(--bs-body-bg); } ::placeholder { color: var(--bs-secondary-color); font-weight: 300 } :focus::placeholder { text-indent: -999px } .content { display: flex; justify-content: space-evenly; align-items: flex-start; overflow: visible } ::-webkit-scrollbar { width: 7px; height: 7px } ::-webkit-scrollbar-thumb { border-radius: 99px; background-color: #E63946 } ::-webkit-scrollbar-button { height: 16px } .f24 { font-size: 24px } @media only screen and (max-width: 992px) { .game-container { margin: 5px 0 } } #custom-toast { position: fixed; top: 20px; right: 20px; z-index: 9999; padding: 12px 24px; border-radius: 8px; color: #fff; font-weight: 500; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transform: translateX(150%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #custom-toast.show { transform: translateX(0); } .toast-success { background: #10b981; border-left: 5px solid #047857; } .toast-info { background: #3b82f6; border-left: 5px solid #1d4ed8; } @media screen and (max-width: 900px) { .container { padding-left: 5px; padding-right: 5px; } } .main-menu { margin-right: 20px; } body { margin: 0; padding: 0; min-height: 100vh; background-color: #5c94fc; background-image: radial-gradient(circle at 12% 20%, #fff 40px, transparent 40px), radial-gradient(circle at 15% 22%, #fff 50px, transparent 50px), radial-gradient(circle at 18% 20%, #fff 40px, transparent 40px), radial-gradient(circle at 82% 38%, #fff 50px, transparent 50px), radial-gradient(circle at 85% 40%, #fff 70px, transparent 70px), radial-gradient(circle at 88% 38%, #fff 50px, transparent 50px), linear-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px; background-attachment: fixed; image-rendering: pixelated; font-family: 'Press Start 2P', cursive; color: #fff; overflow-x: hidden; } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% 8px; z-index: 9999; pointer-events: none; } .justify-content-center { justify-content: center!important }