style.css

/* =============== setup =============== */

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;}

/* Strip default margin/padding/font-weight */
h1,
h2,
h3,
p,
ul,
li,
button {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

/* Strip ul default styling */
ul {
	list-style: none;
}

/* Strip anchor tag default styling */
a {
	text-decoration: none;
	color: inherit;
}

/* Strip button default styling (and add pointer cursor) */
button {
	border: none;
	background: none;
	cursor: pointer;
}

/* ensure images fit inside container */
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

/* strip default address styling */
address {
	font-style: normal;
}

/* set root font size to 10px for simple rem conversion */
html {
	font-size: 62.5%;
}
/* back to 16px at default client font-size */
body {
	font-size: 1.6rem;
	overflow-x: hidden;
}

/* wrapper styles */
.wrapper {
	max-width: 1400px;
	width: 85%;
	margin: 0 auto;
}


/* =============== global styles =============== */

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Barlow', sans-serif;
}

h1 {
	font-family: 'Barlow', sans-serif;
	font-size: calc(2rem + 3.0vw);
	line-height: calc(3.2rem + 3.2vw);
	letter-spacing: calc(0.04rem + 0.04vw);
}

h2 {
	font-family: 'Offside', cursive;
	font-size: calc(1.2rem + 1.8vw);
}

h3 {
	font-family: 'Offside', cursive;
	font-size: calc(1.4rem + 1.3vw);
}

.logo {
	font-family: 'Offside', cursive;
	font-size: calc(1rem + 1vw);
	line-height: calc(1rem + 1vw);
	font-weight: normal;
}

header nav a {
	font-family: 'Barlow', sans-serif;
	font-weight: bold;
	font-size: calc(1rem + 1vw);
	line-height: calc(1.5rem + 1.4vw);
}

nav a {
	transition: 0.1s color;
}

nav a:hover,
nav a:focus {
	color: #9cd1b7;
}

p {
	font-family: 'Barlow', sans-serif;
	font-size: calc(1.2rem + 0.5vw);
	line-height: calc(1.4rem + 1.0vw);
	letter-spacing: calc(0.01rem + 0.01vw);
}

button,
.button {
	font-family: 'Offside', cursive;
	font-size: calc(1.2rem + 0.5vw);
	text-align: center;
	line-height: calc(1.5rem + 1.4vw);
	text-transform: uppercase;

	display: inline-block;
	padding: calc(0.5rem + 0.2vw) calc(1rem + 0.8vw);
	margin-top: calc(1.0rem + 1.0vw);

	transition: 0.1s color, 0.1s background-color;
}

input[type="email"] {
	font-family: 'Barlow', sans-serif;
	font-size: calc(1rem + 1vw);
}

footer nav a {
	font-family: 'Offside', cursive;
	font-size: calc(1.2rem + 1.2vw);
}

/* Skip links */
.skip-link {
	z-index: 1000;
	
	background: white;
	color: black;
	border-radius: 5px;
	opacity: 90%;

	position: absolute;
	left: -1000px;
	top: 5px;

	padding: 1rem;
	margin: 1rem;
}

.skip-link:focus {
	color: black;

	left: 0;
	top: 0;
}


/* =============== header =============== */

header {
	color: #FFFFFF;

	background-image: url(./assets/header-image.png);
	background-position: 10% 30%;
	background-size: cover;

	height: 100vh;
}

/* hide hamburger */
header input,
header label {
	display: none;
}

.logo {
	display: inline-block;
	width: calc(6rem + 6vw);
	margin: calc(1rem + 1vw);
	margin-left: 0;
}

.navbar {
	float: right;
}

.navbar li {
	float: left;
}

/* add shadow to text for readability over image */
h1,
.navbar a,
.social-icons a {
	text-shadow: 2px 2px 1px #213C28;
}

.navbar a {
	display: inline-block;
	padding: calc(1rem + 1vw) calc(0.8rem + 0.8vw);
}

/* remove right padding from last link */
.navbar li:last-of-type a {
	padding-right: 0;
}

h1 {
	width: calc(20rem + 20vw);
	margin-top: calc(1rem + 1vw);

	line-height: 1;
}

.social-icons {
	position: absolute;
	right: calc(1.5rem + 1.5vw);
	top: calc(6rem + 6vw);
}

.social-icons a {
	display: inline-block;
	padding: calc(0.15rem + 0.15vw);
}


