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

body {
   font-family: 'Roboto Slab', serif;
   background: rgb(14,124,123, 0.75);
   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;
}

.contact-form, form {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.contact-form > form {
   padding: 60px;
   background:rgba(0, 0, 0, 0.4);
   border-radius: 40px;
   box-shadow: 3px 13px 12px -5px rgba(0,0,0,0.75);
}

form input, textarea {
   margin: 10px;
   border-radius: 5px;
   text-align: center;
}

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;
}

.button {
   display: inline-block;
   width: 175px;
   padding: 8px;
   color: #fff;
   border: 1px solid #fff;
   text-align: center;
   text-decoration: none;
   background-color: rgba(255, 255, 255, 0);
   border-radius: 5px;
}

.button:hover {
   background-color: #fff;
   color: rgb(14,124,123);
}