html>body>div {padding: 0;}
#headerwrapper {
  background-image: url("../img/index/sky.webp"); background-size:auto 100%;
  padding: 0 0 15rem; position: relative;
  display: flex; flex-direction: column;
  &::after {
    content: ''; width: 100%; height: 11rem;
    background-image: url("../img/index/mountains.webp");
    position: absolute; bottom: 0; left: 0;
  }
  #headerstars>img {
    position: absolute; mix-blend-mode: soft-light;
    &:first-child { height: 7rem; width: 7rem; top: 2rem; left: 2rem; }
    &:nth-child(2) { height: 3rem; width: 3rem; top: 2rem; left: 7rem; rotate: 10deg; }
    &:nth-child(3) { height: 4rem; width: 4rem; top: 8%; right: 2rem; rotate: -15deg;}
    &:nth-child(4) { height: 2rem; width: 2rem; top: 20%; right: 2rem; }
    &:nth-child(5) { height: 4rem; width: 4rem; bottom: 22%; left: 1rem; rotate: 15deg;}
    &:nth-child(6) { height: 2rem; width: 2rem; bottom: 25%; right: 40%;}
    &:nth-child(7) { height: 5rem; width: 5rem; bottom: 22%; right: 1rem;}
  }
  header {
    display: flex; flex-direction: column;
    max-width: 90%; margin: 5rem auto 2rem; z-index: 1;
    img { height: 10rem; width: auto; margin: auto; }
    >div {
      flex-grow: 1; background-image: url("../img/white.webp");
      background-clip: padding-box; padding: 1rem; position: relative;
      border: 1rem solid transparent;
      border-image: url("../img/index/cloud.webp") 16.5 round;
      &::before {
        content: ''; display: block; width: calc(100% + 1.5rem); height: 12.5rem; margin: auto;
        background-image: url("../img/index/icon-down.webp");
        background-size: 10rem 10rem; background-position: center; background-repeat: no-repeat;
        position: absolute; top: -11rem; left: .75rem;
      }
      >img {
        width: 100%; height: auto; max-height: 5rem; margin: 0 0 1rem;
      }
      nav {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
        a {
          background-color: var(--green); color: var(--black); flex-grow: 1;
          padding: 0.5rem 2rem; border-radius: 0.5rem; text-align: center;
          &:first-child, &:nth-child(2), &:nth-child(3){background-color: var(--yellow);}
          &:nth-child(7), &:last-child {background-color: var(--blue); color: var(--white);}
          &:hover {
            background-image: url("../img/black.webp");
            color: var(--white);
          }
        }
      }
    }
  }
}

main {
  background-image: url("../img/grass.webp");
  padding: 2rem 2rem 5rem; display: flex; flex-direction: column; gap: 1rem;
  >section {
    background-image: url("../img/sand.webp");
    padding: 1rem; border-radius: 1rem; text-align: center;
    &#landing {
      h1 { padding: 0; em { color: var(--link); display: block; }}
      figure {
        margin: 1rem auto; break-inside: avoid-column;
        figcaption {
          background-image: url("../img/black.webp"); color: var(--white);
          padding: 1rem; border-radius: 1rem;
        }
        img { max-width: 12rem; margin: auto; }
      }
    }
  }
}

#beach {
  max-height: 30rem; position: relative;
  background-image: url("../img/index/shore.webp");
  background-repeat: repeat-x; background-size:50rem 100%;
  &::before {
    content: '';  width: 100%; height: 3rem;
    background-image: url("../img/index/footer-sand.webp");
    background-size:auto 100%;
    position: absolute; top: -3rem;
  }
  &>a, .fish {
    height: auto; max-width: 16rem;
    display: block; position: relative;
    padding: 0 1rem;
  }
  .fish { box-sizing: border-box; padding: 0 2rem; max-width: 8rem;}
  #fishing { margin-left: auto; top: -2.5rem; }
  #liferaft { max-width: 8rem; left: 1rem; top: -2rem; padding-right: 2rem;}
  #fish-1 { max-width: 10rem; top: -1.5rem; margin-left: auto;}
  #fish-2 { max-width: 10rem; top: -20rem; left: 10%;}
}

body footer { margin-top: 0;}
/* Tiny-mobile */
@media screen and (max-width: 30rem) {#beach>#fish-2 { display: none;}}

/* Tablet view */
@media screen and (min-width: 40rem) {
  #headerwrapper {
    #headerstars > img {
      mix-blend-mode: normal;
      &:first-child { height: 10rem; width: 10rem; }
      &:nth-child(2) { height: 4rem; width: 4rem; left: 25%;}
      &:nth-child(3) { height: 8rem; width: 8rem; top: 5%; right: 2rem;}
      &:nth-child(4) { height: 4rem; width: 4rem; top: 25%; right: 1rem;}
      &:nth-child(5) { height: 6rem; width: 6rem; bottom: 30%; left: 1.5rem;}
      &:nth-child(6) { height: 3rem; width: 3rem; bottom: 12rem; right: 25%;}
      &:nth-child(7) { height: 7rem; width: 7rem; bottom: 12rem;}
    }
    header {
      min-width: 0; max-width: 100%; width: 60%;
      div>img { width: 100%; max-width: 30rem; height: auto; margin: 0 auto 1rem;}
    }
  }
  main {
    padding: 2rem calc(10% - 1rem) 5rem;
    section#landing {
      columns: 2;
      figure {
        margin: 1rem 10%;
        img {max-width: 12rem;}
      }
      aside {display: block;}
      p {text-align: left;}
    }
  }
  #beach { max-height: 25rem;
    #fishing { max-width: 20rem; right: 8%; top: -3rem;}
    #liferaft { max-width: 10rem; left: 8%; top: -12rem;}
    #fish-1 { max-width: 9rem; right: 45%; top: -12rem; }
    #fish-2 { top: -26rem; left: 25%;}
  }
}

/* Desktop view */
@media screen and (min-width: 67rem) {
  #headerwrapper {
    #headerstars > img {
      &:first-child { height: 12rem; width: 12rem;}
      &:nth-child(2) { left: 25%;}
      &:nth-child(3) { top: 6%; right: 6rem;}
      &:nth-child(4) { top: 30%; right: 2rem;}
      &:nth-child(5) { bottom: 35%; left: 2rem;}
      &:nth-child(6) { height: 4rem; width: 4rem; bottom: calc(12rem + 3%);}
      &:nth-child(7) { height: 8rem; width: 8rem;}
    }
    header {
      flex-direction: row; margin: 12rem auto 5rem; width: 60%;
      >img { width: 15rem; height: auto; flex-grow: 1;}
      div {
        &::before {
          height: calc(100% + 1.5rem); width: 18.75rem; margin: auto;
          background-image: url("../img/index/icon-side.webp");
          background-size: 15rem 15rem;
          top: 1.5rem; left: -16rem;
        }
        h1>img {max-height: 5rem; width: auto;}
      }
    }
  }
  main {padding: 2rem calc(20% - 1rem) 5rem;}
  #beach { max-height: 25rem;
    #fishing { max-width: 22rem; right: 15%;}
    #liferaft { max-width: 12rem; left: 15%; top: -15rem;}
    #fish-1 { right: 45%; right: 48%; top: -17rem; }
    #fish-2 { top: -30rem; left: 30%;}
  }
}