:root
{
  --max-width: 300px;
}

*:not(input) {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

body{
    margin:0;
    padding:0;
    background-color: rgb(0,0,80);
    background-image: url("/img/19764-ISE2024-0122-Fireworks-1920x1080px-V1.webp");
    background-repeat: no-repeat;
    background-size: cover;
    color:white;
    text-align: center;
    height:auto;
    min-height:100vh;
    overflow-y:auto;
}
body:has(.sub-sub-slide-item.touch.fadeIn)
{
  min-height: -webkit-fill-available;
  overflow:hidden;
  height:100vh;
}

body:has(.sub-sub-slide-item.touch.fadeIn) .logo
{
  display:none;
}

a,
a:link,
a:visited,
a:active
{
  color:black;
  font-weight: 500;
}
a:hover
{
  text-decoration: none;
}


#app
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.main .container
{
  width:100vw;

}
.btn-main,
.btn-form,
#sendImage
{
  background: white;
  border-radius: .5rem;
  border-color: white;
  color: #2155A4;
  margin: 1rem 0;
  width:100%;
  max-width: 300px;
  font-weight: 500;
}
.btn-gold {
  margin-top: 1rem;
  background-color: #FFD700;
  border-color: #FFD700;
  color: #fff;
}

#upload {
  display: inline-block;
  background: white;
  border-radius: .5rem;
  border-color: white;
  color: #2155A4;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width:100%;
}

.btn-main:hover,
.btn-form:hover
{
  background: white;
  border: var(--bs-btn-border-width) solid white;
  color: rgb(0,0,80);
}


.slide-item,
.sub-slide-item,
.sub-sub-slide-item {
  opacity: 0;
  display:none;
  transition: opacity .4s;

}
.fadeIn{
  opacity: 100%;
  transition: opacity .4s;

}

.svg-preset
{
  /* filter: invert(1); */
  width:50px;
  cursor:pointer;
  /* margin-top:.5em;
  margin-bottom:.5em; */
  margin: .5em 1em;
}

.svg-firework
{
  border-radius: .5rem;
  width:50px;
  height:50px;
  cursor:pointer;
  display: inline-block;
  margin-top:3em;
  margin-bottom:3em;
}

.rotate_device
{
  max-width:150px;
  display:inline-block;
  margin-top:8em;
  margin-bottom:8em;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.touch {
  width:100vw;
}
.touch .d-flex
{
  justify-content: center;
  display:flex;
  flex-wrap: wrap;
}

.touch .btn-main
{
    max-width: 100px;
}

.button_wrapper
{
  width:100%;
}

.touchpad
{
  opacity: .5;
  border-radius: .5rem;
  justify-content: center;
  display: flex;
  align-items: center;
  --r: 1920 / 1103;
  aspect-ratio: var(--r);
  width:min(100%, min(1920px, 65vh*(var(--r))));
  cursor:pointer;
  background-image: url("/img/Muxwave_BG.svg");

}
.touchpad h1
{
  font-size: 2rem;
}

/* Image-Text */
#email
{
  /* margin-top:1em;
  margin-bottom:1em; */
}
/* logo */
.logo{
  max-width: 350px;
}

.price-container{
  max-width: var(--max-width);
}
.price-form{
  max-width: var(--max-width);
}
.price-text{
  max-width: var(--max-width);
}
/* sticker */
#emoji-container{
  max-width: 600px;
}
/* small phone height */
@media screen and ( max-height: 600px ){
  .price-text{
    font-size: .5;
  }
}

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
#image-text
{
  width:100%;
  max-width: var(--max-width);
}
#upload {
    opacity: 0;
    position: absolute;
    height:100%;
}

.image-area {
    border: 1px solid white;
    position: relative;
    max-width:var(--max-width);
    max-height:var(--max-width);
    width:100%;
    height:auto;
    border-radius: .5rem;
    overflow: hidden;
}

.image-area::before {
    content: 'Select Image';
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    z-index: -1;
}

.image-area img {
    z-index: 2;
    max-width: 100%;
    height: auto;
    width:100%;
    aspect-ratio:1;
    object-fit: cover; /* or object-fit: contain; */

}

@media screen and ( min-height: 768px ){
  #start .btn-main
  {
    margin:1rem;
  }
}