@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');
body{margin:0;padding:0;height:100%;font-family: 'Arial', sans-serif;}
*, :before, :after { margin: 0; padding: 0; box-sizing: border-box; }
#root { overflow: hidden; position: relative; width: 100%; }
	.header { width: 100%; height: 40vh; padding-top: 10vh; text-align: center; font-size: 40px; line-height: 20vh; color: white; font-weight: bold; }
		.header img { width: 50%; }
	.intro-container { width: 100vw; height: 60vh; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
		.intro-container > * { width: 50%; padding: 0 30px; }
			.intro-container img { width: 100%; height: auto; transition: 0.5s; }
			.intro-container img:hover{ transform: scale(1.1); }
@media screen and (max-width: 1000px){
.header { width: 100%; height: 300px; padding-top: 40px; }
	.header img { width: auto; max-width: 90%; }
.intro-container { height: auto; }
	.intro-container > * { width: 100%; margin-bottom: 30px; }
}
@media screen and (max-width: 504px){
.intro-container > * { padding: 0 20px; }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #0093d3;
  color: white;
  text-align: center;
  font-family: sans-serif;
}