* {
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #fff;
}

main {
  margin: auto;
  width: 50%;
}

@media only screen and (min-width: 768px) {
  .placeholder-text {
    top: 80%; 

    -ms-transform: translate(-50%, -80%);
    transform: translate(-50%, -80%);    
  }

  main {
    margin: auto;
    width: 50%;
  }

  main h1 {
    font-size: 2em;
  }
}

@media only screen and (max-width: 768px) {
  .placeholder-text {
    top: 50%;

    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  main h1 {   
    font-size: 1em;
  }
}

.placeholder-text {
  margin: 0;
  position: absolute;
    
  left: 50%;
  width: 50%;

  padding: 30px;

  background-color: rgba(255, 255, 255, .8);
}

main h1 {
  color: #444444;
  text-align: center;  
}