/* normalizes behaviour between browsers*/
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}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}

/* Reset CSS*/
*,::after,::before{box-sizing:border-box}a,button{cursor:revert}menu,ol{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}

/* Margin and padding */
.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-5{margin-left:1.25rem}.ml-6{margin-left:1.5rem}.ml-7{margin-left:1.75rem}.ml-8{margin-left:2rem}.ml-9{margin-left:2.25rem}.ml-10{margin-left:2.5rem}.ml-11{margin-left:2.75rem}.ml-12{margin-left:3rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mr-5{margin-right:1.25rem}.mr-6{margin-right:1.5rem}.mr-7{margin-right:1.75rem}.mr-8{margin-right:2rem}.mr-9{margin-right:2.25rem}.mr-10{margin-right:2.5rem}.mr-11{margin-right:2.75rem}.mr-12{margin-right:3rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.mt-10{margin-top:2.5rem}.mt-11{margin-top:2.75rem}.mt-12{margin-top:3rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.mb-9{margin-bottom:2.25rem}.mb-10{margin-bottom:2.5rem}.mb-11{margin-bottom:2.75rem}.mb-12{margin-bottom:3rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pl-7{padding-left:1.75rem}.pl-8{padding-left:2rem}.pl-9{padding-left:2.25rem}.pl-10{padding-left:2.5rem}.pl-11{padding-left:2.75rem}.pl-12{padding-left:3rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-5{padding-right:1.25rem}.pr-6{padding-right:1.5rem}.pr-7{padding-right:1.75rem}.pr-8{padding-right:2rem}.pr-9{padding-right:2.25rem}.pr-10{padding-right:2.5rem}.pr-11{padding-right:2.75rem}.pr-12{padding-right:3rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-7{padding-top:1.75rem}.pt-8{padding-top:2rem}.pt-9{padding-top:2.25rem}.pt-10{padding-top:2.5rem}.pt-11{padding-top:2.75rem}.pt-12{padding-top:3rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-7{padding-bottom:1.75rem}.pb-8{padding-bottom:2rem}.pb-9{padding-bottom:2.25rem}.pb-10{padding-bottom:2.5rem}.pb-11{padding-bottom:2.75rem}.pb-12{padding-bottom:3rem}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* GENERAL BEHAVIOUR */
:root{	
	scroll-behavior:smooth;
}
/* COLORS */
:root {	
	--color-primary: #2858a7;
	--color-primary-light: #d2e3fc;
	--color-primary-dark: #2563eb;
	
	--color-primary-gradient-1: #308dd6;
	--color-primary-gradient-2: #5057b2;

	--color-secondary: #facc15;
	--color-success: #22c55e;
	--color-green: #10b981;
	--color-failure: #e56868;
	--color-failure-bright: #ef4444;
	--color-bg-main: #072136;
	--color-bg-dark: #292c38;

	--color-line: #e5e7eb;

	--color-text: #374151;
	--color-text-light: #f7f7f7;
	--color-text-disabled: #4f4f4f;
}
.color-success{
	color: var(--color-success);
}
.new-highscore-text{
	color: var(--color-success);
	font-weight: bold;
	font-size: 1.2rem;
}

/* Other variables */
:root{	
	--border-radius: 8px;
	--box-shadow: 1px 2px 2px #93c5fd55, 2px 4px 4px #93c5fd55, 3px 6px 6px #93c5fd55;
	--box-shadow-dark: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	--box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
	--height-header: 55px;
}

/* GENERAL */
body,html{
	font-family: "Mulish", sans-serif;
	letter-spacing: 0.7px;
	max-width:100%;
	min-height:100vh;
	overflow-x:hidden;
	margin:0;
	padding:0;
	color: var(--color-text-light);
	background: var(--color-bg-main);
}
html{
	overflow-x: initial;
}
a{
	text-decoration: none;
	color: var(--color-text);
}

/* TEXT AND FONTS */
h1, h2, h3, h4{
	margin: 0;
}
h1{
	font-size: clamp(1.85rem, 5vw, 3.75rem);
	font-weight: 700;   
	line-height: 1.1em;
	letter-spacing: 0.5px;
}
.h1-svg svg{
	width: clamp(2rem, 7vw, 3.75rem);
	height: clamp(2rem, 7vw, 3.75rem);
}
h2{
	font-size: clamp(1.7rem, 4vw, 3rem);
	font-weight: 700;   
	line-height: 1.1em;
	letter-spacing: 1px;
}
h3{
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
}
h4{
	font-size: 1.3rem;
	line-height: 1.7rem;
	font-weight: 700;
	letter-spacing: 1px;    
}

.subtitle-text {
	line-height: 1.5rem;
	max-width: 900px;
}

/* GENERAL PAGE */
.page-content-wrapper{
	background-color: var(--color-bg-main);
	width: 100vw;
	padding-top: var(--height-header);
	min-height: 100vh;
}
.page-wrapper{
	width: 1300px;
	max-width: 95vw;
	margin: auto;
	padding: 1rem 0;
}

/* GENERAL OTHER THINGS */
.own-link{text-decoration:none;color: var(--color-primary);font-weight:700;cursor:pointer}
.no-decoration{text-decoration: none;color: inherit;}
.primary-color{color: var(--color-primary);}
.primary-color-light{color: var(--color-primary-light);}
.bold{font-weight: bold;}
.text-center{text-align: center;}
.text-bold{font-weight: bold;}

/* Input fields */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance:textfield;
}

/* BUTTONS */
.button{
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 0.875rem;
	transition: all 0.2s ease-in-out;
	text-align: center;
}
.button-primary{
	background: linear-gradient(var(--color-primary-gradient-1), var(--color-primary-gradient-2));
	color: var(--color-text-light);
	transition: all 0.1s ease-in-out;
}
.button-primary:hover{
	transform: scale(1.1);
}
.button-secondary{
    border: 2px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
    color: var(--color-text-light);
    background-color: var(--color-bg-main);
}
.button-secondary:hover{
	transform: scale(1.1);
}
.button-tertiary{
	border: 1px solid var(--color-text);
    transition: all 0.2s ease-in-out;
    color: var(--color-text);
}
.button-tertiary:hover{
	transform: scale(1.1);
}

/* Popup */
.popup-wrapper{
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #3939398a;
	display: none;
	justify-content: center;
	align-items: center;
}
.popup-window{
	position: relative;
	background-color: #fff;
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
	color: var(--color-text);
	padding: 1.5rem;
	width: 350px;
	max-width: 95vw;
	height: fit-content;
	max-height: 90vh;
	margin-top: 5vh;
}
.close-popup{
	position: absolute;
	top: -10px;
	right: -10px;
	border-radius: 50%;
	color: #fff;
	background-color: var(--color-failure);
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.close-popup:hover{
	transform: scale(1.05);
	background-color: var(--color-failure-bright)
}
.cancel-popup-text{
	text-align: center;
	font-size: 0.9rem;
	margin-top: 1rem;
	cursor: pointer;
}
.popup-title-text{
	text-align: center;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: bold;
}
.popup-explanation-text{
	font-size: 0.9rem;
	margin-bottom: 1rem;
}
.pick-level-wrapper{
	display: flex;
	gap: 0.5rem;
}
.pick-level-item{
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-line);
	border-radius: var(--border-radius);
	padding: 0.5rem;
	cursor: pointer;
}
.pick-level-item:hover{
	background-color: var(--color-primary-light);
}
.popup-highscore-wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.how-to-play-popup{
	width: 800px;
}
.home-link{
	text-align: center;
	font-size: 0.8rem;
	margin-top: 0.75rem;
	margin-bottom: -0.5rem;
	color: var(--color-primary);
	cursor: pointer;
}


/* Home page */
.game-cards-wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem;
}

.game-card-wrapper {
	position: relative;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow-dark);
	width: 275px;
	height: 350px;
	overflow: visible;
	background-color: var(--color-bg-dark);
	color: var(--color-text-light);
	margin: 1rem 0;
	transition: all 0.1s ease-in-out;
}

.game-card-wrapper:hover {
	box-shadow: var(--box-shadow);
	transform: scale(1.05);
}

.game-card-image {
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	width: 100%;
	height: 50%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.game-card-text-wrapper {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	gap: 0.5rem;
	height: 50%;
	position: relative;
}

.game-card-top-bar {
    width: 100%;
    border-bottom: 1px solid var(--color-text-disabled);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-card-title {
	font-weight: bold;
}
.game-card-description{
	font-size: 0.9rem;
}

.game-card-plays {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	font-size: 0.9rem;
}

.game-card-plays-icon {
	width: 1rem;
	height: 1rem;
	fill: var(--color-green);
}
.game-card-buttons-wrapper{
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
}
.game-card-button{
	padding: 0.4rem 0;
	width: 80px;
}

@media (max-width: 1200px) {
	.game-cards-wrapper {
		gap: 1rem;
		justify-content: space-evenly;
	}

}

@media (max-width: 768px) {
	.game-cards-wrapper {
		gap: 1rem;
		justify-content: space-evenly;
	}
}

@media (max-width: 480px) {
	.game-cards-wrapper {
		gap: 0.5rem;
		justify-content: center;
	}
}

.hero-section {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5rem;
	padding: 2rem 0;
	margin-bottom: 2rem;
}

.hero-content {
	max-width: 50%;
}

.hero-title {
	margin-bottom: 1.5rem;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	margin-top: 1.5rem;
}
.button-hero{
	padding: 0.625rem 1rem;
	width: 175px;
	font-size: 1rem;
	font-weight: bold;
}

.hero-image {
    position: relative;
    max-width: 50%;
}

.hero-image img {
    width: 300px;
    height: auto;
    border-radius: var(--border-radius);
    position: relative;
    z-index: 2;
}
.hero-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 150%;
    background: radial-gradient(circle, rgb(86 215 255 / 40%) 0%, rgb(99 220 255 / 20%) 50%, rgb(198 250 255 / 0%) 100%);
    border-radius: 50%;
    filter: blur(50px);
}

@media (max-width: 768px) {
	.hero-section {
		flex-direction: column;
		text-align: center;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-buttons {
		align-items: center;
		flex-direction: column;
	}

	.hero-image {
		display: none;
	}
}