* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#loading, #title {
  color: white;
  font-family: 'San Francisco Display Ultralight', sans-serif;
  font-size: 30pt;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 1s ease;
}
#loading.show, #title.show {
  opacity: 1;
}
#loading.hide, #title.hide {
  opacity: 0;
}
#zoom {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(10);
  transition: opacity 2s ease;
  opacity: 0;
}
#zoom.show {
  opacity: 1;
}

@font-face {
  font-family: "San Francisco Display Ultralight";
  font-style: normal;
  font-weight: 400;
  src: url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.eot?#iefix) format("embedded-opentype"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2) format("woff2"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff) format("woff"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.ttf) format("truetype"), url("fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.svg#San Francisco Display Ultralight") format("svg")
}