:root{--darkgrey:#434343;--grey:#595959;--darkwhite:#f5f5f5;--white:#fff;--darkcyan:#226262;--lightcyan:#6fcccc;--bottomcyan:#83cfcf;--footercyan:#3e7979;--darkblue:#15233d;--cool_balaclavas:#16233D;--freesia:#eeb20d;--sunflower-island:#FFCC01;--white-smoke:#f5f5f5;--ball-gown:#4f5660;--grey-of-darkness:#A2A2A2;--background-color:white;--font-color:black;--header-background:linear-gradient(180deg,#3c5a90 0,#000 100%);--font-family:"Ubuntu";--websites-ad-background:var(--bottomcyan);--footer-background:linear-gradient(180deg,#3c5a90 0,#000 100%);--play-button-gradient:linear-gradient(#67BCBC,#1A6161);--border-color:black;--input-background:#2C2F30;--header-height:61px;--header-height-plus:81px;--header-selected:#226262}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;src:url('../fonts/ubuntu-v20-latin-regular.eot');src:local(''),url('../fonts/ubuntu-v20-latin-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'),url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'),url('../fonts/ubuntu-v20-latin-regular.ttf') format('truetype'),url('../fonts/ubuntu-v20-latin-regular.svg#Ubuntu') format('svg');font-display:swap}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;src:url('../fonts/ubuntu-v20-latin-700.eot');src:local(''),url('../fonts/ubuntu-v20-latin-700.eot?#iefix') format('embedded-opentype'),url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'),url('../fonts/ubuntu-v20-latin-700.woff') format('woff'),url('../fonts/ubuntu-v20-latin-700.ttf') format('truetype'),url('../fonts/ubuntu-v20-latin-700.svg#Ubuntu') format('svg');font-display:swap}
*{margin:0;padding:0;box-sizing:border-box;border:0;outline:0;font-size:1rem;line-height:1.5rem;vertical-align:baseline;background:transparent}
.ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h1{font-size:2rem;margin-top:20px;margin-bottom:20px}
h2{font-size:1.5rem;margin-top:20px;margin-bottom:10px}
h3{font-size:1.2rem;margin-top:10px;margin-bottom:10px}
a{text-decoration:none;color:inherit}
img{max-width:100%}
li{list-style-type:none}
p{margin-top:10px;margin-bottom:10px}
body{font-family:var(--font-family),sans-serif;line-height:1.5;background-color:var(--background-color);color:var(--font-color)}
.wrapper{margin:0 auto}
.no-select{-webkit-touch-callout:none !important;-webkit-user-select:none !important;-khtml-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:transparent}
.hidden{display:none !important}
#content{position:relative;min-height:100vh;margin:0 5px}
@media screen and (min-width:901px){#content{max-width:1200px;margin:0 auto}
}#background_pattern{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.1;background-image:url("../images/background_pattern.png");background-repeat:repeat}
#content>.wrapper{position:relative}
.arrow{border:solid white;border-width:0 2px 2px 0;display:inline-block;padding:5px;transition:.5s transform;margin-left:.5rem}
.right{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.left{transform:rotate(135deg);-webkit-transform:rotate(135deg)}
.up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}
.down{transform:rotate(45deg);-webkit-transform:rotate(45deg);vertical-align:.1rem}
.down.r{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);vertical-align:.1rem}
.arrow-down{margin-left:5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid black}
.page-content{margin:20px auto;background:white;border-radius:10px}
.page-content a{text-decoration:underline;color:#1a1adf}
.page-content li{list-style-type:disc;margin-left:15px}
@media screen and (max-width:900px){#content{padding-top:var(--header-height)}
}.categories-header{display:flex;justify-content:space-between;align-items:end}
.categories-header .more-link{border:1px solid #15233D;border-radius:13px;background-color:#15233D;color:white;padding-left:.5rem;padding-right:.5rem;margin-bottom:10px}
.categories-container{margin:0 auto;margin-top:10px;margin-bottom:10px;display:grid;--categoriesGridColumns:1;grid-template-columns:repeat(var(--categoriesGridColumns),1fr);grid-auto-rows:1fr;grid-auto-flow:row dense;grid-gap:.3rem}
.category-item{max-height:58px;background-color:#D8D8D8;border-radius:10px;display:flex;align-items:center}
.category-item:hover{transform:scale(1.02);text-decoration:underline;border:1px solid #979797}
.category-item>span{padding-right:1rem;max-height:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.category-tile{height:calc(100% - .5rem);width:auto;aspect-ratio:1/1 !important;border-radius:10px;margin-left:.5rem;margin-right:.5rem}
@media screen and (min-width:375px){.categories-container{--categoriesGridColumns:2}
}@media screen and (min-width:768px){.categories-container{--categoriesGridColumns:3}
}@media screen and (min-width:1200px){.categories-container{--categoriesGridColumns:4}
}.d-none{display:none !important}
.games-list{display:grid;grid-gap:.5rem;--gridTemplateColumns:6;grid-template-columns:repeat(var(--gridTemplateColumns),1fr)}
.games-list a,.games-list img{aspect-ratio:1/1;width:100%;height:auto}
@media screen and (min-width:901px){.games-list{--gridTemplateColumns:10}
}header{height:var(--header-height);width:100vw;max-width:100%;background:var(--header-background);font-weight:bold;z-index:1;color:white}
header .wrapper{padding:10px 0;display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;height:100%}
header .logo{margin:0 10px}
header .logo img{display:inline-block;vertical-align:top;height:100%;width:auto}
header .logo span{display:none}
#hamburger-menu{width:100%;display:flex;justify-content:space-between;margin-left:20px}
#hamburger-menu ul{align-items:center;list-style-type:none;display:flex;justify-content:space-between;margin-bottom:0}
#hamburger-menu li{margin-right:10px;margin-left:10px;border-bottom:2px solid transparent;border-top:2px solid transparent}
#hamburger-menu li.active{color:var(--header-selected);border-bottom:2px solid white}
#hamburger-menu li.separator{height:20px;width:1px;background-color:#CCC}
.header-selector{cursor:pointer}
@media screen and (min-width:901px){#hamburger-menu ul:first-child a{border-bottom:2px solid #ccc}
#hamburger-menu ul a{color:white}
#hamburger-menu{margin-right:20px}
#login-button>a>svg{margin-right:0 !important}
#login-button>a>div{display:none}
}@media screen and (min-width:1190px){#login-button>a>svg{margin-right:.3rem !important}
#login-button>a>div{display:inline}
}@media screen and (max-width:900px){header{position:fixed;top:0;left:0}
header .logo{width:100%}
header .logo img{position:absolute;left:10px;top:0}
header .logo span{display:block}
header .logo a{display:flex;align-items:center;justify-content:center;text-shadow:2px 3px 1px rgb(0 0 0 / 10%);font-size:1.5rem;color:white;width:100%}
#hamburger{display:inline-block;width:calc(var(--header-height) - 20px - 2px);height:calc(var(--header-height) - 20px - 2px);position:absolute;right:1rem;top:10px;-webkit-user-select:none;user-select:none;cursor:pointer;padding:5px}
#hamburger div{display:block;width:30px;height:5px;margin-bottom:5px;position:relative;background:white;border-radius:3px;z-index:1;transition:transform .5s cubic-bezier(0.77,0.2,0.05,1),background .5s cubic-bezier(0.77,0.2,0.05,1),opacity .55s ease}
#hamburger div:nth-child(1){transform-origin:0 0}
#hamburger div:nth-child(3){transform-origin:0 100%}
#hamburger.open div{background:white}
#hamburger.open div:nth-child(1){transform:rotate(45deg)}
#hamburger.open div:nth-child(2){opacity:0;transform:rotate(0deg) scale(0.2,0.2)}
#hamburger.open div:nth-child(3){transform:rotate(-45deg)}
#hamburger-menu{position:absolute;z-index:1;overflow-y:scroll;height:calc(100vh - var(--header-height));width:100vw;top:var(--header-height);left:100vw;background:rgba(240,240,240,0.98);padding:1rem;padding-top:calc(var(--header-height)+1rem);flex-direction:column;transition:left .5s cubic-bezier(0.77,0.2,0.05,1)}
#hamburger-menu ul{flex-direction:column;align-items:center;justify-content:center;font-size:large;color:black}
#hamburger-menu li{margin:1rem 0}
#hamburger-menu ul a{color:black;padding:20px}
header .separator{display:none}
header #hamburger-menu.open{left:0}
header #hamburger-menu{justify-content:initial}
#avatar-toggle{display:none !important}
.header-user-actions-div{display:block !important}
.search-bar{margin-right:20px}
}.nav-avatar-div{border-radius:50%;background-color:#8FCEFF;overflow:hidden;border:2px solid #F0C429}
.nav-avatar-div.small{height:33px;width:33px}
.nav-avatar-div.small>img{width:33px;height:33px}
.nav-avatar-div.medium{height:42px;width:42px}
.header-user-actions-div{width:242px;height:109px;position:unset;top:61px;right:0;z-index:1;background-color:white;color:black;padding:9px;border-radius:10px;cursor:default}
@media screen and (min-width:900px){.header-user-actions-div{position:absolute;border-radius:0 0 10px 10px}
.header-user-actions-div:not(.open){display:none}
}.header-user-actions-div>div{display:flex}
.header-user-actions-div>div>.user-info{display:flex;flex-direction:column;padding-left:13px;justify-content:space-around}
.header-user-username{line-height:16px;font-size:15px;font-weight:bold}
.header-user-mail{line-height:11px;font-size:10px;font-weight:100;text-align:left}
.header-user-actions-div>.profile-anchor{color:#135FD4 !important;font-size:13px;font-weight:bold;margin-left:33px;padding:unset !important;padding-left:13px !important;display:flex}
.sign-out-anchor{font-size:13px;color:black !important;padding:unset !important;padding-left:18px !important;cursor:pointer}
.search-bar{display:grid;grid-template-columns:80fr 20fr;background-color:white;border-radius:5px}
@media screen and (min-width:1024px){.search-bar{width:200px}
}.search-bar input{padding:.25rem;padding-left:.5rem;--border-radius:5px;border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius);border:1px solid #bfbfbf;border-right:0;width:100%}
.search-bar input:focus{border-color:var(--sunflower-island)}
.search-bar button{background-color:var(--sunflower-island);--border-radius:5px;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border:1px solid var(--sunflower-island);display:flex;justify-content:center;align-items:center}
.search-bar button:hover{background-color:var(--freesia)}
#login-button{border:2px solid var(--sunflower-island) !important;border-radius:20px;display:flex;align-items:center;height:34px;padding-left:.6rem;padding-right:.6rem}
#login-button:hover{background-color:var(--sunflower-island)}
#login-button>a{display:flex;align-items:center}
#login-button>a>svg{margin-right:.3rem}
#autocomplete{position:relative}
#search-input-autocomplete-list{position:absolute;width:100%;border-bottom-left-radius:8px;border-bottom-right-radius:8px;border:1px solid var(--white-smoke);box-shadow:0 8px 14px 0 #888;z-index:2;color:black}
.autocomplete-items a{padding:10px;cursor:pointer;background-color:var(--white);border-bottom:1px solid var(--white-smoke);font-weight:100;display:flex;align-items:center;color:black !important}
.autocomplete-items .category-autocomplete-item{grid-template-rows:repeat(2,1fr)}
.autocomplete-items a img{grid-row:span 2;aspect-ratio:1/1;height:42px;width:auto}
.autocomplete-items .game-autocomplete-item span{grid-row:span 2}
.autocomplete-items a span{padding-left:.25rem}
.autocomplete-items a .cat-result-text{display:flex;flex-direction:column;width:calc(100% - 42px)}
.autocomplete-items a .cat-games{color:var(--ball-gown);font-size:.75rem}
.autocomplete-items a:hover,.autocomplete-items a:focus,#autocomplete.input-focused .autocomplete-items a.exact-match{cursor:pointer;background-color:var(--white-smoke)}
.autocomplete-items a:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}
footer{background:var(--footer-background);border-top:4px solid var(--border-color);min-height:20vh;width:100vw;max-width:100%;color:white}
footer .wrapper{min-height:20vh;padding:1rem 0;display:flex;flex-direction:column}
footer .footer-phrase{grid-area:links;text-align:center}
footer .info{margin-top:2rem;order:1;grid-area:info;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center}
footer .links{margin-top:1rem;display:grid;grid-area:links;align-items:center;justify-items:center;grid-template-columns:1fr;width:100%}
@media screen and (min-width:768px){footer .links{grid-template-columns:repeat(3,1fr);grid-auto-flow:column;grid-template-rows:repeat(2,1fr)}
footer .links>.first-col{grid-column-start:1}
footer .links>.second-col{grid-column-start:2}
footer .links>.footer-selector{grid-column-start:3}
.down-menu{bottom:unset !important;top:40px}
.footer-selector:hover .down-menu.hidden{display:block !important}
}@media screen and (min-width:890px){footer .links>.first-col{grid-column-start:1}
footer .links>.second-col{grid-column-start:2}
}footer a:hover{font-weight:bold}
.footer-selector:hover{cursor:pointer}
@media screen and (min-width:001px){.footer-selector:hover .arrow{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);vertical-align:0rem}
}.down-menu{display:flex;flex-direction:column;position:absolute;left:50%;transform:translateX(-50%);z-index:1;background:var(--white);white-space:nowrap;color:#737373;border-radius:12px;bottom:40px}
footer .down-menu{z-index:2}
.down-menu a{height:2rem;display:flex;justify-content:start;align-items:center;padding-left:.2rem;padding-right:1.2rem}
.down-menu a:not(:last-child){border-bottom:1px solid #D4D4D4}
.down-menu a:not(:last-child) span{height:100%;width:100%;display:flex;justify-content:center;align-items:center}
.down-menu a:hover{border-top-left-radius:12px;border-top-right-radius:12px;background-color:white;font-weight:normal;color:var(--darkblue) !important}
.down-menu a:hover:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.down-menu a img{width:24px;height:24px;margin:5px}
.drop-button{display:flex;justify-content:center;align-items:center}
.footer-selector{position:relative;width:100%;max-width:300px;text-align:center}
.active-flag{width:40px;height:auto}
#paginator{text-align:center;margin:5px auto}
#paginator p{margin:5px;line-height:1.5rem;font-size:1.5rem;color:var(--darkblue)}
#paginator .pages{display:flex;width:fit-content;width:-moz-fit-content;margin:auto}
#paginator .pages a,#paginator .pages div{width:40px;height:40px;margin:2px}
#paginator .pages a{background-color:#fff;color:var(--darkblue)}
#paginator .pages .number{line-height:1.5rem;font-size:1.5rem;padding:10px 0}
#paginator .pages svg{width:100%;height:100%;fill:var(--darkblue);background-color:#fff}
#paginator .pages div{background-color:var(--darkblue);color:white}
#paginator .pages a:hover{opacity:.7;border:1px solid var(--darkblue)}
.modal-overlay{position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.4)}
.modal-overlay>.modal{background-color:white;border-radius:15px;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);z-index:100;width:90%;height:498px;box-shadow:0 0 10px rgba(0,0,0,0.3)}
.modal>.modal-close{border-radius:50%;box-sizing:border-box;background-color:rgba(0,0,0,0.3);color:white;cursor:pointer;font-size:18px;font-weight:bold;opacity:1;height:20px;width:20px;position:absolute;right:10px;top:10px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;padding:10px}
.modal>.modal-close:hover{border:2px solid rgba(0,0,0,0.3);color:rgba(0,0,0,0.3);background-color:white}
@media(min-width:768px){.modal-overlay>.modal{width:70%;max-width:663px}
}