body {background-color: #ffd4d4;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        background-image: linear-gradient(to bottom, #ec6a6a, #570c0c);
        background-repeat: no-repeat;}

#cover{background-color: #e6a2a270;}

header { background-color: #ff9e9e;
        color: #fff;
        background-image: url(photos/favicon.ico.jpg);
        background-repeat: no-repeat;  
        background-position: left; 
        line-height: 500%;
        text-indent: 6em;
        background-size: contain;
        border-radius: 20px 20px;
        text-align: center;}

nav{ text-align: center;
        margin-top: 0;
        font-weight: bold;
        padding: 1.5em;
        }

nav a {text-decoration: none;}

nav ul {list-style-type: none;
        margin: 0;
        padding-left: 0;
        font-size: 1.2em;}


header h1{margin-bottom: 0;
        margin-top: 0;
        text-indent: 3em;}

nav a {text-decoration: none;}

section {float:left;
        width: 33%;
        padding-left: 2em;
        padding-right: 2em;
        }

main {padding: 1px 20px 20px 20px;
        display: block;
        margin-left: 190px;
        background-color: #ffcbcb;
        overflow: auto;
        padding-left: 30px;}

footer{background-color: #ee7935;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 75%;
        padding: 1em;
        color: #fff}

nav{background-color: #e65b5b;
        font-weight: bold;
        line-height: 2.5em;
        border-radius: 20px 20px;
        text-align: center;
        font-weight: bold;
}

header h1{margin-bottom: 0;}
header a:link {color: #fff;}
header a:hover {color: #ee4f4f;}

nav a {text-decoration: none;}
nav a:hover {color: #9b0a0a;}


footer{background-color: #e65b5b;
        text-align: center;
        font-size: 75%;}

h1{font-family: Georgia, 'Times New Roman', serif;}


h2{color: #8a2828;
        font-family: Georgia, 'Times New Roman', serif;
        text-shadow: 2px 2px 2px#c0a6a6;
}

dt{color: #edc0c0;}

.name{color: #a17a7a;
     font-weight: bold;}


#address{color: #675d6e;
        font-size: 90%;}

#familyimg{
        background-image: url(photos/family.jpeg);
        height: 300px;
        background-repeat: no-repeat;
        background-size: 30% 80%;
        background-position: center;

}
#favoritesimg{
        background-image: url(photos/music.jpeg);
        height: 300px;
        background-repeat: no-repeat;
        background-size: 60% 80%;
        background-position: center;
        
}
#goalsimg{
        background-image: url(photos/accounting.jpeg);
        height: 300px;
        background-repeat: no-repeat;
        background-size: 25% 90%;
        background-position: center;
        
}
#hobbiesimg{
        background-image: url(photos/books.jpeg);
        height: 300px;
        background-repeat: no-repeat;
        background-size: 60% 80%;
        background-position: center;

}
#homeimg{
        background-image: url(photos/me.jpeg);
        height: 300px;
        background-repeat: no-repeat;
        background-size: 40% 90%;
        background-position: center;
        
}
#skillsimg{
        background-image: url(photos/braids.jpeg);
        height: 300px;
        background-repeat: no-repeat;
        background-size: 25% 80%;
        background-position: center;
        
}
table{
        border: 2px solid #8f0f0f;
        border-collapse: collapse;
}

th{background-color: #f3717b;}
td,th{border: 2px solid #8f0f0f;
text-align: center;
padding:0.5em;}
tr:nth-of-type(odd){background-color: #fda1d4;}

iframe{margin:1em;}

form{display: flex; flex-flow: column nowrap;}

input,textarea{margin-bottom: 1em;}

@media (min-width: 1024px){

nav {text-align: left; 
        padding-left: 1em;}

#cover{margin: auto;
        width:80%;
        box-shadow: 3px 3px 3px #333;
        border: 1px solid #003;
        grid-template-columns: 180px auto;
        display: grid;}

header { grid-row :1/2; grid-column: 1/3;}
nav { grid-row: 2/4; grid-column: 1/2;}
div { grid-row: 2/3; grid-column: 2/3;}
main { grid-row: 3/4; grid-column: 2/3;}
footer { grid-row: 4/5; grid-column: 2/3;}

section {float:left;
        width: 33%;
        padding-left: 2em;
        padding-right: 2em;}

form{
        display: grid;
       grid-template-columns: 6em 1fr;
       grid-gap: 1em; 
       grid-template-rows: auto;
       width: 60%;
}

nav li{ border-bottom: 0px;}

nav ul{display: flex;
        flex-flow: column;
        padding-top: 1em;}

input[type="submit"] {grid-column: 2/3; width: 10em;}
}