/* MAIN PAGE */
html {
  scroll-snap-type: y mandatory;
}

.pc-snap {
  height: 100vh;
  width: 100%;
  max-width: calc(100vh * 1.8);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
}

body {
  background: floralwhite;
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans', 'Helvetica', sans-serif;
  color: #191918;
  max-width: 100vw;
  overflow-x: clip;
}

img[alt] {
  font-family: 'Noto Sans', 'Helvetica', sans-serif;
  font-style: italic;
}

img {
  max-width: 100%;
  height: auto;
  align-self: center;
}

a:hover img {
  transform: scale(1.05);
  transition: all 0.1s;
}

.title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  max-width: 70%;
  margin: 0 auto;
}

.title div {
  max-width: 100%;
  padding: 2%;
  padding-bottom: 0%;
}

.title img {
  padding: 1.5%;
}

.your {
  position: relative;
  filter: invert(0);
}

.clickable-area {
  position: absolute;
  top: 68%;
  left: 62%;
  width: 10%;
  height: 22%;
  /* cursor: pointer; */
  /* background-color: rgba(255, 0, 0, 0.5); */
}

.llinks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  max-width: 90%;
  margin: 0 auto;
}

.disc {
  max-width: 25%;
}

.llinks a {
  padding-left: 1.5%;
  padding-right: 1.5%;
}

.photo {
  max-width: 12%;
}

.video {
  max-width: 12%;
}

.merch {
  max-width: 22%;
}

.links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 14%;
  margin: 0 auto;
  padding-bottom: 2%;
}

.elinks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 45%;
  margin: 0 auto;
  padding-bottom: 0%;
  padding-top: 1%;
}

.elinks>a {
  max-width: 14%;
  padding: 1.5%;
}

.welcome {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 90%;
  margin: 0 auto;
}

.welcome-photo {
  max-width: 30%;
  padding: 1%;
  padding-bottom: 3%;
}

.welcome-text {
  max-width: 37%;
  padding-top: 0%;
  padding-left: 2.5%;
  padding-bottom: 3%;
  font-size: min(.95vw, 1.65vh)
}

.welcome-text a {
  font-weight: bold;
  color: unset;
  text-decoration: none;
}

/* DISCOGRAPHY PAGE */
.dis_title {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dis_title a {
  max-width: 30%;
}

.release_type {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 1%;
}

.release_type {
  padding-top: 2%;
  max-width: 25%;
  margin: 0 auto;
}

.releases {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 3%;
  max-width: 90%;
  margin: 0 auto;
}

.rel_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 25%;
  padding-top: 3%;
  padding-right: 2%;
  padding-left: 2%;
}

.rel_name, .year {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 100%;
}

.rel_name img {
  padding-top: 2%;
}

.year {
  margin: 0 auto;
  max-width: 25%;
  padding-top: 2%;
}

/*  MERCH PAGE */
.merch_title {
  max-width: 30%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  padding-bottom: 5%;
}

.shops {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 3%;
  max-width: 80%;
  margin: 0 auto;
}

.ru_shop {
  max-width: 35%;
}

.eu_shop {
  max-width: 30%;
}

.us_shop {
  max-width: 30%;
}

/* VIDEO PAGE */
.dis_title.photo {
  max-width: 50%;
  padding-top: 1%;
  margin: 0 auto;
  margin-bottom: -2%;
}

.year.vid {
  max-width: 25%;
}

.first_vid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  margin: 0;
  max-width: 100%;
  height: 100%;
}

/* SECRET PAGE */
.title>.path_w {
  max-width: 40%;
}

.welcome_path_w {
  position: relative;
  max-width: 40%;
  margin: 0 auto;
  padding-top: 2%;
  filter: invert(0);
}

.clickable-area-2 {
  position: absolute;
  top: 73%;
  left: 71%;
  width: 30%;
  height: 20%;
  /* cursor: pointer; */
  /* background-color: rgba(255, 0, 0, 0.5); */
}

/* MOBILE VIEW */
/* @media screen and (max-width: 992px) and (orientation: portrait) { */
@media (pointer: coarse) {
  html {
    scroll-snap-type: None;
  }
}

@media screen and (max-aspect-ratio: 1/1) and (orientation: portrait) {

  /* MAIN */
  html {
    scroll-snap-type: None;
  }

  .pc-snap {
    height: auto;
    width: auto;
  }

  .mob-snap {
    height: 100vh;
    width: 100vw;
    max-width: calc(100vh * 0.5);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: auto;
  }

  .mob-snap-last {
    width: 100vw;
    max-width: calc(100vh * 0.5);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: auto;
  }

  .title {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: None;
    padding-right: None;
    max-width: 80%;
  }

  .title>.eyes {
    max-width: 60%;
    margin-top: -5%;
  }

  .clickable-area {
    position: absolute;
    top: 66%;
    left: 63.5%;
    width: 10%;
    height: 23%;
  }

  .llinks {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .llinks>a {
    padding: 2%;
    max-width: 100%;
  }

  .llinks>.photo {
    max-width: 40%;
  }

  .llinks>.video {
    max-width: 40%;
  }

  .llinks>.merch {
    max-width: 75%;
  }

  .elinks {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 90%;
    margin: 0 auto;
    margin-top: -5%;
  }

  .elinks a {
    max-width: 30%;
    padding: 1.5%;
  }

  .welcome {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    padding-top: 5%;
  }

  .welcome-photo {
    max-width: 90%;
  }

  .welcome-text {
    max-width: 90%;
    margin: 0 auto;
    font-size: 90%;
  }

  /* DISCOGRAPHY */
  .dis_title, .release_type {
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 2%;
  }

  .dis_title a {
    max-width: 100%;
  }

  .release_type {
    padding-bottom: 5%;
    max-width: 80%;
    margin: 0 auto;
  }

  .releases {
    flex-direction: column;
    max-width: 100%;
    padding-bottom: 10%;
  }

  .rel_column {
    max-width: 80%;
    margin: 0 auto;
    padding-bottom: 10%;
  }

  /* VIDEO PAGE */
  .dis_title.photo {
    max-width: 40%;
  }

  .year.vid {
    max-width: 70%;
  }

  .pc-snap.vid {
    height: 50vmax;
    width: 100vmax;
  }

  .pc-snap.mob-snap.vid {
    height: 100vmax;
    width: 100vmax;
  }

  .first_vid {
    height: 50vmax;
    width: 100vmax;
  }

  /* MERCH PAGE */
  .merch_title {
    max-width: 90%;
  }

  .shops {
    flex-direction: column;
    padding-bottom: 3%;
    max-width: 90%;
  }

  .ru_shop {
    max-width: 95%;
    margin: 0 auto;
    padding-bottom: 15%;
  }

  .eu_shop {
    max-width: 90%;
    margin: 0 auto;
    padding-bottom: 15%;
  }

  .us_shop {
    max-width: 90%;
    margin: 0 auto;
    padding-bottom: 15%;
  }

  /* SECRET PAGE */
  .title {
    max-width: 90%;
  }

  .title>.path_w {
    max-width: 100%;
    padding-bottom: 10%;
  }

  .elinks.secret {
    max-width: 75%;
  }

  .welcome_path_w {
    padding-top: 10%;
    max-width: 95%;
    padding-bottom: 20%;
  }

  .clickable-area-2 {
    top: 45%;
  }
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  img, .flowers, .your, .eyes, .path_w, .welcome-photo, .cover, p {
    filter: invert(1) hue-rotate(180deg);
  }

  body {
    background: #282828;
  }
}