/* Commandes et animations */

@font-face {
  font-family: lowresPixel;
  src: url(fonts/LowresPixel-Regular.otf) format("opentype");
  font-style: normal;
}

@font-face { 
	font-family: InsightSans; 
	src: url('fonts/Insight_Sans_SSi.ttf') format("truetype"); 
	font-weight: normal;
	font-style: normal;
} 

@keyframes rotating {
	from {
		transform: rotate(0deg); 
	}
	to {
		transform: rotate(360deg);
	}
}

/* Debut du code */

body {
	display: flex;
	justify-content: center;
	background-color: #001212;
	font-family: InsightSans;
}

.stars{
	position: fixed;
	z-index: -1;
	width: 300%;
	animation: rotating 600s linear infinite;
	transform-origin: 1440 1440;
	top: -65%;
  left: -65%;
  transform: translate(-50%, -50%) rotate(0deg);
}


.container {
	display: flex;
	align-items: center;
	/* flex-direction: row; */
	justify-content: space-evenly;
	margin-top: 3em;
	margin-bottom: 3em;
	width: 70%;
}

.main-block {
	background-color: #001e51;
	color: whitesmoke;
	border: .2em solid #7d397e;
	border-radius: .4em;
	width: 65%;
}

.main-block header {
	padding: 0;
	margin: 0;
	display: block;
	font-family: lowresPixel;
	position: relative;
}

.welcome {
	position: absolute;
	top: 10%;
	left: 10%;
}

.banner {
	width: 100%;
	padding: 0em;
	margin: 0em;
	border-bottom: .15em solid #7d397e;
}

.main-block main {
	padding: 0em 1em 1em;
}