body {
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  background-image: url(background.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

#main-wrap {
	display: flex;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
}

#game-container {
	position: relative;
	max-width: 420px;
	width: 96%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px;
	background: rgba(0,0,0,0.5);
}

#game-container h1 {
	margin: 0 0 20px 0;
	text-align: center;
	font-weight: 400;
	font-size: 50px;
	color: #fff;
}

#game-container .modes-wrap {
	display: flex;
	justify-content: space-between;
	margin: 0 0 10px 0;
}

#game-container .modes-wrap label {
	display: block;
	width: 50px;
	text-align: center;
	color: #fff;
    font-size: 40px;
	line-height: 34px;
	border: 1px solid #fcfeff;
	cursor: pointer;
	background: rgba(0,0,0,0.5);
	clip-path: polygon(3% 10%, 100% 0, 96% 100%, 0 93%);
}

#game-container .modes-wrap input[type="radio"] {
	display: none;
}

#game-container .modes-wrap input[type="radio"]:checked+label {
	color: #34d0f2;
	background: #fcfeff;
}

#game-container .leaderboard-button-wrap {
	margin: 0 0 10px 0;
}

#leaderboard-button {
	padding: 5px 10px;
	border: none;
	background-color: #0055fe;
	color: #ccffff;
	cursor: pointer;
	width: 100px;
}

#game-params-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 10px 0;
}

#game-params-wrap .new-game,
#game-params-wrap .start-game {
	padding: 5px 10px;
	border: none;
	background-color: #f7ff19;
	cursor: pointer;
	width: 100px;
}

#timer,
#game-params-wrap #score {
	min-width: 90px;
	color: #34d0f2;
	font-size: 20px;
}

#time-remaining,
#score .score-value {
	color: #fff;
}

#level-wrap {
	margin: 0 0 10px;
}

#level{
	color: #34d0f2;
	font-size: 20px;
}

#current-level {
	color: #fff;
}

#level-progress-bar {
	height: 10px;
	background: rgba(0,0,0,0.5);
}

#level-progress-bar span {
	display: block;
	width: 0;
	height: 10px;
	background: rgb(86,47,255);
	background: linear-gradient(176deg, rgba(86,47,255,1) 0%, rgba(255,255,255,1) 100%);
	transition: width 0.5s;
}

#problem-wrap {
	margin: 0 0 10px;
	padding: 5px;
	font-size: 38px;
	background: rgb(225, 221, 232, 0.9);
	box-shadow: 0 0 10px 0 #8568ff;
	font-weight: 700;
    font-family: sans-serif;
}

#problem {
	color: #457d8e;
}

#number-pad {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 10px 0;
}

#number-pad button {
	margin: 1%;
	padding: 10px;
	width: 31.333%;
	font-size: 40px;
	border: 3px solid #007fff;
	cursor: pointer;
}

#number-pad button.number {
	background: #0055fe;
	color:#ccffff;
	font-weight: 700;
    font-family: sans-serif;
}

#number-pad button#clear,
#number-pad button#remove {
	background: #ccffff;
	color:#0055fe
}

#check-answer {
	width: 100%;
	padding: 16px 10px;
	border: none;
	background-color: #f7ff19;
	cursor: pointer;
	font-size: 40px;
}

#leaderboard {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(77deg, rgba(9,132,211,1) 0%, rgba(16,68,168,1) 100%);
}

#leaderboard h2 {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	font-weight: 400;
	font-size: 50px;
	color: #000;
	background: #fff;
}

#leaderboard .content {
	padding: 10px;
}

#leaderboard .content table {
	width: 100%;
}

#leaderboard .content table th {
	padding: 10px;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
}

#leaderboard .content table td {
	padding: 10px;
	color: #ccffff;
	border: none;
	font-size: 16px;
	text-align: center;
}

#leaderboard .bottom-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#hide-leaderboard {
	padding: 12px 10px;
	width: 100%;
	font-size: 30px;
	border: none;
	background-color: #f7ff19;
	cursor: pointer;
}

#game-over {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(77deg, rgba(9,132,211,1) 0%, rgba(16,68,168,1) 100%);
	overflow: hidden;
}

#game-over h2 {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	font-weight: 400;
	font-size: 50px;
	color: #000;
	background: #fff;
}

#game-over img {
	width: 100%;
}

#game-over .bottom-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#final-score {
	padding: 10px;
	font-size: 30px;
	color: #fff;
}

#game-over .leaderboard-form {
	display: block;
}

#game-over .leaderboard-form input {
	padding: 5px 20px;
	box-sizing: border-box;
	width: 100%;
	font-size: 26px;
	background: rgba(255,255,255,0.8);
	outline: none;
	border: none;
}

#game-over .leaderboard-form button {
	padding: 12px 10px;
	width: 100%;
	font-size: 30px;
	border: none;
	background-color: #f7ff19;
	cursor: pointer;
}

#game-over .new-game {	
	padding: 12px 10px;
	width: 100%;
	font-size: 30px;
	border: none;
	background-color: #f7ff19;
	cursor: pointer;
}

#incorrect-answer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.2);
	display: flex;
	justify-content: center;
	align-items: center;
}

#incorrect-answer .content {
	background: rgb(225, 221, 232, 0.9);
    box-shadow: 0 0 10px 0 #8568ff; 
	width: 340px;
	max-width: 100%;
}

#incorrect-answer .content h2 {
	margin: 0;
	padding: 10px;
	font-size: 36px;
	background: #fff;
	text-align: center;
	color: #000;
}

#incorrect-answer .content .expression-wrap {
	padding: 10px 10px 30px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
	font-size: 26px;
}

#incorrect-answer .content .correct-answer {
	color: #6ec759;
}

#incorrect-answer .content .player-answer {
	color: red;
	text-decoration: line-through;
}