:root {
  --design-width: 1080;
  --design-height: 1920;
  --ui-scale-multiplier: 1.6;
}

* {
    box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: grid;
  place-items: center;
}

.black_fill {
  fill: #12120D;
}
.black_bg {
  background-color: #12120D;
}
.prim_fill {
  fill: #fff000;
}
.prim_bg {
  background-color: #fff000;
}
.schraffur {
  background: hsl(0deg 0% 0% / 88%) repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0.15) 10px, transparent 10px, transparent 20px);
}
.ratio-9x16 {
  aspect-ratio: 1 / 1.6;
  height: min(100vh, calc(100vw * (16 / 9)));
  width: auto;
  max-width: 100vw;
  max-height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  --ui-scale: calc(var(--ui-scale-multiplier) * min(calc(100vw / var(--design-width)), calc(100vh / var(--design-height))));
}

#app {

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

section#header,
section#footer {
  width: 100%;
  height: 30%;
}
section#main {
    width: 100%;
    height: 40%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
section#header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: calc(var(--ui-scale) * 100) calc(var(--ui-scale) * 64);
}
section#header h1,
section#header .subline {
    animation: ItemFadeIn 600ms ease-out both;
    animation-delay: 200ms; /* <- delay here */
}
section#footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
}
section#footer #footer_body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    height: -webkit-fill-available;
    padding: 0;

}
section#footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: calc(var(--ui-scale) * 110) calc(var(--ui-scale) * 48) calc(var(--ui-scale) * 64);
}
section#footer.black {
    background: #fff000 url('/../assets/img/footer_bg_black.svg') no-repeat top center;
    background-size: cover;
}
section#footer.prim {
      background: #12120D url('/../assets/img/footer_bg_prim.svg') no-repeat top center;
    background-size: cover;
}
img#footer_logo {
  width: calc(var(--ui-scale) * 200);
  height: auto;
}

/* HOME */
#flag_container {
  display: flex;
  flex-direction: row;
  gap: calc(var(--ui-scale) * 80);
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--ui-scale) * 50);
  width: 100%;
    animation: ItemFadeIn 600ms ease-out both;
  animation-delay: 600ms; /* <- delay here */
}

#flag_container a.l2_flag_item img {
  width: calc(var(--ui-scale) * 200);
  height: auto;
  transition: width .4s ease-in-out;
}

/* #flag_container a.l2_flag_item:hover img {
  width: calc(var(--ui-scale) * 220);
  height: auto;
} */

/* AVATAR SELECTION */
#avatar_sel_container {
  display: flex;
  flex-direction: row;
  gap: calc(var(--ui-scale) * 40);
  align-items: center;
  justify-content: center;s
  margin-top: calc(var(--ui-scale) * 30);
  width: 100%;
  animation: ItemFadeIn 600ms ease-out both;
  animation-delay: 600ms; /* <- delay here */
}
a.avatar_sel_item {
  width: calc((88% / 2) - (var(--ui-scale) * 80));
  height: auto;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  text-decoration: none;
  border-radius: calc(var(--ui-scale) * 16);
  box-shadow: 0 0 calc(var(--ui-scale) * 8) 0 rgba(0, 0, 0, 0.25);
  transition: width .4s ease-in-out;
}
/* a.avatar_sel_item:hover {
  width: calc((75% / 2) - (var(--ui-scale) * 80));
} */
.avatar_sel_item img {
  width: 100%;
  border-radius: calc(var(--ui-scale) * 16) calc(var(--ui-scale) * 16) 0 0;
}
.avatar_sel_txt_body {
  background-color: #fff;
  padding: calc(var(--ui-scale) * 16);
  border-radius: 0 0 calc(var(--ui-scale) * 16) calc(var(--ui-scale) * 16) ;
  text-align: center;
}
.avatar_sel_txt_body_name {
  color:#000;
  font-size: calc(var(--ui-scale) * 32);
  font-style: normal;
  font-weight: 700;
  line-height: calc(var(--ui-scale) * 32);
  text-decoration: none;
}
.avatar_sel_txt_body_desc {
  color:#000;
  font-size: calc(var(--ui-scale) * 24);
  font-style: normal;
  font-weight: 500;
  line-height: calc(var(--ui-scale) * 24);
  text-decoration: none;
}
#back_btn_container {
  margin-top: calc(var(--ui-scale) * 48);
      animation: ItemFadeIn 600ms ease-out both;
    animation-delay: 1000ms; /* <- delay here */
}
a.nav_btn_simple {
  color: #fff000;
  background-color: #000;
  font-size: calc(var(--ui-scale) * 16);
  font-style: normal;
  font-weight: 500;
  line-height: calc(var(--ui-scale) * 24);
  text-decoration: none;
  transition: font-size .3s ease-in-out;
  animation: ItemFadeIn 600ms ease-out both;
  animation-delay: 1000ms;
  padding: 1vh 2vh;
  border-radius: 50vw;
}
.black_bg a.nav_btn_simple {
color: #000;
background-color: #fff000;
}
/* a.nav_btn_simple:hover {
  font-size: calc(var(--ui-scale) * 18);
  text-decoration: underline;
} */


/* SOLO PAGE */

section#main_solo {
  margin: 0;
  padding: 0;
  height: calc(70% - (var(--ui-scale) * 160));
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
#avatar_solo_iframe {
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: none;
  z-index: 2;
}

#solo_nav_bar {
  width: 100%;
  height: calc(var(--ui-scale) * 160);
  padding: calc(var(--ui-scale) * 28) calc(var(--ui-scale) * 64);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}
#main_solo_fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--ui-scale) * 30);
  margin: 0;
  padding: 0;
  background: #12120D;
  background: linear-gradient(0deg, rgba(18, 18, 13, 1) 20%, rgba(18, 18, 13, 0) 100%);
}

#solo_footer_heading {
  align-self: flex-start;
    animation: ItemFadeIn 600ms ease-out both;
  animation-delay: 1200ms; /* <- delay here */
}


#touch_cta {
    position: absolute;
    display: flex;
    width: calc(var(--ui-scale) * 150);
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: #fff000;
    border-radius: calc(var(--ui-scale) * 100);
    color: #000;
    text-transform: uppercase;
    font-size: calc(var(--ui-scale) * 24);
    font-weight: 600;
    line-height: calc(var(--ui-scale) * 25);
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: calc(50% - (var(--ui-scale) * 79));
    pointer-events: none;
      transform-origin: center;
  animation: touchCtaPulse 1.2s ease-in-out infinite;
  will-change: transform;
}


@keyframes ItemFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}