/* Page: Intro (#page-intro) */

/* This is to offset the padding-top:128px from #main-content-actual */
#page-intro{
  margin-top:-96px;
}
.langmode-en #page-intro{
  margin-top:-128px;
}

#intro-mpn2-subtitle{
  font-size:2.8em;
  font-weight:700;
  font-style:italic;
  margin-bottom:12px;
  white-space: nowrap;
  text-align:center;
}
#intro-text-tagline{
  font-size:2.0em;
  font-weight:700;
  text-align:center;
}

#ticket{
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center;
  width:250px;
  aspect-ratio:1.25;
  font-size:1.5em;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:32px;
  margin-top:64px;
  margin-bottom:64px;
  transition-property: transform, margin-bottom, filter;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transform:rotate(10deg);
  pointer-events:auto;
  color:var(--color-text-dark);
}
.anim-disabled #ticket{
  transition-duration:0s;
}
body.langmode-ko #ticket{
  background-image : url("/sprites/OBJ-003_DeformedKR_PaperEdit-260106_RszW500.png");
}
body.langmode-en #ticket{
  background-image : url("/sprites/OBJ-003_DeformedEN_PaperEdit-260106_RszW500.png");
}
#ticket.css-filters{
  filter:brightness(100%) drop-shadow(8px 8px 10px #00000080);
}
@media ((hover: hover) and (pointer: fine)) {
  #ticket:hover{
    transform:rotate(0deg);
  }
  #ticket.css-filters:hover{
    filter:brightness(120%) drop-shadow(0 0 8px #ffff85);
  }
}

#countdown-display{
  text-align:center;
}

#countdown-display > .lang-ko{
  font-size:1.4em;
}
#countdown-display > .lang-ko > .dday{
  font-family:"DM Mono";
  font-weight:bold;
}

#countdown-display > .lang-en > .countdown-numeral{
  font-family:"DM Mono";
  font-weight:bold;
  font-size:1.4em;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
  
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
  #intro-mpn2-subtitle{
    font-size:2.5em;
  }
  #intro-text-tagline{
    font-size:1.8em;
  }
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
  #intro-mpn2-subtitle{
    font-size:2.0em;
  }
  #intro-text-tagline{
    font-size:1.5em;
  }
}