@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

html, body {
  margin: 0;
  padding: 0;
}

.page {
  position:fixed;
  width: 100%;
  height: 100%;
  transition: transform 1s;
}

#x1y1 {  /* Main */
  left: 0;
  top: 0;
  background-color: #FFE787;
}

#x0y1 { /* Twitch */
  left: -100%;
  top: 0;
  background-color: #9147FF;
}

#x2y1 {
  left: 100%;
  top: 0;
  background-color: #E1306C;
}

#x1y0 {
  left: 0;
  top: -100%;
}

#x1y2 {
  left: 0;
  top: 100%;
}

.pfp, .title, .name, .nameshadow, .navbutton {
  position: absolute;
}

.pfp {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.title, .name {
  font-family: "Josefin Sans", sans-serif;
  font-weight: bold;
  text-align: right;
}

.titleshadow {
  -webkit-text-stroke: 0.2em black;
}
.title {
  left: 0.25em;
  top: 0.25em;
}

.navbutton {
  width: 8vmax;
  height: 8vmax;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.navbutton.left {
  left: 1vmin;
  top: calc(50vh - 4vmax);
  background-image: url(resources/left.png);
}

.navbutton.right {
  right: 1vmin;
  top: calc(50vh - 4vmax);
  background-image: url(resources/right.png);
}

@media screen and (orientation: portrait) and (min-width: 721px) {                           /* PCs and tablets in portrait orientation */

}

@media screen and (orientation: landscape) and (min-height: 721px) {                         /* PCs and tablets in landscape orientation */
  .pfp {
    width: 65vh;
    height: 65vh;
    left: 1.5rem;
    top: 1.5rem;
  }
}

@media screen and (((orientation: portrait) and (max-width: 720px)) or ((orientation: landscape) and (max-height: 720px))) {
  .navbutton {
    transform: scale(0.5);
    opacity: 0.5;
  }
}

@media screen and (orientation: portrait) and (max-width: 720px) {                           /* Phones in portrait orientation */
  .title {
    font-size: 12vw;
  }

  .page:not(#x1y1) .pfp {
    left: 3vmin;
    top: 3vmin;
    width: 94vmin;
    height: 94vmin;
  }

  .page:not(#x1y1) .name {
    width: 100vw;
    font-size: 11vw;
    text-align: center;
    top: 90vmin;
  }
}

/*=== x1y1 | Main ==========================================================================*/

#x1y1 .pfp {
  background-image: url('resources/pfp.jpg');
  border-radius: 100%;
}

#x1y1 .nameshadow {
  -webkit-text-stroke: 0.05em #FFE787;
}

#x1y1 ul {
  position: absolute;
}
#x1y1 li {
  font-family: 'Nunito';
  font-weight: bold;
}

#x1y1 p {
  position: absolute;
  font-family: 'Nunito';
  font-weight: 600;
  font-size: larger;
  padding: 0.5rem 1rem;
}

@media screen and (orientation: portrait) and (min-width: 721px) {                           /* PCs and tablets in portrait orientation */
  
}
@media screen and (orientation: landscape) and (min-height: 721px) {                         /* PCs and tablets in landscape orientation */
  #x1y1 .name {
    font-size: 12vh;
    top: 45vh;
    right: 60vw;
  }

  #x1y1 ul {
    bottom: 0;
    left: 3rem;
    font-size: 3.7rem;
  }

  #x1y1 p {
    left: 46vw;
    font-size: xx-large;
    letter-spacing: 0.2rem;
  }
}

@media screen and (orientation: portrait) and (max-width: 720px) {                           /* PCs and tablets in portrait orientation */
  #x1y1 .pfp {
    width: 5cm;
    height: 5cm;
    left: 0.5rem;
    top: 1.5rem;
  }

  #x1y1 .name {
    font-size: 16vw;
    top: 1em;
    right: 1rem;
  }

  #x1y1 ul {
    top: 5.5cm;
    font-size: x-large;
  }
}
@media screen and (orientation: landscape) and (max-height: 720px) {                         /* PCs and tablets in landscape orientation */
  #x1y1 .pfp {
    width: 45vh;
    height: 45vh;
    left: 0.5rem;
    top: 1.5rem;
  }

  #x1y1 .name {
    font-size: 16vh;
    top: 1em;
    right: calc(50vw + 1rem);
  }

  #x1y1 ul {
    bottom: 0;
  }
  #x1y1 li {
    font-size: 6vh;
  }

  #x1y1 p {
    left: 50vw;
  }
}

