html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}

body {
   font-family: 'Roboto Slab', serif;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
}

.container {
   height: 100%;
   display: grid;
   grid-template: repeat(3, 1fr) / repeat(12, 1fr);
}

header {
   grid-column: 1 / -1;
}

header .navbar{
   display: flex;
   margin: 0;
   padding: 0;
}

.navbar a {
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   text-align: center;
}

.navbar li {
   list-style: none;
}

.navbar .fa {
   margin: 10px;
}

.nav-item .fa-arrow-left {
   animation-duration: 2s;
   animation-delay: 4s;
   animation-iteration-count: 1;
}

.nav-item .fa-arrow-right {
   animation-duration: 2s;
   animation-delay: 2s;
   animation-iteration-count: 1;
}

.navbar #contact {
   flex: 1;
}

.navbar #name {
   flex: 1;
}
.navbar #projects {
   flex: 1;
}

main {
   grid-column: 1 / -1;
}

.project-collection {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: center;
   margin: 0;
   padding: 0;
}

.project-collection li {
   list-style: none;
   text-align: center;
}

.project-collection img {
   width: 400px;
   height: 250px;
   border-radius: 8px;
   box-shadow: 3px 13px 12px -5px rgba(0,0,0,0.75);
}

.project-collection p {
   width: 100%;
}

footer {
   grid-column: 1 / -1;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   margin: 10px;
}

footer a {
   margin: 0.5em;
}

a:link {
   color: inherit;
}

a:visited {
   color: inherit;
}