* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #050403;
}

body {
  display: flex;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
}

.page-shell {
  width: 100%;
}

.mockup-wrap {
  position: relative;
  width: min(100vw, 1536px);
  margin: 0 auto;
  line-height: 0;
  background: #eee0c3;
  box-shadow: 0 0 45px rgba(0,0,0,.65);
}

.mockup-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.hotspot {
  position: absolute;
  display: block;
  z-index: 5;
  background: rgba(255,255,255,0);
  border-radius: 4px;
}

.hotspot:focus {
  outline: 3px solid rgba(0,0,0,.8);
  outline-offset: 2px;
}

.about { left: 30.0%; top: 4.0%; width: 8.5%; height: 3.0%; }
.how { left: 42.0%; top: 4.0%; width: 8.5%; height: 3.0%; }
.past { left: 54.0%; top: 4.0%; width: 8.5%; height: 3.0%; }
.faq { left: 67.0%; top: 4.0%; width: 4.5%; height: 3.0%; }
.contact { left: 75.0%; top: 4.0%; width: 7.0%; height: 3.0%; }

.view-odds { left: 25.8%; top: 66.1%; width: 6.3%; height: 4.0%; }
.buy-packs { left: 33.1%; top: 66.1%; width: 6.3%; height: 4.0%; }
.learn-more { left: 57.8%; top: 66.3%; width: 8.2%; height: 4.0%; }
.join-button { left: 69.7%; top: 85.5%; width: 13.5%; height: 5.0%; }

.sr-content {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 700px) {
  .mockup-wrap {
    width: 100vw;
    box-shadow: none;
  }
}