body {
	background-color: whitesmoke;

	display: flex;
	align-items: center;
	flex-direction: column;

	font-size: 2vh;

	height: 100vh;

	margin: 0;
}

@media (max-height: 700px) {
	body {
		font-size: 2.5vh;
	}
}

.selection {
	margin-top: 6.5vh;
	width: 80%;
	height: 80%;

	border: solid black;
	border-radius: 4px;
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4);
}

.text {
	margin: 0;
	padding: 0.5em;
}

span.course-list {
	display: flex;
	justify-content: center;

}
div.course-list {
	background-color: #dedede;
	border-radius: 6px;

	padding: 1vh;
	margin-top: 1vh;

	width: 90%;

	display: grid;
	place-items: center;
	grid-template-columns: 1fr;
}

a.course {
	margin: 3vh;
}

button.course {
	padding: 1em;
	font-size: 1em;

	background-color: #f7e247;

	border: none;
	border-radius: 1px;

	box-shadow: 0 5px 4px rgba(0, 0, 0, 0.4);

	transition: all 0.3s ease;
}

button.course:hover {
	cursor: pointer;
	background-color: #d42323;
	
}






.fases {
	width: 95vw;
	height: 60vh;

	margin-top: 2vh;

	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 1vw;

	font-size: 0.7em;
}

.fase {
	width: calc(86vw/10);
	display: grid;
	grid-auto-rows: auto;
	gap: 20px;
	align-content: start;
}

.disciplina {
	padding: 0.5em;
	background-color: white;
	border-radius: 3px;
	box-shadow: 0 5px 1px rgba(0, 0, 0, 0.28);
}

.disciplina:hover {
	background-color: #a8a8a8;
	cursor: pointer;
}

.legendas {
	width: 50vw;
	font-size: 1.4vh;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.legenda {
	margin: 1vw;
}


.selecionado {
	color: blue;
	background-color: #55bff5;
}

.pre {
	color: green;
	background-color: #94ffa5;
}

.ind {
	color: #a6882a;
	background-color: #fff865;
}

.dir {
	color: #c94040;
	background-color: #ff9494;
}

.infos {
	text-align: center;
	font-size: 0.8em;
}

@media (max-width: 600px) {
	.fases {
		height: auto;
		grid-template-columns: repeat(1, 1fr);
	}

	.fase {
		width: 86vw;
	}

	.legendas {
		width: 100%;
	}
}