/* styles for my final project: The TVA */

* {
    padding: 0;
    margin: 0;
}

body {
    background: rgba(255, 68, 0, 0.699);
}

img {
    max-width: 100%;
    display: block;
}

#welcome {
    margin: 0 auto;
} 

#wrapper {
    width:940px;
    background: rgba(124, 62, 4, 0.938); 
    padding:20px; 
    margin:20px auto;
}

header {     
    text-align: center;
    width: 100%;
    margin-top: 30px;
}

#logo {
    display:inline;
    margin-bottom: 20px; 
}

nav {
    height: 50px;
    line-height: 50px; 
    background:rgba(165, 42, 42, 0.541);
}

nav li {
    list-style-type: none;
    float:left;
    width: 20%;
    text-align: center;
    margin-bottom:20px; 
}

nav a {
    text-decoration: none;
    color:white;
    display: block;
}

nav a:hover {
    background: black;
    color:rgb(255, 152, 152);
}

.home li:nth-child(1) a,
.about li:nth-child(2) a,
.variants li:nth-child(3) a,
.loki li:nth-child(3) a,
.sylvie li:nth-child(3) a,
.employees li:nth-child(4) a,
.location li:nth-child(5) a {
    background: black;
    color: rgb(255, 152, 152); 
    font-weight: bold;
}

.about h2 {
    color:rgb(49, 211, 211);
}

main{
    width: 580px;
    float: left;
    background: rgba(124, 62, 4, 0.938);  
    padding: 2px;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-left: 1px; 
}

main p {
    margin-left: 6px;
}

main h2 {
    text-align: center;
}

img.mainpic {
    margin-left: 130px;
    margin-top: 10px;
    margin-bottom: 15px;
} 

img.mainsecpic {
    margin: 0 auto;
} 

aside {
    width: 340px;
    padding:5px;
    float: right;
    margin-top:25px; 
    background: rgba(124, 62, 4, 0.938);
    margin-right: 1px;  
}

aside p {
    margin-left: 5px; 
}

aside h2 {
    margin-left: 10px;
}

img.asidepic {
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
} 

.row {
    clear: both;
    margin-bottom:20px;
    overflow: hidden;
}

.col-8 {
    width:460px;
    float: left;
}

.col-8:last-of-type {
    float: right;
}

.col-8 h2 {
    color: green;
    font-size:2em;
    text-align: center;  
    margin-top: 5px;
}

.variants span a {
    color: green;
}

.loki h2 {
    text-align: center;
}

.loki span a {
    color:tomato;
}

.loki img {
    margin: 0 auto;
}

.loki p {
     line-height: 1.5; 
}   

.sylvie p {
    line-height: 1.5;
}

.sylvie h2 {
    text-align: center;
}

.sylvie img {
    margin: 0 auto;
}

.sylvie span a {
    color:tomato;
}

.employees img {
    margin: 0 auto;
}

.employees h2 {
    margin-top: 10px;
    text-align: center;
    color: tomato;
}

.employees h3 {
    margin-top: 5px;
    text-align: center;
}

.employees span a {
    color: tomato;
}

.third {
    width:300px; 
    float: left;
    margin-right:20px;
}

.third:last-of-type {
    margin-right:0;
}

.third:last-of-type img{
    margin-bottom: 31px;
} 

figure {
    margin-bottom: 20px;
}

figure img {
    margin: 0 auto;
}

figcaption {
    color:white;
    font-size: .875em;
    padding:8px;
    font-style: italic;
    text-align: center;
    padding:8px 0;
}

.location span {
    text-align: center;
}

.location span a {
    color: tomato;
}

footer{
    height:50px;
    line-height:50px;
    background: rgba(165, 42, 42, 0.541);
    clear:both;
    font-size: .9em;
}

footer ul {
    margin-left:20px; 
}

footer li {
list-style-type: none; 
float:left;
margin-right:35px;
color: white;
}

footer a {
    color: white;
}

footer img {
    margin-top: 3px;
}

h1 {
    color: white;
    text-align: center;
    font-size: 2.44; 
    margin-bottom: 10px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 2px;
}

h2 {
    font-size: 2em;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

h3 {
    font-size: 1.5em;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

p {
    color: white;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 10px;
    line-height: 1.3;
}

span {
    display: block;
    font-style:italic; 
}

span a{
    font-size:1em;
}