html, body {
     font-family: 'Open Sans', sans-serif;
     text-align: center;
}

* {
     margin: 0;
     padding: 0;
}

.intro {
     top: 0;
     background-color: #E0EBE8;
     padding-top: 45vh;
     min-height: 55vh;
}

.intro p {
     color: #008080;
     font-size: 1.2em;
}

nav ul {
     text-align: right;
     position: fixed;
     background-color: #E0EBE8;
     width: 100%;
}

nav ul li {
     display: inline-block;
     margin: 55px;
     margin-top: 25px;
     margin-bottom: 15px;
     font-size: 1.5em;
}

nav ul li a {
     color: #008080;
     text-decoration: none;
     margin-left: -13px;
}

nav ul li a:hover {
     color: rgb(16, 204, 16);
}

.work {
     padding-top: 60px;
     margin-top: -60px;
} 

.work .work-header {
     margin-top: 50px;
     color: #008080;
}

.project {
     text-decoration: none;
     color: #008080;
     display: inline-block;
     overflow: hidden;
     height: 220px;
     width: 280px;
     margin: 40px 100px;
     border: 2px solid lightblue;
}

.project-pic {
     width: 100%;
     height: 180px;
     border-bottom: 2px solid lightblue;
}

.project-title {
     font-weight: bold;
}

.show-all {
     text-decoration: none;
     display: block;
     width: 200px;
     height: 30px;
     margin: 20px auto 90px;
     background-color: #E0EBE8;
     color: #008080;
     font-weight: bold;
     font-size: 1em;
     padding-top: 10px;
     border: 2px solid #90C695;
     border-radius: 4px;
     cursor: pointer;
}

.show-all:hover {
     background-color: #E4F1FE;
     color: green; 
}

.contact {
     background-color: lightblue;
     padding-bottom: 160px;
}

.header {
     padding: 160px 0 110px;
}

.contact-details {
     display: inline-block;
     font-weight: bold;
     margin: 0 35px 45px 35px;
     list-style-type: none;
     border: 2px solid green;
     border-radius: 100%;
     width: 100px;
     height: 100px;
     line-height: 100px;
     background: #e0ebe8;
     color: #008080;
     text-decoration: none;
}

.contact-details:hover {
     background: #E4F1FE;
     color: green;
}
   
footer {
     padding: 20px;
     background: #22313F;
     color: white;
     line-height: 40px;
     font-weight: bold;
     font-size: 1.2em;
}
   
footer a {
     color: white;
}

@media only screen and (max-width: 367px) {
     .contact-details {
          width: 90px;
          height: 20px;
          padding: 10px;
          border: 2px solid #90C695;
          border-radius: 0;
     }
}

@media only screen and (max-width: 500px) {
     nav ul {
          text-align: center;
     }

     nav ul li {
          margin: 20px;
     }

     .project {
          margin: 40px 0;
     }
}