/* clears default browser css*/
* {
  box-sizing: border-box; /* Makes sizing more predictable */
  margin: 0;
  padding: 0;
}

body {
    background-color: rgb(28, 33, 34);
    background-image: url(../images/chirality-cover.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: -170px;
}

p, a, h1 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

p {
    padding-top: 10px;
}

.flex {
    display: flex;
    justify-content: center;
}

.grid {
    background-color: rgb(75, 84, 91);
    display: grid;
    grid-template-areas: 
    'header header header  header'
   
    'main main main  nav'
    'main main main  nav'
    'main main main  nav'
    'main main main  nav'
    'main main main  nav'
    'main main main  nav'
    'main main main  nav'
    'main main main  nav'
    'main main main  nav'
    
    'footer footer footer  footer'
    ;

    position: relative;
    top: 50px;

    width: 900px;
    height: 1000px;

    margin: 20px;
   

    border: 10px ridge;
    border-color: rgb(57, 61, 65);
    
}



header {
    background-color: rgb(79, 115, 217);
    grid-area: header;
    background-image: url(../images/paleawakening-cover.jpeg);
    background-repeat: no-repeat;
    background-size: 900px;
    display: flex;
    align-items: center;
    background-position-y: -485px;
    justify-content: center;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

h1 {
    color: rgb(241, 245, 245);
    text-shadow: 2px 5px 2px rgb(88, 97, 133);
}

h2 {
    color: rgb(126, 145, 179);
}



main {
    background-color: rgb(75, 84, 91);
    grid-area: main;
    padding: 15px;
    width: 650px;
    height: 790px;
    overflow: scroll;
}

p {
    color: rgb(194, 200, 220);
    font-size: 17px;
}

nav {
    background-color: rgb(44, 53, 54);
    grid-area: nav;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
    font-size: 17px;
    width: 230px;
}

a {
    color: rgb(186, 200, 229);
}

a:hover {
    color: rgb(131, 140, 172);
}

nav ul {
    list-style-type: none;
}

nav li {
    padding: 10px;
}

footer {
    background-color: rgb(218, 232, 243);
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer p {
    color: rgb(111, 108, 127);
    padding: 20px;
}

img {
    margin-top: 15px;
    margin-bottom: -0px;
}

h3 {
    padding-top:15px;
    margin-bottom: -5px;
    text-decoration: underline;
    color: rgb(160, 176, 189);
}

.center-img {
    position: relative;
    left: 100px;
    margin-bottom: -0px;
}

li::marker {
     color: rgb(160, 176, 189);
}

li {
    margin-left: 10px;
}