body {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	font-size: 12pt;
}

main {
	font-size: 12pt;
}

header.safarispotter-header {
    background: transparent url(../img/logo-transparent.png) 5vw  center no-repeat;
    background-size: auto 70%;
    color: var(--secondary-brand-color);
    display: block;
    padding-left: 19vmin;
}

section, body > nav, body > address {
	margin: 0 5vmin;
	align-items: center;
	width: auto;
}

section.mockups {
	background-color: var(--secondary-brand-color);
	padding: 5vmin;
	box-sizing: border-box;
	border-radius: 1vmin;
	width: 90vw;
	max-height: 30vh;
}

section.mockups > .wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	height: 100%;
	width: 80vw;
	overflow: auto;
}

section.mockups img {
	width: auto;
	height: auto;
	max-height: 100%;
	margin: 0 5vw;
}

section.get-the-app img {
	height: 50px;
	width: auto;
}

body > nav {
	background-color: var(--secondary-brand-color);
	padding: 0 5vmin;
	box-sizing: border-box;
	border-radius: 1vmin;
	margin-top: 1em;
}

body > nav > ul, body > address > ul {
	list-style: none;
	padding: 0;
}

body > nav > ul a {
	color: white;
}

body > nav > ul {
	columns: 2;
}

body > nav > ul > li > a::before {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    margin-right: 12px;
}

body > nav > ul > li > a.home::before {
    content: '\f015';
}

body > nav > ul > li > a.privacy::before {
    content: '\f3ed';
}

body > nav > ul > li > a.attrib::before {
    content: '\e1a8';
}

body > nav > ul > li > a.support::before {
    content: '\f19d';
}

body > nav > ul > li > a.blog::before {
    content: '\f5ac';
}

body > address {
	display: flex;
	flex-direction: column;
}

body > address > ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

body > address svg {
	fill: #4b7006;
	width: 30px;
	height: 30px;
}

footer {
	opacity: 1;
	position: relative;
}

@media only screen and (min-width: 600px) {
	header.safarispotter-header > .title {
		font-size: 60px;
	}

	header.safarispotter-header > .subtitle {
		margin-top: -5px;
		font-size: 16px;
	}

	section.mockups {
		max-width: 100%;
		margin: 0;
	}

	section.mockups > .wrapper {
		width: 100%;
	}

	section.mockups img {
		margin: 0;
	}

    body > nav {
        margin: 0;
    }

	body > nav > ul {
		columns: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
}