* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* SomeClasses */
.hover { 
    cursor: pointer;
    transition: opacity 0.5s ease 0.05s; 
}
.hover:hover { opacity: 0.7; }

.head,
.food { position: relative; }

.head {
    z-index: 1;
    background: var(--headBg);
}

.tail { background: var(--tailBg); }

.food {
    z-index: 0;
    background: var(--foodBg);
    box-shadow: 0 0 30px var(--foodBg);
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

:root {
	--bodyBg: #212737;
	--textCol: #6f7889;
	--family: "Poppins", sans-serif;

	--boardBg: #181824;	
	--boxSize: 30px;
	--arrowsCol: white;

	--h1Bg: linear-gradient(45deg, #a2f107, var(--headBg));
	--h2Bg: linear-gradient(to right, yellow, red);

	--headBg: #ffffff;
	--tailBg: #e1e1e1;
	--foodBg: #ffff00f2;
}

/* Body */
body {
	width: 100%;
	height: 100%;
	background: var(--bodyBg); 
	color: var(--textCol);
	flex-direction: column;
	font-family: var(--family);
	letter-spacing: 1.5px;
	user-select: none;
}

/* Main */
main { position: relative; }

/* Section1 */
.scoreCont {
	position: absolute;
	top: 45%;
	font-family: var(--family);
	font-weight: 500;
}

.scoreCont {
	gap: 20px;
	flex-direction: column;
}

.scoreCont:nth-child(1) { left: -100px; }
.scoreCont:nth-child(1) span { transform: rotate(270deg) translateX(10px); }

.scoreCont:nth-child(2) { right: -80px; }
.scoreCont:nth-child(2) span{ transform: rotate(270deg); }

.score {
	font-weight: 900;
	font-size: 2.5rem;
}

/* Game Board */
#board {
	position: relative;
	width: clamp(450px, 120vmin, 700px);
	height: clamp(400px, 100vmin, 570px);
	display: grid;
	grid-template-rows: repeat(22, 1fr); 
	grid-template-columns: repeat(22, 1fr); 
	background: var(--boardBg);
}

/* Section3 */
#keysCont { display: none; }

/* Aside */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	flex-direction: column;
	background: black;
}

.overlay h1,
.overlay h2 {
	color: transparent; 
	background: var(--bg);
	background-clip: text; 
	-webkit-background-clip: text; 
	opacity: 0.8;
	font-size: 5rem;
}

#loadingElement h1 { --bg: var(--h1Bg); }
#overElement h2 { --bg: var(--h2Bg); }

#overElement {
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
}

#start {
	padding: 15px 20px;
	border: 0;
	border-radius: 20px;
	background: yellowgreen;
	color: black; 
	font-weight: bold;
	font-size: 1rem;
	font-family: var(--family);
	opacity: 0.8;
	gap: 7px;
}

#start:hover { opacity: 1; }

#start:focus,
#start:focus-visible {
	outline: 0;
	border: 0;
}

/* Footer */
footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	gap: 30px;
	font-weight: 900;
}

footer span { font-size: 1.7rem; }

footer a {
	text-decoration: none;
	color: var(--textCol);
	letter-spacing: 3px;
}

@media only screen and (orientation: portrait) {
	main section:nth-child(1) {
		justify-content: space-evenly;
		position: absolute;
		width: 100%;
		top: -80px;
	}
	
	main .scoreCont { position: relative; }
	main .scoreCont:nth-child(1) { left: 0; }
	main .scoreCont:nth-child(2) { right: 0; }
	
	main .scoreCont span { transform: rotate(0) translateX(0) !important; }
	main .scoreCont { flex-direction: row; width: 50%; }
	
	#board {
		width: clamp(300px, 90vmin, 500px);
		height: clamp(300px, 95vmin, 500px);
	}
	
	.overlay h1, .overlay h2 { font-size: 3.3rem; }
	
	#keysCont {
		display: flex;
		width: 100%;
		height: 100px;
		margin-top: 30px;
		gap: 35px;
		position: relative;
		transform: scale(1.2);
	}
	
	#keysCont svg {
		width: 35px;
		height: 35px;
		fill: var(--arrowsCol);
		border: 1px solid var(--arrowsCol);
		border-radius: 50%;
	}
	
	#ArrowUp,
	#ArrowDown {
		position: absolute;
		left: 45%;
	}
	
	#ArrowUp { top: 0; }
	#ArrowDown { bottom: 0; }
	
	footer { bottom: 10px; }
}