html * {box-sizing: border-box;}

body {
	font-family: system-ui,sans-serif;
	font-size: 100%;
	line-height: 135%;
	background-color: #ddd;
	margin: 0;
}

h1 {
	text-align: center;
}

h2 {
	text-align: center;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #333;
	overflow: hidden;
}

li {
	float: left;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;

}

li a:hover:not(.active) {
	background-color: #111;
}

.active {
	background-color: #4197fa;
}

div>p {
	background: rgba(20, 20, 20, 0.7);
}

.starting {
	background-image: url(images/background.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	color: #ffffff;
}

img {
	max-width: 100%;
}

footer {
	background-color: #333;
	text-align: center;
	color: #fff;
}

@media (min-width:600px) {
	
		div {
			display: flex;
			flex-direction: row;
			margin: calc(2vw * 1.5);
		}
		
		img {
			display: flex;
			margin: 25px;
			filter: drop-shadow(0 0 20px #0008);
		}
		
		div>p {
			display: flex;
			margin: 6.5em 0.5em;
			flex: 2 1 40%;
			font-size: 45px;
			line-height: 3rem;
			align-items: center;
			padding: 0px 5px;
		}
		
		div>p:first-child {
			flex-basis: 60%;
		}
}