/*
Ruth Woodcock
DTC 355 Multimedia Authoring, Spring 2020
Project 1:  Blackbird
    This project still needs some work:
        1.  change color of nav links on hover
        2.  change color of Wallace photo to match color scheme of website
        3.  fix space between poet and photographer's bios
        4.  play with eagle photo choices - smoother "movement"?
*/
/* LARGE ELEMENTS */
body {
    color: black;
    font-family: 'IM Fell DW Pica', serif;
    margin: 0%;
    padding: 0%;
    background-color: #E0D9C9;
}
header {
    text-align: center;
    padding: 2%;
}
aside {
    width: 100%;
    margin: 0%;
    padding: 0%;
    float: left;
}
figure {
    width: 37%;
    position: relative;
    float: left;
    /*padding: 2%;*/
    /*border: 1px solid black;*/
}
footer {
    float: left;
    margin-left: 4%;
}
img {
    width: 100%;
}
#wrapper {
    width: 1000px;
    margin: auto;
    /*padding: 0;*/
}
/* TEXT STYLING */
p {
    font-size: 1.5em;
}
.left_indent {
    margin-left: 5%;
}
.smallText {
    font-size: 1em;
}
.no_top_margin {
    margin-top: 0;
}
ul {
    font-size: 1.5em;
    margin-left: 100px; /*NOT WORKING*/
}
/* NAV BAR STYLING */
#navBar {
    width: 100%;
    text-align: center;
}
.navButton {
    width: calc(100%/13);
    float: left;
    background-color: #423E3A;
    color: white;
    /*border: 1px solid aqua;*/
}
.even {
    background-color: white;
    color: black;
}
/* STANZA STYLING */
#poem {
    width: 50%;
    float: right;
    height: 500px;
    text-align: center;
    font-size: 1.5em;
    /*border: 1px solid aqua;*/
}
.stanza {
    width: auto;
    padding: 15%;
    /*background-color: pink;*/
    /*border: 1px solid aqua;*/
}
#one {
    display: block;
}
#two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve, #thirteen {
    display: none;
}
/* PHOTO STYLING */
#photo {
    width: 50%;
    float: left;
    height: 500px;
	background: url("img/eagle1.jpg");
	background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
	/*border: 1px solid aqua;*/
}
/* BIOGRAPHIES' STYLING */
.bio {
    width: auto;
    padding: 2%;
    /*background-color: lightblue;*/
    /*border: 1px solid red;*/
}
.bioText {
    width: 50%;
    position: relative;
    float: right;
    margin-right: 3%;
    /*border: 1px solid blue;*/
}
/* LINK STYLING */
a:link, a:visited {
    color: black;
    text-decoration: none;
}
a:link, a:hover {
    color: red;
}