@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');
html,body{height:100%;}
body{margin:0;padding:0;font-family: 'Arial', sans-serif; background: url(img/bg.jpg) no-repeat; background-size: cover; }
*, :before, :after { margin: 0; padding: 0; box-sizing: border-box; }
#root { overflow: hidden; position: relative; width: 100%; }
	.header { width: 100%; height: 30vh; 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: 70vh; 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: 30px; }
	.header img { width: auto; max-width: 90%; }
.intro-container { height: auto; }
	.intro-container > * { width: 90%; margin-bottom: -50px; margin-top:-10px}
}
@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;
}