/* Body */
body {
    text-align: center;
}

/* Main Title */
#mainTitle {
	font-family: 'Comfortaa', light;
	font-size: 30px;
	text-align: center;
	padding: 5px 10px 10px;
}

/* Menu Design */
/* Menu container */
#menu {
	display: flex;
	align-content: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

/* Timer */
#timer {
	font-family: 'Comfortaa', light;
	font-size: 16px;
	padding: 0 8px;
	align-self: center;
}

/* Menu button (pause, restart, info, settings, keyboard) */
.menuButton  {
	margin: 0 5px;
	padding: 10px;
	border: none;
}

/* Font within menu button */
i {
	font-size: 20px;
}

/* Canvas styling */
/* Canvas Container */
#canvasContainer {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	align-content: center;
	justify-content: center;
}

/* Canvas */
canvas {
	width: 100%;
	max-width: 100%;
}

/* Arrow Key Buttons Design */
/* The arrow key buttons container */
#keyButtons {
	display: flex;
	flex-wrap: wrap;
	width: 180px;
	align-content: center;
	justify-content: center;
	align-self: center;
}

/* Arrow key button */
.keyButton {
	width: 50px;
	height: 50px;
}

/* Arrow key button text (the arrow symbol) */
.keyButton i {
	display: block;
	font-size: 30px;
}

/* Left arrow key */
#leftButton {
	order: 2;
	margin: 5px;
}

/* Up arrow key */
#upButton {
	order: 1;
	margin: 5px 65px;
}

/* Right arrow key */
#rightButton {
	order: 4;
	margin: 5px;
}

/* Down arrow key */
#downButton {
	order: 3;
	margin: 5px;
}


/* Modal box styling */
#modalBox {
	display: block;
	visibility: hidden;
	background: rgba(0,0,0,0.6);
	z-index: 1;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

/* Popup Design */
/* Popup window */
.popup {
	background: rgba(129,149,174,1.00);
	border-radius: 10px;
	box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
	width: 90%;
	margin: 10% 5%;
	max-width: 450px;
	align-self: center;
}

.popupScroll {
	height: 100%;
	overflow-y: scroll;
}

/* The winning popup */
#winPopUp {
	height: 230px;
}

/* The information popup */
#infoPopup {
	height: 80%;
	max-height: 670px;
	max-width: 600px;
}

/* Popup title */
.popup h1 {
	font-family: 'Comfortaa', light;
	font-size: 20px;
	text-align: center;
	padding-top: 5%;
}

/* Popup text */
.popup p {
	font-family: 'Comfortaa', light;
	font-size: 14px;
	text-align: center;
	white-space: pre-line;
	padding: 0 2%;
}

/* Popup button */
.popup button {
	font-family: 'Comfortaa', light;
	font-size: 14px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.2);
	background: rgba(171,190,213,1.00);
	padding: 5px;
	margin: 0 0 20px;
}

/* Popup focusabale elements focus ring */
.popup button:focus {
	outline: 0;
	box-shadow: 0 0 4px 5px rgba(46, 61, 73, 1.00);
}

/* Popup focusabale elements focus ring */
.popup input:focus {
	outline: 0;
	box-shadow: 0 0 4px 4px rgba(46, 61, 73, 1.00);
}

/* Settings Popup Design */
/* Popup window */
#settingsPopUp {
	height: 80%;
	max-height: 470px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

/* Settings Popup title */
#settingsTitle {
	width: 50%;
	padding: 5px;
	font-size: 18px;
}

/* Settings Popup level radio group */
#levelGroup {
	display: flex;
	margin-bottom: 10px;
}

/* Settings Popup level radio button and label */
.levelRadio + label {
	font-family: 'Comfortaa', light;
	font-size: 14px;
	text-align: center;
	margin: 8px 14px 0 3px;
}

/* Settings Popup level radio button (when focused) */
.levelRadio:focus {
	outline: 0;
	box-shadow: 0 0 4px 4px rgba(46, 61, 73, 1.00);
}

/* Settings Popup player radio group */
#playerGroup {
	display: flex;
	margin-bottom: 5px;
}

