@font-face {
  font-family: "TitanOne";
  src: url("./assets/TitanOne-Regular.woff"); }
::-moz-selection {
  background-color: #ff990065; }

::selection {
  background-color: #ff990065; }

.gradient-pink {
  background: linear-gradient(359.43deg, #ffbfe7 2.93%, #ff349b 97.56%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

.gradient-yellow {
  background: linear-gradient(162.62deg, #ffcd20 27.09%, #ffe874 73.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

* {
  margin: 0;
  text-decoration: none;
  color: #000000;
  box-sizing: border-box;
  font-weight: normal; }

body {
  position: relative;
  height: 100%;
  width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-width: 420px;
  justify-content: center;
  background: center/cover no-repeat url(./assets/pop-bg.png);
  font-family: "TitanOne", serif; }
  body::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 20%;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); }

.hider {
  position: absolute;
  inset: 0;
  background-color: white;
  opacity: 1;
  z-index: 100;
  transition: opacity 0.1s linear; }

.pop-header {
  position: absolute;
  top: 0;
  z-index: 10;
  font-size: calc( 25.8px + 60.2 * ((100vw - 420px) / 1500) );
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }
  @media (min-aspect-ratio: 7 / 3) {
    .pop-header {
      font-size: calc( 25.8px + 60.2* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) {
    .pop-header {
      font-size: calc( 25.8px + 60.2 * ((100vw - 420px) / 1500* 2) ); } }
  @media (max-aspect-ratio: 1) {
    .pop-header {
      flex-direction: column;
      padding: 2%; } }
  .pop-header p {
    -webkit-filter: drop-shadow(0rem 0rem 1.5vh #000000) drop-shadow(0rem 0.7vh 0rem #f22c90);
    filter: drop-shadow(0rem 0rem 1.5vh #000000) drop-shadow(0rem 0.7vh 0rem #f22c90);
    padding-bottom: 2vh; }
  .pop-header .logo {
    width: 12%;
    -webkit-animation: play 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    animation: play 2s linear infinite;
    -webkit-filter: drop-shadow(0rem 0rem 1rem #47c8ff);
    filter: drop-shadow(0rem 0rem 1rem #47c8ff); }
    @media (max-aspect-ratio: 1.4) {
      .pop-header .logo {
        width: 20%; } }
    @media (max-aspect-ratio: 1) {
      .pop-header .logo {
        width: 30%; } }
  .pop-header .spacer {
    width: 12%; }

.pop-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.5vh;
  min-height: 30vw;
  overflow: hidden;
  font-weight: 800;
  background: center/cover no-repeat url(./assets/pop-bg.png); }
  @media (max-aspect-ratio: 1) {
    .pop-cards {
      flex-direction: column;
      overflow: unset; } }

.card {
  width: 25%;
  position: relative;
  cursor: pointer;
  transition: width 0.3s linear;
  overflow: hidden;
  min-height: 30vw;
  height: 100vh; }
  @media (max-aspect-ratio: 1) {
    .card {
      width: 100%;
      min-height: 90vh;
      height: 90vh; } }
  .card:hover {
    width: 170%; }
    @media (max-aspect-ratio: 1.4) {
      .card:hover {
        width: 100%; } }
  .card p {
    position: absolute;
    color: #fff;
    right: 1vh;
    bottom: 3vh;
    z-index: 11;
    font-size: calc( 22.2px + 51.8 * ((100vw - 420px) / 1500) );
    height: 50%;
    text-transform: uppercase;
    -webkit-writing-mode: sideways-lr;
    -ms-writing-mode: sideways-lr;
    writing-mode: sideways-lr;
    -webkit-filter: drop-shadow(0rem 0rem 1vh #000000b0) drop-shadow(0rem 0.4vh 0rem #ca6900);
    filter: drop-shadow(0rem 0rem 1vh #000000b0) drop-shadow(0rem 0.7vh 0rem #ca6900); }
    @media (min-aspect-ratio: 7 / 3) {
      .card p {
        font-size: calc( 22.2px + 51.8* 0.8 * ((100vw - 420px) / 1500) ); } }
    @media (max-aspect-ratio: 1) {
      .card p {
        font-size: calc( 22.2px + 51.8 * ((100vw - 420px) / 1500* 2) ); } }
    @media (max-aspect-ratio: 1) {
      .card p {
        right: 5%;
        font-size: calc( 30px + 70 * ((100vw - 420px) / 1500) );
        -webkit-writing-mode: unset;
        -ms-writing-mode: unset;
        writing-mode: unset;
        height: unset; } }
  @media (max-aspect-ratio: 1) and (min-aspect-ratio: 7 / 3) {
    .card p {
      font-size: calc( 30px + 70* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) and (max-aspect-ratio: 1) {
    .card p {
      font-size: calc( 30px + 70 * ((100vw - 420px) / 1500* 2) ); } }

.card-girl-1 {
  background: center/cover no-repeat url(./assets/Girl1-bg.png);
  background-position-x: 80%; }

.card-girl-2 {
  background: center/cover no-repeat url(./assets/Girl2-bg.png); }

.card-girl-3 {
  background: center/cover no-repeat url(./assets/Girl3-bg.png); }

.card-girl-4 {
  background: center/cover no-repeat url(./assets/Girl4-bg.png); }

.de .pop-header,
.fr .pop-header,
.ro .pop-header {
  font-size: calc( 22.2px + 51.8 * ((100vw - 420px) / 1500) ); }
  @media (min-aspect-ratio: 7 / 3) {
    .de .pop-header,
    .fr .pop-header,
    .ro .pop-header {
      font-size: calc( 22.2px + 51.8* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) {
    .de .pop-header,
    .fr .pop-header,
    .ro .pop-header {
      font-size: calc( 22.2px + 51.8 * ((100vw - 420px) / 1500* 2) ); } }
.de .card p,
.fr .card p,
.ro .card p {
  font-size: calc( 21px + 49 * ((100vw - 420px) / 1500) ); }
  @media (min-aspect-ratio: 7 / 3) {
    .de .card p,
    .fr .card p,
    .ro .card p {
      font-size: calc( 21px + 49* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) {
    .de .card p,
    .fr .card p,
    .ro .card p {
      font-size: calc( 21px + 49 * ((100vw - 420px) / 1500* 2) ); } }

.es .pop-header,
.it .pop-header,
.pt .pop-header,
.cz .pop-header {
  font-size: calc( 21px + 49 * ((100vw - 420px) / 1500) ); }
  @media (min-aspect-ratio: 7 / 3) {
    .es .pop-header,
    .it .pop-header,
    .pt .pop-header,
    .cz .pop-header {
      font-size: calc( 21px + 49* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) {
    .es .pop-header,
    .it .pop-header,
    .pt .pop-header,
    .cz .pop-header {
      font-size: calc( 21px + 49 * ((100vw - 420px) / 1500* 2) ); } }
.es .card p,
.it .card p,
.pt .card p,
.cz .card p {
  font-size: calc( 21px + 49 * ((100vw - 420px) / 1500) ); }
  @media (min-aspect-ratio: 7 / 3) {
    .es .card p,
    .it .card p,
    .pt .card p,
    .cz .card p {
      font-size: calc( 21px + 49* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) {
    .es .card p,
    .it .card p,
    .pt .card p,
    .cz .card p {
      font-size: calc( 21px + 49 * ((100vw - 420px) / 1500* 2) ); } }

.pl .pop-header {
  font-size: calc( 18.6px + 43.4 * ((100vw - 420px) / 1500) ); }
  @media (min-aspect-ratio: 7 / 3) {
    .pl .pop-header {
      font-size: calc( 18.6px + 43.4* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) {
    .pl .pop-header {
      font-size: calc( 18.6px + 43.4 * ((100vw - 420px) / 1500* 2) ); } }
.pl .card p {
  font-size: calc( 21px + 49 * ((100vw - 420px) / 1500) ); }
  @media (min-aspect-ratio: 7 / 3) {
    .pl .card p {
      font-size: calc( 21px + 49* 0.8 * ((100vw - 420px) / 1500) ); } }
  @media (max-aspect-ratio: 1) {
    .pl .card p {
      font-size: calc( 21px + 49 * ((100vw - 420px) / 1500* 2) ); } }

@-webkit-keyframes play {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }
@keyframes play {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05);
    translate: 0 3%; }
  100% {
    transform: scale(1); } }

/*# sourceMappingURL=style.css.map */