/* =============== main =============== */

/* =============== new-friends section =============== */
.new-friends {
	background-color: #D6F1E4;

	padding: calc(2rem + 5vw) 0;
}

.new-friends h2 {
	color: #116500;

	margin-bottom: calc(0.8rem + 0.8vw);
}

.new-friends .main-header {
	text-align: center;
}

.new-friends p {
	color: #2C2D2C;
}

.new-friends .button {
	color: #FFFFFF;
	background-color: #116500;
}

.new-friends .button:hover,
.new-friends .button:focus {
	background-color: #213C28;
}

.new-friends .images {
	margin-top: calc(2rem + 3vw);
}

.new-friends .images img {
	float: left;
	width: calc(33.33% - (3rem + 3vw) / 3);
}

/* add side margins to middle image */
.new-friends .images img:nth-of-type(2) {
	margin: 0 calc(1.5rem + 1.5vw);
 }


.new-friends .content {
	padding-top: calc(4rem + 4vw);
	clear: both;
}

.new-friends .content img {
	float: left;
	width: 25%;
}

.new-friends .content .text {
	float: right;
	width: 70%;
}


/* =============== featured section =============== */
.featured {
	color: white;
	background-color: #213C28;
}

.featured h2 {
	margin-bottom: calc(0.6rem + 0.8vw);
}

.featured .button {
	color: #213C28;
	background-color: #FFFFFF;
}

.featured .button:hover,
.featured .button:focus {
	background-color: #9cd1b7;
}

.featured .text,
.featured .image {
	width: 50%;
}

/* apply negative base padding so will scale to near 0 before breakpoint */
.featured .text {
	padding: calc(-8rem + 12.5vw) calc(-2rem + 7vw) 0;
}

.featured img {
	width: 50vw;
	max-width: 50vw;
	display: block;
}

.top-row .image {
	float: right;
}

.top-row .text {
	padding-left: 0;
}

.bottom-row .image {
	float: left;
	position: relative;
	direction: rtl;
}

.bottom-row .text {
	float: right;
	padding-right: 0;
}



/* =============== lower nav =============== */

.lower-nav {
	background-color: #D6F1E4;
}

.lower-nav li {
	text-align: center;
	
	float: left;
	width: calc(100% / 3);
	padding: calc(4rem + 4vw) 0;
}

.lower-nav i {
	color: #2C2D2C;

	font-size: calc(2.6rem + 1.6vw);

	display: block;
}

.lower-nav a {
	font-family: 'Offside', cursive;
	font-weight: normal;
		font-size: calc(1.4rem + 0.8vw);

	color: #116500;
}


/* =============== footer =============== */

/* =============== contact =============== */
.contact {
	color: white;
	background-color: #213C28;

	padding: calc(2rem + 5vw) 0;
}

.contact h3 {
	margin-bottom: calc(0.6rem + 0.6vw);
}

.subscribe {
	float: left;
	width: 50%;
}

.subscribe p {
	margin-bottom: calc(0.5rem + 0.5vw);
}

.subscribe input {
	color: #2C2D2C;
	border: 1px solid #FFFFFF;
	outline: none;
	
	float: left;
	height: calc(2.5rem + 2.5vw);
	width: 65%;
	padding-left: calc(1.5rem + 1.2vw);
}

.subscribe input::placeholder {
	opacity: 80%;
}

.subscribe input:focus {
	background: #d8ece3;
}

.subscribe button {
	color: #FFFFFF;
	background-color: #2C2D2C;

	margin: 0;
	height: calc(2.5rem + 2.5vw);
	width: 35%;
}

.subscribe button:hover,
.subscribe button:focus {
	background-color: #9cd1b7;
	color: #2C2D2C;
}

.contact-info {
	float: right;
	width: 43%;
}

.contact-info div {
	float: left;
}

.contact-info nav {
	text-align: right;
	
	float: right;
}

.contact-info a {
	display: inline-block;
	padding: calc(0.25rem + 0.25vw);
}

/* allow first two lines of contact info to sit side by side */
.contact-info p:nth-child(-n+2) {
	display: inline;
}

/* =============== copyright =============== */
.copyright {
	color: white;
	background-color: #2C2D2C;

	text-align: center;

	padding: calc(0.25rem + 0.25vw) 0;
	position: relative;
}

