/*
CSS organized with SMACSS

Base
Layout
Module
State
Theme 
*/

:root {
	/* Colors */
	--black: #000000;
	--blue: #193755;
	--blue-baby: #1470af;
	--white: #ffffff;
	
	/* Fonts */
	--body: "Syne", sans-serif;
	--heading: "Trocchi", serif;
}

/* ========= 
	Base 
============ */
a,
a:visited {
	color: var(--blue-baby);
}

a:focus,
a:hover {
	color: var(--blue);
}

body {
	color: var(--black);
	font-family: var(--body);
	font-size: 1rem;
  	font-weight: 400;
}

button,
button:visited {
	background-color: var(--blue-baby);
	color: var(--white);
}
button:focus,
button:hover {
	background-color: var(--blue);
	color: var(--white);
}

@media (min-width: 768px) {
	footer {
		padding: 0 30px;
	}
}

footer h3 {
	color: var(--blue-baby);
	font-size: 2.8rem;
	margin-bottom: 30px;
}

footer .adoptaplatoon-logo {
	margin: 120px 0;
	width: 325px;
}

footer .social {
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 768px) {
	footer .social {
		justify-content: flex-start;
	}
}

footer .social-icons {
	margin-bottom: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--heading);
	font-weight: 300;
}

header {
	padding: 30px 0;
}

header .adoptaplatoon-logo {
	width: 300px;
}
@media (min-width: 768px) {
	header .adoptaplatoon-logo {
		width: 375px;
	}
}

header .social {
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 768px) {
	header .social {
		align-items: center;
		justify-content: flex-end;
	}
}

header .social-icons {
	margin-top: 15px;
}

main {
	padding: 15px 0;
}

@media (min-width: 768px) {
	main {
		padding: 15px 30px;
	}
}

/* =========== 
	Layout 
============== */
.container {
	max-width: 1320px;
}

.f-top {
	text-align: center;
}

.go-back {
	color: var(--blue-baby);
}
.go-back:hover,
.go-back:focus {
	color: var(--blue);
}

/* Begin scroll button */
#scrollButton {
	background-color: var(--blue-baby);
	color: var(--white);
}
#scrollButton:hover {
	background-color: var(--blue);
}
/* End scroll button */

.signed .stephanie-salinas-signature {
	height: auto;
	margin-bottom: 15px;
	max-width: 200px;
}

.wave-separator {
	color: var(--blue-baby);           
  	height: 6vw;                        
  	line-height: 0;
	margin: 60px 0 90px 0;
	min-height: 48px; 
}
.wave-separator svg {
  	display: block;
  	width: 100%;
  	height: 100%;
}

/* ========== 
	Module 
============= */
.btn,
.btn:visited {
	background-color: var(--blue-baby);
	color: var(--white);
}
.btn:focus,
.btn:hover {
	background-color: var(--blue);
	color: var(--white);
}

.legal {
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 768px) {
	.legal {
		justify-content: right;
	}
}

.social-icons {
	color: var(--black);
	margin: 0;
	padding: 0;
}
.social-icons a,
.social-icons a:visited {
	color: var(--black);
}
.social-icons a:focus,
.social-icons a:hover {
	color: var(--black);
}
.social-icons li {
	display: inline-block;
	list-style: none;
	margin: 0 5px;
}