/*Feuille de style css de lost_in_space.html*/

html {
	background-color: black;
	color: white;
	font-family: "Courier";
	text-align: center;
	align-items: center;
}

#canvas {
	margin-left: 100px;
	margin-right: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

@media only screen and (max-height: 695px) and (min-width: 850px) {
	#canvas {
  		flex-direction: row;
  	}

	.row {
		flex-direction: column;
	}
}

@media only screen and (max-height: 800px) {
	#title {
		height: 0px;
		visibility: hidden;
	}
}

canvas {
      background-color: black;
      border: 2px solid purple;
      margin: 5px;
      border-radius: 5px;
    }

h1 {
	font-weight: normal;
	font-size: 300%;
	margin: 10px;
}


.menu_button {
	font-family: "Courier";
	padding: 19px;
	margin: 5px;
	color: white;
	background-color: black;
	border: 2px solid purple;
	border-radius: 5px;
	transition-duration: 0.6s;
	width: 100px;
	height: 55px;
}

.small_button {
	font-family: "arial";
	padding: 10px;
	width: 55px;
}

.menu_button:hover {
	background-color: #F6CBFF;
	color: black;
}