#basicInfoArea {
	display: grid;
	grid-template-columns: clamp(40px,15vw,200px) 1fr;
	grid-template-rows: auto;
	grid-row-gap: 10px;
	font-size: clamp(10px,2vw,16px);
	padding-top: 20px;
}

#basicInfoArea dt {
	font-weight: bold;
}

#mapArea {
	aspect-ratio: 16 / 9;
}

#teamColorArea {
	display: grid;
	grid-template-columns: clamp(60px,20vw,200px) 1fr 1fr;
	grid-template-rows: auto;
	grid-row-gap: 30px;
	font-size: clamp(10px,2vw,16px);
	padding-top: 20px;
    align-items: center;
}

#teamColorArea .term {
    font-weight: bold;
}

#teamColorArea .orange_rec {
    height: 100px;
    width: 100px;
    background-color: rgb(var(--orange));
}

#teamColorArea .blue_rec {
    height: 100px;
    width: 100px;
    background-color: rgb(var(--science-blue));
}