/* Fonts */

/* latin */
@font-face {
  font-family: 'Cedarville Cursive';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cedarville Cursive'), local('Cedarville-Cursive'), url(https://fonts.gstatic.com/s/cedarvillecursive/v11/yYL00g_a2veiudhUmxjo5VKkoqA-B_nuIrpw4cNOTw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
	
	font-size: 20px;
	background-color: rgba(242, 238, 235, 95);
	
}

header {
	border-bottom: 2px dotted rgba(242, 209, 201, 95);
	margin: 20px auto;
	text-align: center;	

}

#banner {
	background-image: url("img/blackbirdflock.png");
  	background-size: contain;
  	background-position: bottom center;
  	background-repeat: no-repeat;
  	width: 1000px;
  	height: 250px;
 }

h1 {
	font-family: "cedarville cursive", "times new roman", serif;
	font-size: 45px;
}

h3 {
	font-family: "times new roman", serif;
}

span {
	font-family: "times new roman", serif;
	font-size: 20px;
}

nav {
	width: 100px;
	height: 850px;
	position: fixed;
	letter-spacing: 2px;
}

.navagation ul {

	margin: 0;
	padding: 0;
	text-align: right;
	letter-spacing: 2px;
	font-size: 18px;
	list-style-type: none;
}

.navagation li {
	padding: 20px;
	font-family: "times new roman", serif;

}

#wrapper {
	width: 1000px; 
	height:2000px;
	margin: 20px auto; 
	text-align: center;
	background: rgba(242, 238, 235, 95);
	background-size: cover;
	

}

section {
	border-bottom: 3px solid rgba(242, 136, 136, 95);
}

.stanza {
	font-family: "times new roman", serif;
	font-size: 16px;
	
}

.grid {
	display: grid;
	width: 1000px;
	height: 5500px;
	grid-template: repeat(13, 1fr) / repeat(2, 1fr); 
	grid-column-gap: 20px;
}

.a {
	grid-row: 1 / 2;
	text-align: right;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
	position: relative;
	left:250px;
	
}

.b {
	grid-row: 2 / 3;
	grid-column-start: 2;
	grid-column-end: 2;
	text-align: left;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
}

.c {
	grid-row: 3 / 4;
	text-align: right;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
	position: relative;
	left:250px;
}

.d {
	grid-row: 4 / 5;
	grid-column-start: 2;
	grid-column-end: 2;
	text-align: left;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;

}

.e {
	grid-row: 5 / 6;
	text-align: right;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
	position: relative;
	left:250px;
}

.f {
	grid-row: 6 / 7;
	grid-column-start: 2;
	grid-column-end: 2;
	text-align: left;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;

}

.g {
	grid-row: 7 / 8;
	text-align: right;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
	position: relative;
	left:250px;
}


.h {
	grid-row: 8 / 9;
	grid-column-start: 2;
	grid-column-end: 2;
	text-align: left;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;

}

.i {
	grid-row: 9 / 10;
	text-align: right;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
	position: relative;
	left:250px;
}

.j {
	grid-row: 10 / 11;
	grid-column-start: 2;
	grid-column-end: 2;
	text-align: left;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;

}

.k {
	grid-row: 11 / 12;
	text-align: right;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
	position: relative;
	left: 250px;
	
}

.l {
	grid-row: 12 / 13;
	grid-column-start: 2;
	grid-column-end: 2;
	text-align: left;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;

}

.m {
	grid-row: 13 / 14;
	text-align: right;
	letter-spacing: 2px;
	line-height: 40px;
	width: 250px;
	height: 400px;
	position: relative;
	left:250px;
}

.one {
	grid-row: 5 / 6;
	grid-column-start: 2;
	grid-column-end: 2;
	width: 250px;
	height: 400px;
}

.two {
	grid-row: 6 / 7;
	grid-column-start: 1;
	grid-column-end: 1;
	width: 250px;
	height: 400px;
	position: relative;
	left: 250px;
}

.three {
	grid-row: 3 / 4;
	grid-column-start: 2;
	grid-column-end: 2;
	width: 250px;
	height: 400px;
}

.four {
	grid-row: 2 / 3;
	grid-column-start: 1;
	grid-column-end: 1;
	width: 250px;
	height: 400px;
	position: relative;
	left: 250px;
}

.five {
	grid-row: 7 / 8;
	grid-column-start: 2;
	grid-column-end: 2;
	width: 250px;
	height: 400px;
}

.six {
	grid-row: 10 / 11;
	grid-column-start: 1;
	grid-column-end: 1;
	width: 250px;
	height: 400px;
	position: relative;
	left: 250px;

}

.seven {
	grid-row: 11 / 12;
	grid-column-start: 2;
	grid-column-end: 2;
	width: 250px;
	height: 400px;
}

.eight {
	grid-row: 13 / 14;
	grid-column-start: 2;
	grid-column-end: 2;
	width: 250px;
	height: 400px;
}

.nine {
	grid-row: 9 / 10;
	grid-column-start: 2;
	grid-column-end: 2;
	width: 250px;
	height: 400px;
}

.gif {
	grid-row: 1 / 2;
	grid-column-start: 2;
	grid-column-end: 2;
	width: 250px;
	height: 400px;
	position: relative;
	top: 335px;
}



#bio {
	width: 1000px;
	height: 1000px;
	background-color: rgba(242, 180, 174, 95)

}

.biopic {
	width: 250px;
	height: 250px;
	float: right;
	clear: both;
}

h2 {
	font-family: "cedarville cursive", "times new roman", serif;
	font-size: 65px;
	padding: 5px;
}


img { 
	width: 100%;
	 }

p {
	font-family: "times new roman", serif;
	text-align: left;
	letter-spacing: 2px;
	line-height: 40px;
	width: 500px;
	position: relative;
	left: 150px;

}

ul {
	list-style-type: none;
}

li {
	font-family: "cedarville cursive", "times new roman", serif;
}

figcaption {
	font-family: "cedarville cursive", "times new roman", serif;
	font-size: 20px;
	padding: 5px;
}

a:link, a:visited {
	color: rgba(38, 38, 38, 15);
	text-decoration: none;
}

a:hover, a:focus {
	color: rgba(242, 114, 114, 95);
}

#bio a:link,#bio a:visited {
	color: rgba(38, 38, 38, 15);
	text-decoration: none;
}

#bio a:hover,#bio a:focus {
	color: rgba(242, 114, 114, 95);
}

footer {
	clear: both;
	font-family: "times new roman", serif;
	font-size: 20px;
	margin: 10px;
}