_game.scss

@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

div.gameContainer {
	display: flex;
	border: 5px solid #c1950e;
	border-radius: 20px;
	padding: 5% 3%;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100vh;
	width: 100vw;
	max-width: 56vh;
	max-height: 177vw;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url("../../photo/containerBg.jpg");
	background-size: cover;
	color: #dcdcdc;
}

.gameContainer h1 {
	background-image: linear-gradient(#c1950e, red);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 5vh;
	margin-bottom: 2%;
}

.titleWrapper {
	width: 100%;
	height: 90%;
}

.menu {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
#p1,
#p2 {
	height: 100%;
	width: 100%;
	align-self: center;
}

.imageContainer {
	height: 100%;
}

.p1Info,
.p2Info {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: 45%;
	height: 100%;
}

#p1Name,
#p2Name {
	background-image: linear-gradient(to right, #733fa1, #e5adff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 3vh;
	padding: 5px 0;
}

#p1Health,
#p2Health {
	font-size: 5vh;
	margin: 5% 0;
}

.playerControls {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	height: 20%;
	align-items: center;
}

.attackDiv {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: 100%;
	margin: 5% 0 2% 0;
	font-size: 2vh;
}

.attackDiv button,
.healDiv button {
	font-size: 1.5vh;
}

.healDiv {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100%;
	width: 100%;
	margin: 2% 0 5% 0;
	font-size: 2vh;
}

#attack {
	height: 80%;
	width: 35%;
	border-radius: 10px;
	padding: 3% 0;
	border: none;
	background: #1f9c6d;
	color: #dcdcdc;
	border: 2px solid #dcdcdc;
	outline: none;
	font-family: "Fira-sans", sans-serif;
	font-weight: 700;
}

#heal {
	height: 80%;
	width: 35%;
	border-radius: 10px;
	padding: 3% 0;
	border: none;
	background: #175f7a;
	color: #dcdcdc;
	border: 2px solid #dcdcdc;
	outline: none;
	font-family: "Fira-sans", sans-serif;
	font-weight: 700;
}

#attack:active {
	background: #dcdcdc;
	color: black;
	border: 2px solid #1f9c6d;
}

#heal:active {
	background: #dcdcdc;
	color: black;
	border: 2px solid #175f7a;
}

#result {
	font-size: 4vh;
	color: #3dff3d;
	height: 15%;
	margin-bottom: 3%;
}

#vs {
	background-image: linear-gradient(#c1950e, red);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 4vh;
	align-self: center;
}

#reset,
#back,
#play {
	font-family: "Fira-sans", sans-serif;
	font-weight: 700;
	height: 20%;
	width: 45%;
	border-radius: 10px;
	background: #555a56;
	outline: none;
	color: #dcdcdc;
	font-size: 2vh;
	border: 2px solid #dcdcdc;
	transition: 0.4s;
}

#back {
	background: #3e4943;
}

#play {
	background: #5e785d;
}

#play:hover {
	background: #dcdcdc;
	color: black;
	border: 2px solid #5e785d;
	box-shadow: inset -1px -1px 10px 0px rgba(94, 120, 93, 1);
}

#back:hover {
	background: #dcdcdc;
	color: black;
	border: 2px solid #3e4943;
	box-shadow: inset -1px -1px 10px 0px rgba(62, 73, 67, 1);
}

#reset:hover {
	background: #dcdcdc;
	color: black;
	border: 2px solid #555a56;
	box-shadow: inset -1px -1px 10px 0px rgba(85, 90, 86, 1);
}

.resultContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	height: 35%;
	width: 90%;
}

#gameContainer.active {
	h1,
	#p1Health,
	#p2Health {
		font-size: 8.88vw; //5 vh
	}
	#vs,
	#result {
		font-size: 7.08vw; //4vh
	}
	#p1Name,
	#p2Name {
		font-size: 5.31vw; //3vh
	}
	.attackDiv,
	.healDiv,
	#reset,
	#back,
	#play,
	#attack,
	#heal {
		font-size: 3.54vw; //2vh
	}
}