*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fffaf0;color:#111;font-family:Arial,Helvetica,sans-serif}
.page{max-width:1536px;margin:0 auto}
.artwrap{position:relative}
.art{display:block;width:100%;height:auto}

.artnav a,.hotspot{position:absolute;border:0!important;outline:0!important;box-shadow:none!important;text-decoration:none!important}
.artnav a,.artnav a:link,.artnav a:visited,.artnav a:active{color:#111!important;text-decoration:none!important}
.artnav a{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(10px,1.45vw,21px);line-height:1;white-space:nowrap;transition:color .12s ease}
.artnav a:hover,.artnav a:focus{color:#fff!important;text-decoration:none!important;text-shadow:0 1px 2px rgba(0,0,0,.55)}

.home{left:34.6%;top:2.05%;width:5.4%;height:5.2%}
.training{left:42.4%;top:2.05%;width:7.2%;height:5.2%}
.walls{left:51.3%;top:2.05%;width:10.0%;height:5.2%}
.trades{left:62.1%;top:2.05%;width:10.0%;height:5.2%}
.login{left:93.0%;top:2.05%;width:4.5%;height:5.2%}

.hotspot{display:block;background:transparent!important;text-decoration:none!important}
.getstarted{left:79.4%;top:1.0%;width:12.8%;height:7.0%}
.startlearn{left:3.9%;top:37.7%;width:22.2%;height:8.4%}
.watchvideo{left:27.3%;top:37.7%;width:18.4%;height:8.4%}
.viewcourses{left:85%;top:71%;width:11.6%;height:4.2%}
.course1{left:2.5%;top:74.6%;width:18.9%;height:15.5%}
.course2{left:22.6%;top:74.6%;width:18.9%;height:15.5%}
.course3{left:42.6%;top:74.6%;width:18.9%;height:15.5%}
.course4{left:62.7%;top:74.6%;width:18.9%;height:15.5%}
.course5{left:82.7%;top:74.6%;width:15.6%;height:15.5%}
.discordcta{left:89%;top:95.1%;width:10.1%;height:3.9%}

/* Real email form placed directly over the email field/button drawn in the artwork */
.art-email-form{
  position:absolute;
  left:33.55%;
  top:95.05%;
  width:27.1%;
  height:3.95%;
  display:grid;
  grid-template-columns:2.15fr 1fr;
  gap:.55%;
  z-index:5;
}
.art-email-form input[type=email]{
  width:100%;
  min-width:0;
  height:100%;
  border:0;
  border-radius:7px;
  background:transparent;
  padding:0 4.5%;
  color:#222;
  font-size:clamp(7px,.82vw,13px);
  outline:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
.art-email-form input[type=email]:focus{
  border:0;
  outline:none;
  box-shadow:none;
}
.art-email-form button{
  width:100%;
  height:100%;
  border:0;
  border-radius:7px;
  background:transparent;
  color:transparent;
  font-size:0;
  cursor:pointer;
  padding:0;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
.art-email-form button:hover,
.art-email-form button:focus{
  background:rgba(255,255,255,.08);
  outline:none;
}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:700px){
  .artnav a{font-size:clamp(6px,2vw,12px)}
}