*{box-sizing:border-box}

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

body{
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}

.page{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#050505;
  padding:16px 0 32px;
}

.poster{
  position:relative;
  width:min(92vw,950px);
  line-height:0;
  overflow:hidden;
  background:#050505;
  border-radius:20px;
  box-shadow:
    0 0 0 1px rgba(255,190,0,.22),
    0 24px 65px rgba(0,0,0,.72);
}

.poster>img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

.hotspot{
  position:absolute;
  display:block;
  border-radius:20px;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background-color .14s ease;
}

.hotspot:hover,
.hotspot:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,190,0,.07);
  box-shadow:
    0 0 0 2px rgba(255,196,0,.78),
    0 0 26px rgba(255,190,0,.34);
}

.hotspot:active{
  transform:scale(.982);
  background:rgba(255,190,0,.11);
}

/* Social icons */
.instagram{left:10.5%;top:30.1%;width:23%;height:7.6%;border-radius:50%}
.facebook{left:38.5%;top:30.1%;width:23%;height:7.6%;border-radius:50%}
.tiktok{left:66.5%;top:30.1%;width:23%;height:7.6%;border-radius:50%}

/* Yellow buttons */
.order{left:4.5%;top:39.2%;width:91%;height:9.3%}
.event{left:4.5%;top:49.1%;width:91%;height:9.5%}
.location{left:4.5%;top:59.5%;width:91%;height:9.3%}

/* Black buttons */
.revolut{left:4.5%;top:69.9%;width:91%;height:5.7%}
.viber{left:4.5%;top:76.2%;width:91%;height:5.7%}
.whatsapp{left:4.5%;top:82.5%;width:91%;height:5.7%}

.viber-note{
  display:none;
  width:min(calc(100% - 24px),520px);
  margin:12px auto 0;
  padding:12px 14px;
  color:#fff;
  background:#151515;
  border:1px solid rgba(255,190,0,.6);
  border-radius:12px;
  text-align:center;
  line-height:1.4;
  font-size:14px;
}

.viber-note.show{display:block}

@media (max-width:699px){
  html,body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
  }

  .page{
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    padding:0;
    justify-content:center;
    overflow:hidden;
  }

  .poster{
    width:auto;
    height:100dvh;
    max-width:100vw;
    max-height:100dvh;
    aspect-ratio:862 / 1825;
    border-radius:0;
    box-shadow:none;
  }

  .poster>img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .viber-note{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:20;
    width:auto;
    margin:0;
  }
}

@media (min-width:1400px){
  .poster{width:min(86vw,1100px)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}