*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top, rgba(18,46,82,0.45), transparent 35%),
    linear-gradient(180deg,#020915,#000000);
  color:white;
  font-family:Georgia,"Times New Roman",serif;
}

.page-wrap{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:24px 18px 10px;
  text-align:center;
}

.hero-panel{
  position:relative;
  width:100%;
  margin:0 auto;
  border:1px solid rgba(201,162,39,0.65);
  border-radius:12px;
  overflow:hidden;
  box-shadow:
    0 0 26px rgba(201,162,39,0.25),
    0 0 70px rgba(0,0,0,0.9);
  background:#020915;
}

.main-graphic{
  display:block;
  width:100%;
  height:auto;
}

.hotspot{
  position:absolute;
  display:block;
  border-radius:18px;
  border:2px solid transparent;
  transition:all 0.25s ease;
  cursor:pointer;
}

.hotspot:hover{
  background:rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 18px rgba(241,210,122,0.25);
  border:2px solid rgba(241,210,122,0.8);
}

.aftermath{
  left:3.9%;
  top:47%;
  width:17%;
  height:39%;
}

.imstm{
  left:22%;
  top:47%;
  width:17%;
  height:39%;
}

.gmsg{
  left:41%;
  top:47%;
  width:17%;
  height:39%;
}

.ba2k{
  left:60%;
  top:47%;
  width:17%;
  height:40.5%;
}

.james{
  left:78.25%;
  top:47%;
  width:17%;
  height:40.5%;
}
.instruction{
  margin:18px auto 8px;
  color:#f1d27a;
  font-size:20px;
  letter-spacing:0.5px;
}

footer{
  text-align:center;
  color:#d8d8d8;
  font-size:15px;
  padding:14px 10px 22px;
}

@media(max-width:800px){
  .page-wrap{
    padding:10px;
  }

  .instruction{
    font-size:16px;
  }

  footer{
    font-size:13px;
  }
}