body {
  background-color: black;
}
p {
  padding: 0;
  margin: 0;
}
#main-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.bg-img {
  background-image: url('../img/desert-bg.jpg');
  background-size: cover;
}
#bg-vid {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#content {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#wordmark {
  max-width: 400px;
}
.celebration {
  width: 60vw;
  max-width: 600px;
  height: 40vw;
  max-height: 400px;
  background-color: rgba(255,255,255,0.85);
  position: absolute;
  padding: 10px;
  display:none;
  cursor: move;
}
.celebration .title {
  display:block;
  width: 100%;
  margin-bottom: 10px;
  font-family: 'Inconsolata', monospace;
  color: black;
}
.celebration .details {
  display:block;
  width:100%;
  height:100%;
  color: white;
  text-align: center;
  text-shadow: 1px 1px rgba(0,0,0,0.4);
  background-color: rgba(255,255,255,0);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 30px;
}
.celebration#wedding .details { background-image: url('../img/wedding.jpg'); }
.celebration#wedding { bottom: 25vh; right: 10vw; }
.celebration#story { bottom: 20vh; right: 25vw; }
.celebration#orlando .details { background-image: url('../img/orlando.jpg'); }
.celebration#orlando { bottom: 3vh; left: 2vw; }
.celebration#york .details { background-image: url('../img/york.jpg'); }
.celebration#york { bottom: 5vh; right: 30vw; }
.celebration#brooklyn .details { background-image: url('../img/brooklyn.jpg'); }
.celebration#brooklyn { bottom: 1vh; right: 2vw; }