* {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#hero {
  background-color: #e0ebe8;
  overflow: hidden;
  text-align: center;
  padding: 10%;
  padding-bottom: 0;
  height: 100%;
}

#hero h1 {
  font-size: 3rem;
  font-family: cursive;
  color: #3e9c87;
}

#hero p {
  color: #3e9c87;
  font-size: 1.5rem;
  font-family: sans-serif;
}

.land {
  margin-top: 13.6%;
  width: 80%;
}

.cloudone,
.cloudtwo {
  position: absolute;
}

.cloudone {
  left: 20%;
  top: 10%;
}

.cloudtwo {
  top: 30%;
  right: 20%;
}

#about {
  text-align: center;
}

#about img {
  width: 10%;
  margin-top: 10%;
  margin-bottom: 2%;
}

#about h1 {
  font-size: 3rem;
  color: #3e9c87;
  font-family: sans-serif;
}

#about p {
  font-size: 1.5rem;
  font-family: sans-serif;
  width: 40%;
  margin: 10px auto;
}

hr {
  width: 10%;
  margin: 10% auto;
  border: 2px dotted #f2f2f2;
  border-width: 20px;
  border-bottom: none;
}

#work {
  margin: 10% auto;
  width: 50%;
  text-align: right;
}

#work td {
  padding: 20px;
  color: #3e9c87;
}

#work p {
  color: #000;
}

#work img {
  width: 100%;
}

#work h1 {
  font-size: 2.5rem;
  font-family: sans-serif;
}

#work p {
  font-family: sans-serif;
  width: 90%;
  font-size: 1.2rem;
  float: right;
}

.footerone {
  background-color: #e0ebe8;
  text-align: center;
  font-family: sans-serif;
  padding: 10%;
}

@media screen and (max-width: 1100px) {
  .cloudone {
    left: 5%;
  }

  .cloudtwo {
    right: 5%;
  }
}


@media screen and (max-width: 929px) {
  body {
    width: 100% !important;
  }

  .cloudone {
    display: none;
  }

  .cloudtwo {
    display: none;
  }

  .land {
    position: relative !important;
    width: 100% !important;
    bottom: -10px !important;
  }

  #hero {
    padding: 10% 1% 1% !important;
  }

  #about p {
    width: 60% !important;
  }

  #work {
    margin: 10% 1% !important;
    width: 100% !important;
    text-align: center !important;
  }

  #work td:nth-child(1) {
	display: none !important;
  }

  #work p {
	width: 100% !important;
  }
}