/* Base */
* {
  scrollbar-width: auto;
  scrollbar-color: #F97316 #f7f7f7;
}

*::-webkit-scrollbar { width: 15px; height: 3px; }
*::-webkit-scrollbar-button { background-color: #f7f7f7; }
*::-webkit-scrollbar-track { background-color: #F97316; }
*::-webkit-scrollbar-track-piece { background-color: #f7f7f7; }
*::-webkit-scrollbar-thumb { height: 50px; background-color: #F97316; border-radius: 2px; }
*::-webkit-scrollbar-corner { background-color: #F97316; }
*::-webkit-resizer { background-color: #666; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  padding: clamp(12px, 3vw, 28px);
}

.wrapper {
  border-radius: 30px;
  box-shadow: 5px 5px 30px 1px #919191;
  position: relative;
  width: min(1066px, 100%);
  overflow: hidden;
  background: #fff;
}

.comingsoon {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  body{
    display: grid !important;
    place-items: center !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    padding-top: calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-bottom)) !important;
  }
  .wrapper{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .wrapper {
    border-radius: 20px;
  }
}