/* Color Palette #EAF6F6#f1f7f8#40514E#D5EEFF#78BBE6#2E719E#1B435D#FF9670*/

/* || GENERAL STYLES */
/* Alternate Box Model */

html {
	font-size: 100%;
	box-sizing: border-box;
}

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

body{
	width: 100%;
	margin: 0;
	background-color:#b3e0ff;
	text-align: center;
}

img{
	border:0;
	max-width: 100%;
}

p{
	line-height: 2rem;
} 

/* TYPOGRAPHY */

body{
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-weight: 300;
}

h1 {
	font-family: "Playfair Display", 'Times New Roman', Times, serif;
	color: white;
	font-weight: 600;
	font-size: 4rem;
}

h2, h3, h4, h5, h6{
	font-family: "Playfair Display", "Times New Roman", serif;
	font-weight: 400;
	font-size: 2.5rem;
}

/* || UTILITIES */

/* For the main/hero image on a webpage */
.main_img{
	max-height: 60vh;
}

/* Will highlight the current page on the navbar*/
.current_page{
	background: #346C82;
}

/* For lists without bullets */

.no_list{
	list-style: none;
	margin:0;
	padding: 0;
}

/* || SITEWIDE */

/* HEADING AND NAVIGATION */

header{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: stretch;
	background: #254C5C;
	margin: 0;
	padding: 0;
}

header a, nav{
	width: 100%;
	text-decoration: none;
}

h1{
	margin: 0;
}

nav ul{
	display: flex;
	flex-flow: column;
	list-style-type: none;
	width: 100%;
}

nav ul li{
	display: flex;
	width: 100%;
}

nav ul li a{
	font-size: 1.5rem;
	color: white;
	width: 100%;
	padding: 10px 20px;
	border-top: 1px solid white;
}

nav ul li a:hover{
	background: #346C82;
}

/* Element Styles */

section{
	line-height: 1.5rem;
	margin: 3rem initial;
}

h2 {
	background-color: #254C5C;
	color: white;
	padding: 1.5rem 0;
}

.hero {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
	margin-top: 2rem;
}

article.link_box{
	display: flex;
	flex-flow: column;
	background: #FFD2B3;
	border: 5px inset #939290;
	border-radius: 20px;
	padding: 1rem 1rem;
	margin: 2rem;
	text-align: center;
}

.hero > a{
	width: 45%;
}

article.link_box a{
	margin-bottom: 1rem;
	color: blue;
	text-decoration: none;
}

article.link_box a:hover{
	color: white;
	text-decoration: underline;
}

article.link_box a:last-child{
	margin: 0;
}

/* || PAGE SPECIFIC */

/* INDEX PAGE */

.content img {
	display: block;
	margin: auto;
	max-height: 50vh;
	max-width: 75vw;
	
}

.content p {
	max-width: 90%;
	text-align: initial;
	margin: 1rem auto;
}

/* ROADMAP PAGE */

.roadmap_page{
	text-align: left;
	max-width: 85%;
	margin: 30px auto;
	line-height: 2.5rem;
}

.roadmap_page .list_headers{
	font-size: 1.5rem;
}

.roadmap_page ul {
	text-align: left;
}

.roadmap_page li{
	color: black;
}

.roadmap_page > ol > li li{
	font-size: 1rem;
}

.roadmap_page a, .roadmap_page a:visited{
	text-decoration: none;
	color: blue;
}

.roadmap_page a:hover{
	text-decoration: underline;
}

.roadmap_page .link_box{
	margin: 0;
	padding: 0;
}

.roadmap_page .link_box div{
	max-width: 100%;
	margin: 20px;
}

.roadmap_page .link_box div:nth-of-type(1){
	display: flex;
	flex-flow: column;
}

.roadmap_page .link_box div:nth-of-type(2){
	display: none;
}

.roadmap_page .link_box h3{
	font-size: 2em;
	border-top: 2px dashed black;
	border-bottom: 2px dashed black;
	padding: 20px 0;
	margin: 30px auto;
	max-width: 100%;
	width: 400px;
}



.roadmap_page iframe{
	max-width: 100%;
	align-self: center;
}

.roadmap_page .link_box ol{
	text-align: left;
}

.roadmap_page .link_box ul{
	list-style: inside;
}

@media screen and (min-width: 600px){
	.roadmap_page .link_box{
		/* margin: 2rem; */
	}
}

@media screen and (min-width:800px){

	.roadmap_page .link_box{
		flex-flow: row;
		justify-content: center;
		background: none;
		border: none;
	}
	.roadmap_page > ol{
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 40px;
	}

	.roadmap_page .link_box div{
		display: flex;
		flex-flow: column;
		background: #FFD2B3;
		border: 5px inset #939290;
		border-radius: 20px;
		padding: 1rem 1rem;
		margin: 2rem;
		text-align: center;
		max-width: 50%;
	} 

	.roadmap_page .link_box div:nth-of-type(1){
		height: 50%;
	}

	.roadmap_page .link_box div:nth-of-type(2){
		display: flex;
	}

	.roadmap_page .link_box h3{
		width: 400px;
	}
}

/* DOG PAGE */

.dog_page hr{
	height: 30px;
	background: #254C5C;
}

.dog_page ul{
	line-height: 2rem;
}

.dog_page figure{
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	align-items: center;
}

.dog_page figcaption{
	font-size: 2rem;
	line-height: 2rem;
	padding: 20px;
}

.dog_page img{
	max-height: 70vh;
	max-width: 70vw;
}
@media screen and (min-width: 600px){

	header{
		flex-flow: row;
		align-items: stretch;
	}

	header a:first-child{
		display: flex;
	}
	h1{
		padding: 10px 0 10px 10px;
	}

	nav{
		display: flex;
	}

	nav ul{
		flex-direction: row;
	}

	nav ul li a{
		display: flex;
		padding: 0 10px;
		align-self: stretch;
		align-items: center;
		font-size: 1rem;
		justify-content: center;
		border: none;
	}


	h2 {
		font-size: 3rem;
	}

	.content {
		margin: 5vw;
		display: flex;
		flex-flow: column;
	}

	.content p {
		max-width:95%;
		font-size: 1.25em;
	}

	
	.dog_page figure{
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: space-around;
	}

	.dog_page figcaption{
		font-size: 2.5rem;
		line-height: 3rem;
	}
	
}
@media screen and (min-width: 800px){

	.item {
		width:100%
	}

	.flex_row{
		display: flex;
		flex-direction: row;
	}
}