:root {
  --white: 255, 255, 255;
  --purple: 117, 19, 93;
  --color-white: rgb(var(--white));
  --color-white-opaque: rgba(var(--white), 07);
  --color-purple: rgb(var(--purple));
  --color-purple-opaque: rgba(var(--purple), 0.7);
  --color-white-smoke: rgb(245, 245, 245);
  --color-grey: rgb(162, 162, 162);
  --linear-gradient: linear-gradient(
    135deg,
    var(--color-purple-opaque) 31vw,
    transparent 31vw,
    transparent
  );
}

html {
  font-size: 62.5%;

  @media only screen and (max-width: 1200px) {
    font-size: 50%;
  }
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inria Serif", serif;
  text-align: center;
}

h2 {
  font-size: 6.5rem;
  color: var(--color-white-opaque);

  @media only screen and (max-width: 700px) {
    font-size: 4.4rem;
  }
}

header {
  -webkit-clip-path: polygon(0 0, 30vw 0, 0 30vw);
  clip-path: polygon(0 0, 30vw 0, 0 30vw);
  width: 100vw;
  height: 100vw;
  position: fixed;
  background-color: var(--color-purple);
  color: var(--color-white);
  font-size: 5vw;
  mix-blend-mode: multiply;

  & > span {
    margin: 3vw;
    width: 10vw;
    height: 10vw;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    /* position of letter */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

section {
  &:nth-child(odd) {
    height: 100vh;
    width: 100%;
    /* the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* position parallax text */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:nth-child(even) {
    background-color: var(--color-white-smoke);
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 3rem;

    @media only screen and (max-width: 1000px) {
      height: 40vh;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }

  & p {
    font-size: 2.4rem;
    color: var(--color-grey);
    width: 16%;
    text-align: left;
    padding-right: 10rem;

    @media only screen and (max-width: 1000px) {
      max-width: 500px;
      width: 90%;
      text-align: center;
      padding-right: 0;
    }
  }

  & aside {
    align-self: flex-end;
    font-size: 1.7rem;
    font-family: "Muli", sans-serif;
    color: var(--color-purple-opaque);
    transform: rotate(-90deg);
    transform-origin: top left;

    @media only screen and (max-width: 1000px) {
      align-self: center;
      font-size: 1.7rem;
      transform: rotate(0deg);
      transform-origin: top left;
    }
  }
}

#parallax-1 {
  background-image: var(--linear-gradient), url("./El_Condoriri_trek.jpeg");
}

#parallax-2 {
  background-image: var(--linear-gradient), url("./Illiniza_Norte.jpeg");
}

#parallax-3 {
  background-image: var(--linear-gradient), url("./El_Chachani_summit.jpeg");
}