* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
    display: grid;
    grid-template-columns: 80px auto 80px;
    grid-template-rows: 300px auto 50px;
    grid-template-areas: 
    "header header header"
    ". main ."
    "footer footer footer";
 }
body header {
    background-image: url("header.png");
    height: 300px;
    background-size: cover;
    position: relative;
    grid-area: header;
}
main {
    grid-area: main;
}
footer {
    grid-area: footer;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: initial;
    text-align: center;
    font-size: 1.2rem;
}
body header nav {
    position: absolute;
    bottom: 0px;
    }
nav a {
    display: inline-block;
    padding: 2rem;
    color: rgb(11, 11, 48);
    text-decoration: none;
    padding: 20px;
    font-style: italic;
}

nav a:hover {
    background-color: rgb(250, 208, 215);
}
nav {
    left: 0;
    right: 0;
}
.green div {
    border-bottom: white 3px solid;
}
.green {
    padding: 5px;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase;
    font-size: 1.8rem;
}
nav ul {
    position:sticky;
    background-color: #f5f5dc;
    opacity: 75%;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}
nav li {
    display: inline-block;
}
.title {
    color: rgb(11, 11, 48);
    font-size: 1.8em;
    font-family: Arial, Helvetica, sans-serif;
}
.pink {
    background-color: rgb(250, 208, 215);
    height: 30px;
}
.picture {
    background-image: url("katiepic2.jpg");
    height: 346px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 400px;
    margin: 50px 50px 50px 50px;
    float: left;
}
.air {
    margin-top: 50px;
    width: 650px;
    display: inline-block;
}
.pain {
    font-size: 1.4rem;
}
.clearfix::before {
    content: "";
    clear: both;
    display: table;
  }
  .air2 {
    margin-top: 50px;
    width: 650px;
    float: left;
}
.pain2 {
    font-size: 1.4rem;
}
.green2 {
    padding: 5px;
    background-color: rgb(63, 188, 130);
    color: seashell;
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase;
    font-size: 1.8rem;
}
.picture2 {
    background-image: url("darkbranch2.png");
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    margin: 50px 50px 50px 125px;
    display: inline-block;
}
.green2 div {
    border-bottom: white 3px solid;
}
#contact {
    display: inline-block;
    float: right;
    font-size: 1.3rem;
    border-radius: 5px;
}
#contact:hover {
    background-color: rgb(179, 119, 170);
}