@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

@keyframes fly-and-tilt {
	from {
		transform: translateX(0) rotate(0);
	}
	to {
		transform: translateX(1200px) rotate(30deg);
	}
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideFromBottom {
    0% {
		opacity: 0;
        transform: translateY(100%);
    }
    100% {
		opacity: 1;
        transform: translateY(0);
    }
}

@keyframes swipeRight {
    100% {
        transform: translateX(100%) rotateY(40deg);
		opacity: 0;
    }
}

@keyframes swipeLeft {
    0% {
        transform: translateX(100%) rotateY(40deg);
		opacity: 0;
    }
    100% {
        transform: translateX(0%) rotateY(0deg);
		opacity: 1;
    }
}

.slide-from-bottom {
    animation: slideFromBottom 0.8s cubic-bezier(0.13, 1, 0.32, 1) forwards;
}

.swipe-right {
    animation: swipeRight 0.8s forwards;
}

.swipe-left {
    animation: swipeLeft 0.8s forwards;
	z-index: 10 !important;
}

.fade-in {
	animation: fadeIn 0.8s ease-in-out forwards;
}


main {
	background-image: linear-gradient(180deg, #CC3E43 0%, #FF4D54 82.03%);
	background-size: 100%;
	min-height: 100vh;
	color: #FFF;
	font-family: 'DM Sans', sans-serif;
    overflow: hidden;
	display: flex;
}

.splash {
	display: flex;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	min-height: 100vh;
	flex-direction: column;
	background-image: url('/img/Hero-img.webp');
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header {
	padding: 32px 64px;
	height: 56px;
	text-align: left;
}

.header svg {
	height: 56px;
	display: block;
	margin: 0;
}

.splash h1 {
	text-shadow: 0px 4px 40px rgba(0, 0, 0, 0.25);
	font-size: 80px;
	font-style: normal;
	font-weight: 700;
	line-height: 88px;
	letter-spacing: -1.6px;
	margin: 0 0 16px 0;
	padding: 0;
}

.splash h2 {
	text-shadow: 0px 4px 40px rgba(0, 0, 0, 0.25);
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: 48px;
	letter-spacing: -0.4px;
	margin: 0 auto 40px;
	padding: 0;
	max-width: 860px;
}

.btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 4px;
	background: #FFDE00;
	color:#2F2F3B;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: -0.18px;
	text-decoration: none;
}

.btn svg {
	width: 24px;
	height: 24px;
	display: inline-block;
	margin: -3px 0 0 4px;
	vertical-align: middle;
}

@media (max-width: 1200px) {
	.header {
		padding: 24px 24px;
		height: 48px;
	}
	
	.header svg {
		height: 48px;
	}
	
	.splash h1 {
		font-size: 40px;
		line-height: 44px;
	}
	
	.splash h2 {
		font-size: 22px;
		line-height: 28px;
	}

	.btn {
		font-size: 14px;
		line-height: 22px;
		padding: 12px 20px;
	}
}

.splash__content {
	text-align: center;
	max-width: 1200px;
	width: 100%;
	margin: auto;
	padding-bottom: 64px;
}

.loader-container {
	text-align: center;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	left: 0;
	right: 0;
}

.game {
	margin: 0 auto;
	display: flex;
	padding: 40px 0;
	max-width: 1920px;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
	box-sizing: border-box;
    align-self: center;
	align-items: center;
    width: 100%;
}

.game__left {
	width: 50%;
	display: flex;
}

.game__right {
	width: 50%;
	padding-top: 0px;
	color: #2F2F3B;
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 100%;
}

@media (max-width: 1200px) {
	.game {
		padding: 32px 10px;
		flex-wrap: wrap;
		margin-left: auto;
		margin-right: auto;
		max-width: 600px;
	}
	
	.game__left {
		width: 100%;
		order: 2;
	}
	
	.game__right {
		width: 100%;
		padding-top: 0px;
		order: 1;
	}
}

.categories {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-width: 68%;
    width: 100%;
}

.category {
	flex: 0 0 50%;
	width: 50%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 32px;
}

.category-wrap {
	transform-style: preserve-3d;
    transform: perspective(100rem);
}

.category__inner {
	transform-style: preserve-3d;
    will-change: transform; 
    backface-visibility: hidden;
	transition: box-shadow 0.3s ease;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0);
}

.category-wrap:hover .category__inner {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.category__title {
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.18px;
	margin: 0 0 16px;
	white-space: nowrap;
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    padding: 0 15%;
    z-index: 10;
	color: #FFF;
	pointer-events: none;
}

.category__title svg {
	width: 100%;
	display: block;
}

.category__title text {
    dominant-baseline: middle;
    text-anchor: middle;
	fill: #FFF;
	font-size: 24px;
}

.category--3 .category__title {
	color: #2F2F3B;
}

.category--3 .category__title text {
	fill: #2F2F3B;
}

.category button {
	border: 0;
	outline: 0;
	padding: 0;
	appearance: none;
	cursor: pointer;
	overflow: hidden;
	margin: auto;
	display: block;
	width: 100%;
	aspect-ratio: 176 / 232;
	flex-direction: column;
	align-items: center;
	border-radius: 16px;
	background: #5CC0E7;
	position: relative;
	display: flex;
}

.category button:before {
	content: "";
	display: block;
	position: absolute;
	top: 5.2%;
	right: 6.8%;
	bottom: 5.2%;
	left: 6.8%;
	border: solid 1px #FFF;
	border-radius: 12px;
}

.category button:after {
	content: "";
	display: block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 38 14'%3E%3Cpath fill='%23fff' d='M.5 6.73v7.083h11.53V0L3.91 9.603.5 6.73Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M15.975 4.724V2.21h.887v-.57h-2.378v.57h.887v2.514h.604Zm14.316 1.04a.354.354 0 0 1-.356.352.351.351 0 0 1-.357-.352.356.356 0 1 1 .713 0ZM15.371 9.33h1.152c.61 0 1.014.4 1.014.96 0 .562-.405.962-1.014.962h-.552v1.16h-.6V9.33Zm.604 1.404h.474c.3 0 .483-.165.483-.44 0-.274-.182-.443-.483-.443h-.474v.883Zm2.432-.462v.318c.13-.283.426-.335.609-.335.048 0 .092.005.135.009v.583a.87.87 0 0 0-.174-.018c-.296 0-.552.144-.552.605v.978h-.579v-2.14h.561ZM20.63 4.79c.526 0 .865-.309.974-.678l-.483-.144c-.07.192-.218.327-.487.327-.287 0-.526-.205-.54-.487h1.531l.001-.02a1.8 1.8 0 0 0 .008-.16c0-.686-.396-1.108-1.057-1.108-.548 0-1.052.444-1.052 1.127 0 .722.517 1.144 1.104 1.144Zm-.043-1.8c.33 0 .47.209.478.422h-.957a.463.463 0 0 1 .479-.422Zm3.761 4.761-.239.253v.565h-.578V5.476h.578v1.749l.739-.796h.756l-.856.9.874 1.24h-.71l-.564-.819Zm5.879-1.322h-.579v2.14h.579v-2.14ZM18.203 3.05c-.244 0-.387.183-.4.417v1.256h-.58V1.665h.58v1.099c.138-.165.373-.235.578-.235.543 0 .796.378.796.848v1.347h-.579V3.476c0-.24-.117-.426-.395-.426Zm-2.831 2.435v3.083h.573V6.424l.888 2.144h.5l.887-2.16v2.16h.591V5.485h-.817l-.905 2.227-.926-2.227h-.791Zm10.65 4.123c0-.2.16-.361.356-.361.2 0 .357.169.357.36 0 .192-.16.353-.357.353a.351.351 0 0 1-.356-.352Zm2.806-3.818h-.574v.638h-.387v.513h.387v.996c0 .413.26.661.678.661.17 0 .3-.03.354-.052v-.478c-.03.009-.136.017-.205.017-.165 0-.252-.06-.252-.248v-.896h.456v-.513h-.456V5.79h-.001Zm.527 5.543c0-.683.504-1.127 1.052-1.127v.001c.661 0 1.057.422 1.057 1.109a2.188 2.188 0 0 1-.009.179h-1.53c.012.282.252.487.538.487.27 0 .417-.135.487-.327l.483.144c-.109.369-.448.678-.974.678-.587 0-1.104-.422-1.104-1.144Zm1.06-.657a.46.46 0 0 0-.477.422h.956c-.009-.213-.148-.422-.478-.422Zm-2.31 1.27c-.295 0-.548-.217-.548-.604s.248-.6.544-.6c.296 0 .422.183.474.36l.517-.173c-.091-.36-.422-.722-1.004-.722-.622 0-1.108.474-1.108 1.136 0 .661.495 1.135 1.125 1.135.57 0 .905-.365 1-.722l-.508-.169a.49.49 0 0 1-.492.361v-.002Zm-2.014-1.674h.579v2.14h-.579v-2.14Zm8.37-3.842v.25c-.074-.142-.27-.29-.608-.29-.587 0-.996.478-.996 1.044 0 .6.427 1.04.996 1.04.309 0 .508-.136.595-.275v.157c0 .413-.204.595-.57.595-.273 0-.46-.169-.5-.404l-.52.14c.06.408.425.774 1.012.774.805 0 1.148-.535 1.148-1.123V6.43h-.557Zm-.508 1.547c-.3 0-.513-.21-.513-.544 0-.335.226-.54.513-.54.286 0 .504.21.504.54 0 .33-.209.544-.504.544ZM31.15 6.695c.13-.222.387-.322.617-.322v.001c.53 0 .774.378.774.848V8.57h-.578V7.32c0-.239-.118-.426-.396-.426-.252 0-.4.196-.4.444v1.23h-.578v-2.14h.561v.266Zm-3.506 1.26-.482-.143c-.07.191-.218.326-.487.326-.287 0-.526-.205-.54-.487h1.532v-.019c.003-.032.008-.097.008-.16 0-.687-.395-1.108-1.056-1.108-.549 0-1.053.444-1.053 1.127 0 .721.517 1.143 1.104 1.143.526 0 .865-.309.974-.678v-.001Zm-1.018-1.122c.33 0 .47.209.479.422h-.957a.462.462 0 0 1 .478-.422Zm-5.729 1.485c-.08.156-.291.316-.66.316v-.002c-.635 0-1.077-.523-1.077-1.135s.442-1.134 1.078-1.134c.368 0 .58.16.66.316v-.25h.602v2.139h-.603v-.25Zm-.002-.819c0-.348-.26-.63-.579-.63-.32 0-.578.282-.578.63 0 .348.259.63.578.63.32 0 .579-.282.579-.63Zm1.546.091c0-.461.257-.604.553-.604.052 0 .108.004.173.017V6.42a1.324 1.324 0 0 0-.135-.008c-.183 0-.478.051-.608.335v-.318h-.561v2.14h.578V7.59Zm-2.02 2.617c.368 0 .58.16.66.316v-.252h.602v2.139h-.602v-.25c-.08.156-.292.315-.66.315-.635 0-1.078-.522-1.078-1.134 0-.612.442-1.134 1.078-1.134Zm-.499 1.135c0 .348.26.63.579.63.32 0 .578-.282.578-.63 0-.348-.259-.63-.578-.63-.32 0-.579.282-.579.63Zm3.197.604c-.295 0-.548-.217-.548-.604s.248-.6.544-.6c.296 0 .422.183.474.36l.517-.173c-.091-.36-.422-.722-1.004-.722-.621 0-1.108.474-1.108 1.136 0 .661.495 1.135 1.125 1.135.57 0 .905-.365 1-.722l-.508-.169a.49.49 0 0 1-.492.361v-.002Zm1.579-2.316h.574v.642h.458v.513h-.457v.893c0 .188.087.248.252.248.069 0 .174-.008.205-.017v.478a1.055 1.055 0 0 1-.354.052c-.417 0-.678-.248-.678-.661v-.994h-.387v-.513h.387V9.63Z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;
	width: 20%;
	padding: 0 5%;
	aspect-ratio: 37 / 13.813;
	position: absolute;
	top: 2%;
	background-color: inherit;
}

.category--1 button {
	background-color: #5CC0E7;
}

.category--2 button {
	background-color: #2F2F3B;
}

.category--3 button {
	background-color: #FFE533;
}

.category--4 button {
	background-color: #E3364A;
}

.category__img {
	width: 76%;
	height: 88%;
	position: absolute;
	top: 0;
	right: 12%;
	bottom: 0;
	left: 12%;
	object-fit: contain;
	object-position: center;
	display: block;
	pointer-events: none;
	user-select: none;
}

@media (max-width: 1200px) {
	.categories {
		max-width: none;
	}
	.categories.selected {
		display: none;
	}
	.category {
		padding: 20px 12px;
	}
}

.cards {
	width: 100%;
	position: relative;
	padding-bottom: 36px;
}

.card {
	margin: 0 auto;
	/* aspect-ratio: 392 / 496; */
	min-height: 650px;
	max-width: 460px;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid #C3C3D7;
	background: #FFF;
	color: #2F2F3B;
	box-shadow: 0px 10px 32px -4px rgba(24, 39, 75, 0.10), 0px 6px 14px -6px rgba(24, 39, 75, 0.12);
	box-sizing: border-box;
	display: flex;
	user-select: none;
	z-index: 2;
	position: relative;
	cursor: grab;
}

.card__holder {
	position: relative;
	perspective: 1500px;
}

.card--prev {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
	box-shadow: none;
}

.card--prev.swipe-right {
	z-index: 3;
}

.card-intro {
	margin-bottom: 10px;
}

.card-intro__h1 {
	display: none;
	margin: 0 0 8px;
}
.card-intro__h2 {
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 28px;
	margin: 0 0 8px;
}
.card-intro__h3 {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

.cards__close {
	display: flex;
	color: #FFF;
	cursor: pointer;
	margin: 0 0 32px auto;
	align-items: center;
	gap: 6px;
}

.cards__close svg {
	width: 25px;
	height: 25px;
}

.card__inner {
	border-radius: 8px;
	border: 2px solid #2F2F3B;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	flex: 1 0 0;
	align-self: stretch;
	/* height: 100%; */
}
.card-title {
	font-size: 1.75rem;
	margin-top: 8px;
	line-height: 36px; 
	letter-spacing: -0.28px;
	margin-bottom: 32px;
}
.card-category {
	font-size: 0.75rem;
	font-weight: 700;
	margin: 0;
}
.card-blurb {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 28px; /* 155.556% */
	letter-spacing: -0.18px;
}
.card-tip {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 16px;
}

.card-tip .card-tip__text {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 16px;
	margin: 0;
}
.game__btn {
	color: #FFF;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.18px;
	margin-top: 45px;
	cursor: pointer;
	user-select: none;
}
.btn-icon {
	color: #2F2F3B;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-icon:after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M11.2858 18.6219C7.9988 18.1815 5.70478 15.1853 6.14958 11.9353C6.595 8.68525 9.64189 6.41638 12.9123 6.87411C14.0426 7.0262 15.0524 7.48379 15.8744 8.14372L13.5115 10.1578L20 11.7151L19.6917 4.94384L17.5007 6.78934C16.3364 5.75645 14.8645 5.04557 13.2037 4.82534C8.7864 4.21566 4.69417 7.27991 4.07816 11.6475C3.46154 16.0151 6.56069 20.0779 10.9946 20.6704C14.0596 21.0936 16.9529 19.7559 18.665 17.4368L17.0044 16.1672C15.7544 17.9273 13.5802 18.943 11.2857 18.6217L11.2858 18.6219Z' fill='%232F2F3B'/%3E%3C/svg%3E");
	margin-left: 4px;
	width: 24px;
	height: 25px;
	display: block;
}
.tip-icon--black svg rect{
	fill: #2F2F3B;
}
.tip-icon--blue svg rect{
	fill: #5CC0E7;
}
.tip-icon--yellow svg rect{
	fill: #FFE533;
}
.tip-icon--red svg rect{
	fill: #E3364A;
}
.card__inner--black {
	border-color: #2F2F3B;
}
.card__inner--yellow {
	border-color: #FFE533;
}
.card__inner--red {
	border-color: #E3364A;
}
.card__inner--blue {
	border-color: #5CC0E7;
}

.background-card {
	position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    top: 0;
    
}
.card-anim .background-card__1 {
	animation: bgcard1 0.3s forwards;
}
.card-anim .background-card__2 {
	animation: bgcard2 0.3s forwards;
}
.card-anim .background-card__3 {
	animation: bgcard3 0.3s forwards;
}
@keyframes bgcard1 {
    100% {
        transform: translateX(-6px) rotate(5deg);
    }
}
@keyframes bgcard2 {
    100% {
		transform: translateX(-6px) rotate(10deg);
    }
}
@keyframes bgcard3 {
    100% {
		transform: translateX(-6px) rotate(-10deg);
    }
}



.card-anim-switch .background-card__1 {
	animation: bgcard1-in-out 0.5s forwards;
}
.card-anim-switch .background-card__2 {
	animation: bgcard2-in-out 0.5s forwards;
}
.card-anim-switch .background-card__3 {
	animation: bgcard3-in-out 0.5s forwards;
}
@keyframes bgcard1-in-out {
    0% { transform: translateX(-6px) rotate(5deg); }
    50% { transform: translateX(0) rotate(0); }
    100% { transform: translateX(-6px) rotate(5deg); }
}
@keyframes bgcard2-in-out {
	0% { transform: translateX(-6px) rotate(10deg); }
	50% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(-6px) rotate(10deg); }
}
@keyframes bgcard3-in-out {
	0% { transform: translateX(-6px) rotate(-10deg); }
	50% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(-6px) rotate(-10deg); }
}

.card.flip {
	-webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
}

@media (min-width: 1201px) {
	.card-intro {
		max-width: 55.2%;
		margin: 20px auto 24px;
		aspect-ratio: 392 / 500;
		padding: 80px 40px;
		border-radius: 16px;
		border: 1px solid #C3C3D7;
		background: #FFF;
		color: #2F2F3B;
		box-shadow: 0px 10px 32px -4px rgba(24, 39, 75, 0.10), 0px 6px 14px -6px rgba(24, 39, 75, 0.12);
		box-sizing: border-box;
	}
	.card-intro__h1 {
		font-size: 22px;
		font-style: normal;
		font-weight: 700;
		line-height: 32px;
		color: #FF4D54;
		display: block;
	}
	.card-intro__h2 {
		font-size: 40px;
		line-height: 48px;
		letter-spacing: -0.4px;
		margin: 0 0 32px;
	}
	.card-intro__h3 {
		font-size: 18px;
		line-height: 28px;
		letter-spacing: -0.18px;
	}
	.cards__close {
		display: none;
	}
}

@media (max-width: 1200px) {
	.cards {
		margin-left: 12px;
		margin-right: 12px;
		padding-bottom: 0;
	}
	.card-intro {
		color: #FFF;
		padding-left: 12px;
		padding-right: 12px;
	}
	.card {
		padding: 24px;
		min-height: 500px;
	}
	.card__inner {
		padding: 16px;
		min-height: 350px;
	}
	.card-tip {
		display: flex;
		flex-direction: column;
		align-items: baseline;
	}
	.card-tip {
		flex-direction: column;
		align-items: baseline;
	}
	.card-title {
		margin-bottom: 24px;
	}
	.btn-icon {
		max-width: 460px;
		width: 100%;
		box-sizing: border-box;
	}
	.background-card {
		display: none;
	}
}

.card__help {
	margin: 0px 0 86px 0;
	color: #FFF;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
}
.game__btn {
	display: none;
}
@media (max-width: 1200px) {
	.card__help {
		display: none;
	}
	.game__btn {
		display: flex;
	}
}


@media (max-width: 1600px) {
	.categories {
		max-width: 80%;
	}
}

@media (min-width: 1201px) and (max-width: 1600px) {
	.card-intro {
		max-width: 72%;
	}
	.card {
		max-width: 62%;
	}
}

@media (max-width: 1200px) {
	.categories {
		margin-left: auto;
		margin-right: auto;
		max-width: none;
	}
	.category {
		flex-basis: 50%;
	}
}

@media (max-width: 800px) {
	.game {
		max-width: 500px;
	}
}

@media (min-width: 600px) and (max-width: 1200px) and (max-height: 600px) {
	.game {
		max-width: none;
	}
	.category {
		flex-basis: 25%;
	}
}