@media screen and (orientation: portrait) and (max-width: 720px) and (min-width: 351px) {    /* Modern phones in portrait orientation */
  #x1y1 ul {
    font-size: x-large;
  }

  #x1y1 p {
    top: 50vh;
  }
}
@media screen and (orientation: landscape) and (max-height: 720px) and (min-height: 351px) { /* Modern phones in landscape orientation */
  
}

@media screen and (orientation: portrait) and (max-width: 350px) {                           /* Low-resolution phones in portrait orientation */
  #x1y1 ul {
    font-size: large;
  }
  #x1y1 p {
    bottom: 0;
    font-size: medium;
  }
}
@media screen and (orientation: landscape) and (max-height: 350px) {                         /* Low-resolution phones in landscape orientation */
  
}

/*=== x0y1 | Twitch =======================================================================*/

#x0y1 .pfp {
  background-image: url('https://static-cdn.jtvnw.net/jtv_user_pictures/571cf076-873a-49da-805b-2715aa8d595a-profile_image-600x600.png');
}

#x0y1 .title {
  color: #9147FF;
}

#x0y1 .nameshadow {
  -webkit-text-stroke: 0.1em #9147FF;
}
#x0y1 .name {
  transition: color 0.2s;
}
#x0y1 .pfp:hover, #x0y1 .nameshadow:hover, #x0y1 .name:hover {
  cursor: pointer;
}
#x0y1 .pfp:hover ~ .name, #x0y1 .name:hover {
  color: #ffffff;
}

@media screen and (orientation: portrait) and (min-width: 721px) {                           /* PCs and tablets in portrait orientation */
  
}
@media screen and (orientation: landscape) and (min-height: 721px) {                         /* PCs and tablets in landscape orientation */
  #x0y1 .title {
    font-size: 12vh;
  }

  #x0y1 .name {
    font-size: 9vh;
    left: 0.25em;
    top: 57vh;
  }
}

/*=== x2y1 | Instagram =====================================================================*/

#x2y1 .pfp {
  background-image: url('resources/favicon_io_1/android-chrome-512x512.png');
  border-radius: 100%;
}

#x2y1 .title {
  background-image: linear-gradient(72.44deg, #FF7A00 11.92%, #FF0169 51.56%, #D300C5 85.69%);
  background-clip: text;
  color: transparent;
}

#x2y1 .nameshadow {
  -webkit-text-stroke: 0.1em black;
}
#x2y1 .name {
  background-image: linear-gradient(72.44deg, #FF7A00 11.92%, #FF0169 51.56%, #D300C5 85.69%);
  background-clip: text;
  color: transparent;
  opacity: 1;
  transition: opacity 1s;
}
#x2y1 .name.hover {
  background-image: linear-gradient(-72.44deg, #FFBD80 11.92%, #FF80B5 51.56%, #D480CE 85.69%);
}
#x2y1 .pfp:hover, #x2y1 .nameshadow:hover, #x2y1 .name:hover {
  cursor: pointer;
}
#x2y1 .pfp:hover ~ .name.foreground, #x2y1 .name.foreground:hover {
  opacity: 0;
}

@media screen and (orientation: portrait) and (min-width: 721px) {                           /* PCs and tablets in portrait orientation */
  
}
@media screen and (orientation: landscape) and (min-height: 721px) {                         /* PCs and tablets in landscape orientation */
  #x2y1 .title {
    font-size: 12vh;
  }

  #x2y1 .name {
    font-size: 9vh;
    left: 0.25em;
    top: 57vh;
  }
}