/* Settings Popup player radio button container */
.playerTypeLabel {
	padding: 5px 20px;
	margin: 5px;
	width: 33%;
	min-width: 40px;
	height: auto;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

/* Settings Popup player radio button (when focused) */
.playerTypeRB:focus {
	outline: 0;
	box-shadow: 0 0 4px 4px rgba(46, 61, 73, 1.00);
}

/* Settings Popup speed setting paragraph */
#speedSetting {
	font-family: 'Comfortaa', light;
	font-size: 14px;
	text-align: center;
	width: 90%;
	margin: 8px 15px;
}

/* Settings Popup speed setting text box */
#speedSetting input {
	width: 35px;
	background: rgba(171,190,213,0.30);
	font-family: 'Comfortaa', light;
	font-size: 12px;
	text-align: center;
}

/* Settings Popup buttons */
#settingsPopUp button {
	margin: 10px;
	padding: 5px;
}

/* Responsive Styling */
/* Breakpoint at 400px to adjust the menu and the canvas size (allowing more room for the arrow keys) */
@media screen and (min-width: 400px)
{
	/* Timer */
	#timer {
		font-family: 'Comfortaa', light;
		font-size: 18px;
		padding: 0 10px;
	}

	/* Menu button (pause, restart, info, settings, keyboard) */
	.menuButton  {
		margin: 0 15px;
		border: none;
	}

	/* Font within menu button */
	i {
		font-size: 20px;
	}
	
	/* Canvas styling */
	/* Canvas Container */
	#canvasContainer {
		max-width: 90%;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	/* Canvas */
	canvas {
		max-width: 100%;
		width: 100%;
	}
}

/* Breakpoint at 450px to adjust the canvas size (allowing more room for the arrow keys) */
@media screen and (min-width: 500px)
{
	/* Canvas */
	canvas {
		max-width: 90%;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.popup {
		margin-left: Calc((100% - 450px) / 2);
		margin-right: Calc((100% - 450px) / 2);
		padding: 0;
	}
	
	/* Popup title */
	.popup h1 {
		font-size: 21px;
	}

	/* Popup text */
	.popup p {
		font-size: 15px;
	}

	/* Popup button */
	.popup button {
		font-size: 15px;
	}
}

/* Breakpoint at 560px adjusting the canvas size */
@media screen and (min-width: 560px)
{
	/* Canvas Container */
	#canvasContainer {
		max-width: 100%;
		margin-left: Calc((100% - 505px) / 2);
		margin-right: Calc((100% - 505px) / 2);
	}
	
	/* Canvas */
	canvas {
		max-width: 505px;
		width: 86%;
		margin-left: 7%;
		margin-right: 7%;
	}
}

/*  */
@media screen and (min-width: 620px)
{
	canvas {
		width: 80%;
		max-width: 505px;
		margin-left: 10%;
		margin-right: 10%;
	}
	
		#infoPopup {
		margin-left: Calc((100% - 600px) / 2);
		margin-right: Calc((100% - 600px) / 2);
	}
}

/* Breakpoint at 800px adjusting the arrow keys and canvas to fit horizontally onscreen */
@media screen and (min-width: 700px)
{
	/* Canvas Container */
	#canvasContainer {
		flex-direction: row;
		margin-left: auto;
		margin-right: auto;
	}
	
	canvas {
		margin-left: 10px;
		margin-right: 10px;
	}
	
	/* The arrow key buttons container */
	#keyButtons {
		width: 180px;
		align-content: center;
		margin: 0;
	}

	/* The winning popup */
	#winPopUp {
		height: 250px;
	}

	/* Popup title */
	.popup h1 {
		font-size: 22px;
		padding-top: 8%;
	}

	/* Popup text */
	.popup p {
		font-size: 16px;
		padding: 0 3%;
	}

	/* Popup button */
	.popup button {
		font-size: 16px;
		padding: 5px;
		margin: 0 0 30px;
	}
	
	/* Settings Popup Design */
	/* Settings Popup title */
	#settingsTitle {
		padding: 10px
	}

	/* Settings Popup level radio button and label */
	.levelRadio + label {
		font-size: 16px;
		margin: 8px 14px 0 3px;
	}

	/* Settings Popup player radio group */
	#playerGroup {
		margin-bottom: 10px;
	}

	/* Settings Popup player radio button container */
	.playerTypeLabel {
		padding: 15px 30px;
		height: auto;
	}

	/* Settings Popup speed setting paragraph */
	#speedSetting {
		font-size: 16px;
	}

	/* Settings Popup buttons */
	#settingsPopUp button {
		margin: 20px;
	}
}