*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --page-max-w:500px;
  --design-w:377;
  --design-h:833;
}

body{
  background:#414141;
  overflow-x:hidden;
}

.page{
  position:relative;
  width:100%;
  max-width:var(--page-max-w);
  margin:0 auto;
}

.bg{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:var(--design-w) / var(--design-h);
}

.top-banner{
  position:absolute;
  top:1.76%;
  left:5.58%;
  right:5.58%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2%;
  z-index:10;
}

.logo{
  width:48%;
  height:auto;
  display:block;
  flex:0 1 48%;
  min-width:0;
}

.download-btn{
  display:block;
  width:39%;
  flex:0 0 39%;
}

.download-btn img{
  width:100%;
  height:auto;
  display:block;
  transition:.2s;
}

.download-btn:active img{
  transform:scale(.96);
}

@media (min-width:721px){
  body{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:100vh;
  }

  .page{
    flex-shrink:0;
    width:min(100%, var(--page-max-w));
  }
}