* { margin: 0; padding: 0; }

html { display: flex; width: 100%; height: 100%; font-family: arial; }

body { display: flex; justify-content: center; align-items: center;
  height: 100%; width: 100%; text-shadow: 0px 1px 1px #ffffff;
  background-size: cover; background-position: top center; }

h1 { margin: 16px 0px; font-size: 25px; }

.wrapper { display: flex; flex-direction: column; padding: 32px;
  width: 600px; box-shadow: 0px 0px 8px #333333;
  background-color: rgba(255,255,255,0.8); transition: width .25s; }

@media screen and (max-width:720px) { .wrapper { width: 400px; } }

@media screen and (max-width:520px) { .wrapper { width: 300px; } }

@media screen and (max-width:420px) { .wrapper { width: 200px; } }

#contact:before { content: ""; position: absolute; top: 0; bottom: 0;
  left: -12px; width: 4px; background: #333333; background-size: cover; }

#contact { margin: 16px 0; position: relative; }

#contact .address { margin: 4px 0; }