body,
html {
height: 100%;
}

body {
font-family: ff-scala-sans-pro, sans-serif;
font-size: 1em;

background-image: url(../images/background.jpg); 
margin: 0;
background-attachment: fixed;
}

.container {
display: grid;
width: 100vw;
height: 100vh;
grid-template-areas:
"header     header  header"
"left       main    right"
"footer     footer  footer";
grid-template-columns: 40px 4fr 50px;
grid-template-rows: 160px auto 1fr;
}

/* .container>div {
border: 1px dashed #888;
} */

.header {
grid-area: header;
display: flex;
}

.header>div {
/* border: 1px dashed #ff0000; */
background-color: #CB8589;
}

#logo {
display: flex;
padding-left: 3em;
/* justify-content: center; */
flex-grow: 1;

}

#social {
display: flex; 
justify-content: center;
align-items: center;
flex-grow: 1;
background-color: #CB8589;

}

#main {
grid-area: main;
/* display: grid; */
justify-content: center;
align-items: center;
}

.left {
grid-area: left;
padding-left: 5em;
}

.right {
grid-area: right;

}

.footer {
grid-area: footer;
background-color: #CB8589;

padding: 10px 10%;
font-size: 1.5em;

}

/* //////////////// NAV LINKS //////////////// */

nav {
display: flex;
color: white;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: #CB8589;
font-size: 20px;
}

nav a {
letter-spacing: 2px;
font-size: .8em;
font-weight: 600;
padding: 4px 7px;
margin: 0 10px;
text-transform: uppercase;
text-decoration: none;

border-radius: 3px;
}

/* unvisited link */
nav a:link,
nav a:visited {
color: #E8D2AE;
background-color: #796465;
line-height: 40px;
}

/* mouse over link */
nav a:hover,
n.navbar v a:active {
color: #796465;
background-color: #E8D2AE
}

h1 {
font-family: "headline-gothic-atf", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 4em;
color: #796465;
letter-spacing: 10px;
position:relative; right: 11em;
}

h3 {
font-family: "headline-gothic-atf", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 2px;
color: #45292a;
padding: 10px;
text-align: center;
}



.about-text {
margin-left: 40px;

}

h2 {
font-family: "headline-gothic-atf", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 2px;
color: #45292a;
}

p {
font-family: "miller-text", serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #45292a;
}

.fixed-footer {
position: fixed;
display: flex;
padding-left: 40px;
left: 0;
bottom: 0;
width:100vw;
background-color: whitesmoke;
box-shadow: 10px 10px 100px black;
color: white;
text-align: left;
}

.rotate {
transform: rotate(-90deg); }

.fa {
padding: 10px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
width: 80px; height: 30px;
}

.fa:hover {
opacity: 0.7;
}

.fa-youtube {
    background: #796465;
    color: #E8D2AE;
    position: relative;
    top: 50px;
  }

.fa-tumblr {
    background: #796465;
    color: #E8D2AE;
    position: relative;
    top: 50px;
  }

  .fa-instagram {
    background: #796465;
    color: #E8D2AE;
    position: relative;
    top: 50px;
    }