/*
#1F2326
#243B40
#A8BBBF
#496F73
#496F73
#64888C
*/
header{
	background-color: #1F232699;
	margin: 0;
	position: fixed;
	width:100%;
	top: 0;
	left: 0;
	z-index: 100;
}
h1{
	padding-left: 30px;
	color: #A8BBB9;
	padding-bottom: 10px;
	font-family: 'Abril Fatface', cursive;
	font-size: 3em;
	text-shadow: 5px 5px #1F2326;
}
span{
 position: absolute;
 font-size: 0.65em;
 right: 20px;
 bottom: 10px;
 font-style: italic;
 font-family: 'Lato', sans-serif;
 color: #496F73;
}

body{
	margin: 0;
	background-image: url("img/skybackground.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
#wrapper{
	margin-top: 100px;
	}
#poem{
	position: relative;
	height:1000px;
	width: 1000px;
	margin: auto;
	color: #64888C;
}
.poem-content1,
.poem-content2,
.poem-content3,
.poem-content4,
.poem-content5,
.poem-content6,
.poem-content7,
.poem-content8,
.poem-content9,
.poem-content10,
.poem-content11,
.poem-content12,
.poem-content13{
	display: none;
	position: absolute;
	text-align: left;
	left: 35%;
	top: 39%;
	width: 260px;
	height: 210px;
	text-align: center;
	padding-top: 70px;
	z-index: 2;
	font-family: 'Lato', sans-serif;
	font-size: 1.2em;
	text-shadow: 2px 2px black;
	}
#poemspot{
	position: absolute;
	left: 33%;
	top: 39%;
	border: 1px solid #A8BBBF;
	width: 280px;
	height: 280px;
	background-color: #243B40;
	box-shadow: 7px 7px 5px #1F2326;
	border-radius: 20px;
}
hr{
	border: 2px solid #A8BBBF;
	width: 900px;
	border-radius: 5px;
	box-shadow: 2px 2px 1px #1F2326;
}
#I:hover +.poem-content1,
#II:hover +.poem-content2,
#III:hover +.poem-content3,
#IV:hover +.poem-content4,
#V:hover +.poem-content5,
#VI:hover +.poem-content6,
#VII:hover +.poem-content7,
#VIII:hover +.poem-content8,
#IX:hover +.poem-content9,
#X:hover +.poem-content10,
#XI:hover +.poem-content11,
#XII:hover +.poem-content12,
#XIII:hover +.poem-content13{
  display: block;
}
.numerals{
  display: inline-block;
  position: relative;
  color: #64888C;
}

.numerals::after {
  content: '';
  position: absolute;
  width: 50%;
  transform: scaleX(0);
  height: 2px;
  bottom: 30px;
  left: 30px;
  background-color: ;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.numerals:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.numerals{
	width: 80px;
	height: 80px;
	text-align: center;
	border-radius: 100px;
	padding: 20px;
	border: 1px solid #A8BBBF;
	background: radial-gradient(circle, rgba(73,111,115,1) 0%, rgba(36,59,64,1) 0%, rgba(31,35,38,1) 100%);
	box-shadow: 7px 7px 5px #1F2326;
	font-size: 1.5em;
	text-shadow: 3px 3px #1F2326;
}
#I{
	position: absolute;
	left: 40%;
	top: 10%;
}
#II{
	position: absolute;
	left: 58%;
	top: 15%;
}
#III{
	position: absolute;
	left: 71%;
	top: 27%;
}
#IV{
	position: absolute;
	left: 80%;
	top: 43%;
}
#V{
	position: absolute;
	left: 78%;
	top: 60%;
}
#VI{
	position: absolute;
	left: 67%;
	top: 73%;
}
#VII{
	position: absolute;
	left: 52%;
	top: 82%;
}
#VIII{
	position: absolute;
	left: 32%;
	top: 82%;
}
#IX{
	position: absolute;
	left: 16%;
	top: 73%;
}
#X{
	position: absolute;
	left: 5%;
	top: 60%;
}
#XI{
	position: absolute;
	left: 3%;
	top: 43%;
}
#XII{
	position: absolute;
	left: 9%;
	top: 27%;
}
#XIII{
	position: absolute;
	left: 23%;
	top: 15%;
}
#bio{
	position: relative;
	width: 1000px;
	height: 1000px;
	margin: auto;
}
figure{
	position: absolute;
	left: 25px;
	top: 110px;
	color: #496F73;
	font-family: 'Lato', sans-serif;
}
img{
	border-radius: 20px;
	border: 2px solid black;
	box-shadow: 7px 7px 5px #1F2326;
}
h2{
	position: absolute;
	left: 320px;
	top: 0px;
	font-size: 2.8em;
	font-family: 'Abril Fatface', cursive;
	color: #A8BBBF;
	text-shadow: 2px 2px #1F2326;

}
.infop{
	position: absolute;
	left: 520px;
	top: 190px;
	width: 400px;
	height: 250px;
	padding: 50px 25px;
	background-color: #A8BBBF;
	font-family: 'Lato', sans-serif;
	font-size: 1.2em;
	border-radius: 5px;
	color: #243B40;
	box-shadow: 7px 7px 5px #1F2326;
	text-shadow: 2px 2px white;
}
ul{
	position: absolute;
	left: 300px;
	top: 720px;
	width: 400px;
	height: 200px;
	list-style-type: square;
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	color: #A8BBBF ;
}
.biolink{
	position: absolute;
	left: 358px;
	top: 632px;
}
.listtitle{
	position: absolute;
	left: 280px;
	top: 650px;
	font-family: 'Abril Fatface', cursive;
	font-size: 1.8em;
	color: #496F73;
	text-shadow: 4px 4px black;
}

footer{
	text-align: right;
	padding: 10px;
	color: #496F73;
}
a{
	text-decoration: wavy underline;
	color: #A8BBBF;
	font-family: 'Lato', sans-serif;
}
a:hover {
  background-color: #A8BBBF;
  color: #1F2326;
  text-decoration: none;
}