html,
body {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  background: linear-gradient(45deg, #CCFFFF,#FFCCCC,#CCFFFF,#FFCCCC, #CCFFFF);
}

* {
  margin: 0;
  padding: 0;
}

.intro {
  top: 0;
  background: linear-gradient(90deg,blue,#CCFFFF,#FFCCCC,#FFCCCC,#CCFFFF,blue);
  min-height: 80vh;
  padding-top: 20vh;
  /*   line-height: 100vh; */
  /*   width:100%;
  height:96vh;
border:solid; */
}
 
.intro p {
  color: green;
}

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

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

nav ul li a {
  color: #008080;
  text-decoration: none;
}

nav ul li a:hover {
  color: green;
}

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

.work .work-header {
  margin-top: 50px;
  color: red;
  font-weight: normal;
}

.project {
  text-decoration: none;
  color: #008080;
  display: inline-block;
  overflow: hidden;
  border: 2px solid lightblue;
  height: 220px;
  width: 280px;
  margin: 40px 100px;
  /*   background: url("https://res.cloudinary.com/dck40m3wf/image/upload/v1455459914/Portfolio/fancy-floral-pattern-384.jpg") repeat; */
}

.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: #e0ebe8;
  color: #008080;
  font-weight: bold;
  font-size: 1em;
  border: 2px solid #90C695;
  border-radius: 4px;
  cursor: pointer;
  padding-top:10px;
}


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

@media only screen and (max-width: 500px) {
  nav ul {
    text-align: center;
  }
  nav ul li {
    margin: 20px;
  }
  .project {
    margin: 40px 0;
  }
}

.contact {
  /*   height:800px; */
  /*   min-height:800px; */
  background: linear-gradient(450deg,#E4F1FE,#FFCCCC,#E4F1FE,#CCFFFF,#00BFFF,#CCFFFF,#E4F1FE,#FFCCCC,#E4F1FE);
  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 #90C695;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #e0ebe8;
  color: #FFCCCC;
  text-decoration: none;
}

.contact-details:hover {
  background: #E4F1FE;
  color: blue;
}

footer {
  padding: 20px;
  background: #22313F;
  color: white;
  line-height: 40px;
}

footer a {
  color: white;
}

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