.created {
	font-family: 'Barlow', sans-serif;
	font-size: calc(1rem + 0.5vw);

	position: absolute;
	left: calc(1rem + 1vw);
	bottom: calc(0.3rem + 0.3vw);
}

.created a {
	text-decoration: underline;
}

.created a:hover,
.created a:focus {
	opacity: 50%;
}


/* =============== media queries =============== */

/* =============== 1024px - tablet large and below =============== */
@media (max-width: 1024px) {
	.wrapper {
		width: 90%;
	}

	.contact-info p:nth-child(-n+2) {
		display: block;
	}
}


/* =============== 768px - tablet small and below =============== */
@media (max-width: 768px) {
		
	/* header */
	header {
		height: 60vh;
		background-position: 30% 0%;
	}

	/* =============== nav - dropdown =============== */

	/* show hamburger */
	header input,
	header label {
		display: inline;
	}

	/* hide checkbox */
	header input {
		position: fixed;
		right: 1rem;
		opacity: 0;
	}

	header label,
	.navbar,
	.social-icons,
	.nav-panel {
		position: fixed;

		transition: 0.5s;
	}

	header label {
		z-index: 100;
		cursor: pointer;

		font-size: 2.2rem;

		visibility: visible;

		right: 2rem;
		top: 2rem;

		transition: 0.1s color;
	}

	.x {
		display: none;
	}

	.navbar {
		z-index: 100;

		position: fixed;
	}

	.navbar,
	header input:checked ~ .navbar {
		right: calc(6rem + 4vw);
	}

	.navbar li {
		float: none;
	}

	.navbar a {
		padding: 1.2rem;
	}

	.social-icons {
		z-index: 100;

		position: fixed;
	}

	.social-icons,
	header input:checked ~ .social-icons {
		right: 2.5rem;
	}

	.nav-panel {
		z-index: 10;

		background-color: #2C2D2C;
		box-shadow: -1px 1px 5px #2C2D2CAA;
		
		top: 0;
		width: calc(12rem + 10vw);
		height: calc(20rem + 15vw);
	}

	.nav-panel,
	header input:checked ~ .nav-panel {
		right: 0;
	}

	/* hide nav to the right */
	.nav-panel,
	.navbar,
	.social-icons {
		right: -20rem;
	}

	/* toggle hamburger with x on check */
	header input:checked ~ label .hamburger {
		display: none;
	}

	header input:checked ~ label .x {
		display: inline;
	}

	header label:hover {
		color: #9cd1b7;
	}

	header input:focus ~ label {
		outline: 1px dotted #9cd1b7;
	}


	/* =============== main =============== */

	/* new-friends section */

	/* first two images 50% width */
	.new-friends .images img:nth-child(-n+2) {
		width: calc(49.99% - (0.75rem + 0.75vw));
	}

	.new-friends .images img:nth-child(2) {
		margin-right: 0;
	}

	/* last image full width */
	.new-friends .images img:last-child {
		width: 100%;
		height: 80vw;
		margin-top: calc(3rem + 2.5vw);
	}

	.new-friends .content img {
		display: none;
	}
	
	.new-friends .content .text {
		width: 100%;
	}


	/* featured section */

	.featured .text,
	.featured .image {
		width: 100%;
	}

	.featured img {
		width: 100vw;
		max-width: 100vw;
		height: 55vw;

		float: left;
		
		position: relative;
		left: -6%;
	}

	.featured .text {
		clear: both;
		padding: calc(2rem + 2vw) 0;
	}


	/* =============== footer =============== */

	.subscribe,
	.contact-info {
		float: none;
		width: 100%;
	}

	.subscribe {
		text-align: center;
	}

	.contact-info {
		margin-top: calc(1.5rem + 1.5vw);
	}

	.created {
		position: static;
	}
}



/* =============== 480px - mobile large and below =============== */
@media (max-width: 480px) {

	h2,
	.button-container {
		text-align: center;
	}

	/* header */

	header {
		height: 40vh;
	}

	h1 {
		width: calc(12rem + 14vw);
	}

	/* lower nav */

	.lower-nav {
		padding: calc(1rem + 1vw) 0;
	}

	.lower-nav li {
		float: none;
		width: 100%;
		padding: calc(1.5rem + 1.5vw) 0;
	}

	/* footer */

	.subscribe input {
		float: none;
		width: 100%;
	}

	.subscribe button {
		margin-top: 0.5rem;
		width: auto;
	}
}