html {
  font-family: sans-serif; text-align: center;
  margin: 0; min-height: 100vh; color: #060C2E;
  a { color: #1E4B82; }
  a:active, a:hover { color: #AD2F59; }

  &::before {
    content: ''; display: block; width: 100%; height: 100%;
    position: fixed; z-index: -1;
    background-image: linear-gradient(to bottom, #196467 20%, #238E5E 50%, #78B450);
  }
  body {
    margin: 0; padding: 0; height: 100%;
    display: flex; flex-direction: column;
    &::before {
      content: ''; display: block; width: 100%; height: 100%;
      position: fixed; z-index: -1;
      background-color: #eacdaf; 
      clip-path: polygon(100% 150vw, 100% 100%, 0 100%, 0 150vw, 25% 0, 75% 0);
    }
  }
  header {
    >img { display: block; width: 100%; height: auto; margin-bottom: -40%; }
    h1 {
      margin: 0 6%;
      img { width: 100%; height: auto; }
    }
    p,a {
      margin: 0 6%; background-color: #eacdaf;
      border-radius: 0.5rem; padding: 0.5rem; display: inline-block;
    }
    a {
      background-color: #060c2e; color: #eacdaf;
      padding: 0.75rem 1rem; border-radius: 1.5rem; margin-top: 1rem;
    }
  }
  main {
    flex-grow: 1; height: 100%;
    padding: 3rem 8% 0;
    #steps {
      display: flex; flex-direction: column;
      gap: 1rem;
      figure {
        margin: 0 auto; padding: 0; width: 8rem;
        img { width: 100%; border: 0.2rem solid #0c4436; height: auto; background-color: #eacdaf; }
      }
    }
    #pair { width: 50%; height: auto; }
    figure img { width: 100%; height: auto;}
  }
  footer {
    background-color: #060c2e; color: #eacdaf;
    padding: 0.5rem 0;
    a { color: #78B450;}
  }
}

@media screen and (min-width: 30rem) {
  html {
    header>img { margin-bottom: -50%; }
    header h1, header p { margin: 0 15%; }
    header p { font-size: 1.25rem; position: relative; z-index: 1; padding: 1rem; border-radius: 1rem;}
    main {
      padding-top: 4rem;
      #steps {
        flex-direction: row; align-items: flex-start; justify-content: center;
        figure { margin: 0; }
      }
      #pair { width: 40%; }
    }
  }
}
@media screen and (min-width: 50rem) {
  html {
    h2 {font-size: 2.5rem; margin: 0.5rem 0;}
    a, p, figcaption, summary { font-size: 1.25rem; }
    header {
      >img {margin-bottom: -55%}
      h1, p { margin: 0 25%;}
    }
    main {
      padding-top: 5rem;
      #steps figure { width: 10rem; }
      #pair { width: 30%; }
    }
  }
}