:root {
	--font-colour: rgb(218, 215, 204);
	--body-colour: rgb(36, 36, 36);
	--wrapper-colour: rgb(54, 54, 54);
	--border-colour: rgb(95, 95, 95);
	--box-colour: rgb(68, 68, 68);
}

@media all and (max-width: 500px) {
	#content {
		flex-wrap: wrap;
	}
	#wrapper-left {
		flex-grow: 1;
	}
	#container-right {
		flex-grow: 1;
	}
	p {
		font-size: 20px;
	}
}

p {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
button {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
input {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
	padding: 1vh 1vw;
	margin: 0;
	overflow: hidden;
	background-color: var(--body-colour);
	height: 100vh;
}

#head {
	height: 15%;
	padding: 1.5vh 1vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--box-colour);
	border-style: dashed;
	border-color: var(--border-colour);
}

.pvAccents {
	width: 95%;
	height: 0.5vh;
	border: 2px;
	border-style: solid;
	border-color: black;
}

#map {
	width: 100%;
	height: 80%;
	padding: 1vh 1vw;
	box-sizing: border-box;
	background-color: var(--box-colour);
	border-style: dashed;
	border-color: var(--border-colour);
}

.svgmap {
	width: 100%;
	height: 100%;
}

#content {
	display: flex;
	width: 100%;
	height: 98vh;
	gap: 1vw;
	box-sizing: border-box;
}

#wrapper-left {
	width: 50%;
	padding: 0.7vw;
	display: flex;
	flex-direction: column;
	gap: 1.5vh;
	justify-content: space-between;
	border-style: dashed;
	border-color: var(--border-colour);
	box-sizing: border-box;
	background-color: var(--wrapper-colour);
}

#wrapper-mid-right {
	width: 60%;
	padding: 0.7vw;
	display: flex;
	flex-direction: column;
	border-style: dashed;
	gap: 1.5vh;
	border-color: var(--border-colour);
	background-color: var(--wrapper-colour);
}

#mr-box-top {
	height: 50%;
	background-color: var(--box-colour);
	display: flex;
	justify-content: center;
	padding: 5% 1%;
	border-style: dashed;
	border-color: var(--border-colour);
	box-sizing: border-box;
}

#mr-box-bottom {
	height: 50%;
	background-color: var(--box-colour);
	display: flex;
	justify-content: center;
	padding: 5% 1%;
	border-style: dashed;
	border-color: var(--border-colour);
	box-sizing: border-box;
}

#wrapper-right {
	width: 40%;
	padding: 0.7vw;
	display: flex;
	flex-direction: column;
	gap: 1.5vh;
	border-style: dashed;
	border-color: var(--border-colour);
	background-color: var(--wrapper-colour);
}

#fr-box-top {
	height: 50%;
	background-color: var(--box-colour);
	display: grid;
	grid-template-columns: repeat(3, 33%);
	grid-template-rows: 15% repeat(8, 10%);
	padding: 1% 5%;
	box-sizing: border-box;
	align-items: center;
	justify-items: center;
	justify-content: space-between;
	border-style: dashed;
	border-color: var(--border-colour);
}

#fr-box-bottom {
	height: 50%;
	background-color: var(--box-colour);
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(12, auto);
	padding: 1% 5%;
	box-sizing: border-box;
	align-items: center;
	justify-items: center;
	border-style: dashed;
	border-color: var(--border-colour);
}

#pv-table {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: repeat(3, auto);
	justify-items: center;
	align-items: center;
	width: 70%;
	gap: 0.5vw;
}

#pv-table > p {
	margin: 0 0;
	font-size: 0.8vw;
	font-weight: bold;
	color: var(--font-colour);
}

.box-button {
	height: 80%;
	width: 90%;
	font-size: 0.6vw;
	background-color: rgb(88, 88, 88);
	border-style: outset;
	border-color: rgb(73, 73, 73);
	color: var(--font-colour);
	font-weight: bold;
	box-sizing: border-box;
}

.box-button:active {
	background-color: rgb(78, 78, 78);
	border-color: rgb(32, 32, 32);
}

.box-button:disabled {
	background-color: rgb(100, 26, 26);
	color: rgb(32, 9, 9);
}

#input-table {
	grid-template-rows: repeat(7, auto);
}

#input-table > p {
	width: 100%;
	text-align: center;
	font-size: 0.8vw;
	margin: 0;
	color: var(--font-colour);
}

#input-table > input {
	width: 70%;
	height: 25%;
	font-size: 0.5vw;
	background-color: rgb(88, 88, 88);
	border-color: rgb(73, 73, 73);
	border-style: outset;
	color: var(--font-colour);
	text-align: center;
}

#input-table > input:disabled {
	background-color: rgb(99, 76, 76);
}

#fr-box-top > p {
	font-size: 0.8vw;
	color: var(--font-colour);
	text-align: center;
	margin: 0 0;
}

.heading-text {
	margin: 5% 0;
	font-size: 1.5vw;
	font-weight: bold;
	color: var(--font-colour);
}

#detailed-data-table {
	grid-template-rows: repeat(8, auto);
}

#detailed-data-table > p {
	width: 100%;
	text-align: center;
	font-size: 0.8vw;
	color: var(--font-colour);
}

#fr-box-bottom > p {
	font-size: 0.8vw;
	font-weight: bold;
	color: var(--font-colour);
	margin: 0 0;
}

.mr-grids {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	justify-items: center;
	align-items: center;
	width: 95%;
	height: 100%;
}