*{
    padding:0;
    margin:0;
}
a {
  text-decoration: none;
  color: inherit;
}
body {
  background-color: #0288D1;
  font-family: title;
}
h1#subtitle {
  text-align: center;
  font-size: 3em;
  padding-top: 50px;
}
h2#blurb {
  text-align: center;
  font-size: 1.2em;
}
div.head-text{
  font-size: 2em;
  z-index: 3;
  position: absolute;
  top: 5%;
  text-align: center;
  width: 100%;
}
@font-face {
    font-family: title;
    src: url(./San-Francisco-Thin.ttf);
}
  /* code for animated blinking cursor */
  .typed-cursor{
      opacity: 1;
      font-weight: 100;
      -webkit-animation: blink 0.7s infinite;
      -moz-animation: blink 0.7s infinite;
      -ms-animation: blink 0.7s infinite;
      -o-animation: blink 0.7s infinite;
      animation: blink 0.7s infinite;
  }
  @-keyframes blink{
      0% { opacity:1; }
      50% { opacity:0; }
      100% { opacity:1; }
  }
  @-webkit-keyframes blink{
      0% { opacity:1; }
      50% { opacity:0; }
      100% { opacity:1; }
  }
  @-moz-keyframes blink{
      0% { opacity:1; }
      50% { opacity:0; }
      100% { opacity:1; }
  }
  @-ms-keyframes blink{
      0% { opacity:1; }
      50% { opacity:0; }
      100% { opacity:1; }
  }
  @-o-keyframes blink{
      0% { opacity:1; }
      50% { opacity:0; }
      100% { opacity:1; }
  }
div#desk {
  background-color: #ECEFF1;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 430px;
  font-family: title;
  text-align: center;
}
div#second {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 450px;
}
div#third {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 430px;
  background-color: #ECEFF1;
}
div#forth {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 430px;
}

/* code for animated blinking cursor */
.typed-cursor{
    opacity: 1;
    font-weight: 100;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-ms-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

  /* IMAGES */
img#mac {
  width: 300px;
  height: 200px;
  position: relative;
  top: 400px;
  left: 102px;
}
img#phone {
  width: 50px;
  height: 100px;
  position: relative;
  top: 397px;
  left: 70px;
}
img#charger {
  width: 100px;
  height: 100px;
  position: relative;
  left: -320px;
  top: 405px;
}
img#camera {
  width: 110px;
  height: 90px;
  position: relative;
  top: 305px;
  left: -90px;
}
img#coffee {
  width: 100px;
  width: 100px;
  position: relative;
  top: 310px;
  left: 150px;
}
img#watch {
  height: 110px;
  width: 20px;
  position: relative;
  top: 390px;
  left: -570px;
}
img#glasses {
  width: 50px;
  height: 95px;
  position: relative;
  top: 395px;
  left: -170px;
}
div#second img {
  width: 150px;
  margin-left: 10px;
  height: 220px;
}
div.wrap {
  padding-top: 35px;
  margin: 0 auto;
}
div#third img {
  height: 180px;
  width: 180px;
  margin-left: 10px;
}
div#third h1#subtitle {
  padding-top: 50px;
}
div#forth img {
  height: 180px;
  width: 180px;
  margin-left: 10px;
}
div.container {
  position: relative;
  top: -210px;
}
.top {
  width: 100%;
  opacity: 1;
}