body, .flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
}

h1 {
	font-weight: 900;
	font-size: 6vmin;
	color: #ffffff;
}

h2 {
	font-weight: 400;
	font-size: 3vmin;
	color: #ffffff;
  margin-top: 1.6em;
}

h4 {
  font-weight: 200;
  font-size: 2vmin;
  color: #ffffff;
}

h3 {
	font-weight: 800;
	font-size: 1.4vmin;
}

a {
	text-decoration: none;
	color: #0f4c75;
}

#left {
	background-color: #0f4c75;
}

#right {
	background-color: #3282b8;
}

#logo {
	width: 40vmin;
	height: 40vmin;
}

.box {
	width: 50%;
	height: 100vh;
	padding: 6vw;
}



footer {
  width: 100%;
  z-index: 1;
  position: relative;
  padding: 2vmin;
  padding-left: calc(2.9em + env(safe-area-inset-left));
  padding-right: calc(2.9em + env(safe-area-inset-right));
  font-size: 1vmin;
  background-color: #eeeeee;
 }

footer #footer-top-blocks {
    display: flex;
    flex-wrap: wrap; 
}

footer .footer-section {
    margin-right: 1.4em;
    margin-bottom: 1.6em;
    width: 18em;
}

footer .footer-section p {
	font-size: 1.4vmin;
}

footer .footer-section:not(:last-child) {
    border-right: 1px solid black;
}

@media screen and (max-width: 700px) {
  .box {
    width: 100%;
    max-height: 50vmax;
}