* {
  padding: 0;
  margin: 0;
}
a,
a:hover,
a:visited {
  text-decoration: none;
}
html,
body {
  height: 100%;
}
body {
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica',
    'Avenir', sans-serif;
  touch-action: pan-y;
  text-align: center;
}

.outter {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.inner {
  /* margin: 0 auto; */
  width: 100%;
}

/* hide scrollbar */

.inner {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.inner::-webkit-scrollbar {
  display: none;
}

/* set inner width */

.inner-width-wrap {
  width: 300px; /* 60*4 + 20*3 */
}

/* img tag */

img {
  /* undraggable */
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  /* untouchable */
  pointer-events: none;
  -webkit-touch-callout: none;
}

/* sections */

/* section.header */

section.header {
  position: sticky;
  top: 0;
  width: inherit;
  padding: 1em 0;
  color: #000;
  font-size: 0.8em;
  font-weight: 600;
  /* untouchable */
  pointer-events: none;
  -webkit-touch-callout: none;
}

/* section.images */

section.image-container {
  width: 100%;
  padding: 0.5em 0;
}

.images {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 auto;
}

.images .item {
  width: 60px;
  height: 60px;
}

/* images img */

.images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* section.footer */

section.footer {
  padding: 2em 0;
  width: 100%;
}

.logo {
  width: 44px;
  /* opacity */
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
}

.logo.inverted {
  filter: invert(100%);
}

section.footer .menu,
section.footer a {
  font-size: 0.5em;
  font-weight: 500;
  color: #aaaaaa;
}

/* section.buttons */

section.buttons {
  position: sticky;
  bottom: 0;
  width: inherit;
  padding-bottom: 2.5em;
}

.buttons div {
  margin: 0 auto;
}

.action {
  display: inline-block;
  padding: 1em 0;
  width: 90%;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  /* background-color: red; */
  background-image: url(../img/getthepack.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* mask image */
  /* -webkit-mask-image: url("../img/getthepack.svg");
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("../img/getthepack.svg");;
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat; */
}

.action span {
  display: block;
  padding: 0.2em;
}

.action p {
  font-size: 0.4em;
  padding: 0.3em;
  /* opacity */
  opacity: 0.7;
  -moz-opacity: 0.7;
  -webkit-opacity: 0.7;
}

.info {
  font-size: 0.4em;
  padding: 0.3em;
  /* opacity */
  opacity: 0.7;
  -moz-opacity: 0.7;
  -webkit-opacity: 0.7;
}

/* footer-fixed */

.footer-fixed {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 4em;
}

/* darkui */

.darkui .header {
  color: #fff;
}
.darkui .info {
  color: #fff;
}

.darkui .invertable {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

/* responsive */

.inner {
  height: auto;
}

/* @media screen and (min-width:1024px) {
  desktop
  section.footer { display: none; }
  .footer-fixed { display: block; }
}

@media screen and (min-width:768px) and (max-width: 1023px) {
  tablet
  section.footer { display: none; }
  .footer-fixed { display: block; }
} */

@media screen and (min-height: 900px) {
  section.footer .logo {
    display: none;
  }
  .footer-fixed {
    display: block;
  }
  .inner {
    max-height: 700px;
  }
}

/* debug */
/* .inner { background-color: cadetblue; }
.outter { background-color: #ff8100; } */
/* .item { display: none !important; }
.show { display: inline-block !important; } */
/* .show2 { display: inline-block !important; } */