html,
body {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

* {
  margin: 0;
  padding: 0;
}

.intro {
  top: 10px;
  background:black;

  min-height: 50vh;
  padding-top: 171px;
  /*   line-height: 100vh; */
  /*   width:100%;
  height:96vh;
border:solid; */
}
.intro h1{
  color:white;
  .intro span s1{
    color:red;
  }
}
.intro h2 {
  color: gold;
}

.intro img{
  width: 20%;
  height: 180px;
  border-top: 2px solid gold;
  border-bottom: 2px solid gold;
}
nav ul {
  text-align: right;
  position: fixed;
  width: 100%;
  background-color: black;
}

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

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

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

.work {
  padding-top: 60px;
  margin: 0px auto 0px;
  background: #475440;
  border-style: solid;
  border-color: #ff0000 #0000ff;
}

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

.project {
  text-decoration: none;
  background-image: url('https://image.ibb.co/jGszYe/621116812_612x612.jpg');
  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 2px;
   background: #e0ebe8;
  color: #008080;
  font-weight: bold;
  font-size: 1em;
  border: 2px solid #90C695;
  border-radius: 4px;
  cursor: pointer;
  padding-top:20px;
}


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

@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: #779666;
  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 red;
  border-radius: 19px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #fff435;
  color: blue;
  text-decoration: none;
}

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

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

footer a {
  color: white;
}

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