html {
  scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: none;
}
  .parent-container-mobile {
    display: flex;
    flex-direction: column;
    margin: 5vmax;
    margin-top: 10vmax;
    /*border: 1px solid red; /* debug */
  }
  .parent-container-tablet {
    display: none;
  }
    .upper-container-mobile {
      display: flex;
      position: absolute;
      left: 7.5vmax;

      /*border: 1px solid blue; /* debug */
    }
      #nav {  /* nav overlay mobile */

      }
      /* copied from glvn */
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0%;
        background: #F77777;
        overflow-x: hidden;
        z-index: 5;
        transition: all .35s;
      }
        .overlay__content {
          position: relative;
          top: 20%;
          width: 100%;
          margin-left: 10vmax;
          margin-top: 30px;

        }
        .overlay a {  /* nav-links for mobile */
          padding: 1.75vmax;
          padding-right: 25vmax;
          color: white;
          font-size: 32px;
          text-decoration: none;
          font-family: 'Fira Sans', sans-serif;
          display: block;
          max-width: 20vmax;
        }
          .overlay a:hover {
            color: #F77777;
            background-color: white;
          }
        .overlay .closeBtn {
          position: absolute;
          top: 10vmax;
          left: 15vmin;
          padding: 5vmin;
          font-size: 32px;
          border-radius: 50%;
        }
      /* glvn ends here */
      .mobile-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #F77777;
        border-radius: 100%;
        width: 62px;
        height: 62px;
        box-shadow: 5px 3px 5px rgba(0,0,0,.175);
      }
        .burger-upper, .burger-mid, .burger-bottom {
          height: 5px;
          width: 28.47px;
          margin: 2.5px;
          background-color: white;
          border-radius: 20%;

        }
    .mid-container-mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 15vmax;
      /*border: red 1px solid; /* debug */
    }
    /* homepage start */
    #frontpage-logo {
        width: 219px;
    }
    .frontpage-subheading {
      font-family: 'Fira Sans', sans-serif;
      color: white;
      font-weight: 400;
      background: #71D7FF;
      margin-top: 25px;
      border-radius: 8px;
      padding: 5px 16px;
    }
    #frontpage-subtitle {
      width: 141px;
      position: absolute;
      bottom: 10vmax;
      z-index: -1;
    }
    /* homepage ened */
    /* shop start */
    .shop-paragraph {
      font-family: 'Fira Sans', sans-serif;
      margin-left: -15vmin;
      font-size: 24px;
      max-width: 200px;
      line-height: 1.4;
    }
    .shop-items-container {
      display: flex;
      margin-top: 5vmin;
      flex-direction: row;
      /*border: red 1px solid;  /* debug */

    }
      .item-name {
        font-family: 'Raleway', sans-serif;
        font-size: 21px;
        font-weight: 600;
      }
      .shop-items-container-left {
        display: flex;
        flex-direction: column;
        /*border: green 1px solid;   /* debug */
        width: 125px;
        height: 300px;
        margin: 1.25vmax;
        align-items: center;
      }
        #shop-image-1, #shop-image-2 {
          max-width: 125px;

        }
        #shop-image-2 {
          margin-top: 2vmax;
        }
      .shop-items-container-right {
        display: flex;
        flex-direction: column;
        /*border: blue 1px solid; /* debug */
        width: 125px;
        height: 300px;
        margin:1.25vmax;
        margin-top: 10vmax;
        align-items: center;
      }
        #shop-image-3, #shop-image-4 {
          max-width: 125px;

        }

        #shop-image-4 {
          margin-top: 2vmax;
        }
        .item-name-large {
          font-family: 'Fira Sans', sans-serif;
          font-size: 40px;
          font-weight: lighter;
          border-bottom: #f77777 solid 2.5px;
          margin-bottom: .5vmax;
        }
        .item-name-medium {
          font-family: 'Raleway', serif;
          font-size: 24px;
          margin-top: 1.25vmax;
        }
    .item-pic {
      max-width: 320px;
      border-radius: 2.5vmax;
      margin: 2.5vmax;
      border: .25vmax #f77777 solid;
    }
    .container-align {
      display: flex;
      flex-direction: column;
      width: 70vmin;
    }
    .item-description {
      font-family: 'Martel', serif;
      line-height: 2.1;
      font-size: 16px;
      margin-bottom: 1.25vmax;
    }
    .instructions-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 125px;
      height: 35px;
      background: #71D7FF;
      border-radius: 20px;
      box-shadow: 2px 5px 5px rgba(0,0,0,.5);
      margin-top: 3.25vmax;
    }
      .instructions-button:hover {
      background: white;
      }
        .instructions-button:hover .instructions-link {
          color: #71D7FF;
        }
      .instructions-link {
        color: white;
        font-weight: 500;
        font-family: 'Fira Sans', sans-serif;
        font-size: 14px;
        text-decoration: none;
      }
    .buy-button {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 16px;
      width: 200px;
      height: 50px;
      background: #F77777;
      border-radius: 30px;
      box-shadow: 2px 5px 5px rgba(0,0,0,.5);
    }
      .buy-button:hover {
        background: white;
      }
      .buy-button:hover .buy-link {
        color: #F77777;
      }
      .buy-link {
        color: white;
        font-weight: 500;
        font-family: 'Fira Sans', sans-serif;
        font-size: 22px;
        text-decoration: none;
      }
    /* shop end */
    /* contact start */
    .heading {
      font-family: 'Fira Sans', sans-serif;
      font-weight: 800;
      font-size: 24px;
      margin-left: -25vmin;
    }
    .social-link-container {
      display: flex;
      max-width: 300px;
      flex-direction: column;
      margin: 3.75vmax 0;
    }
      .social-link {
        min-width: 200px;
        padding: 1.25vmax 2.5vmax;
        border-radius: 50px;
        display: flex;
        background: rgba(0,0,0,.0125);
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        color: black;
        box-shadow: 12px 5px 5px rgba(0,0,0,.25);
        margin-top: 2.5vmax;
      }
      .social-link-inactive {

        max-width: 400px;
        max-height: 100px;
        padding: .75vmax;
        border-radius: 50px;
        display: flex;
        margin-bottom: -1.5vmax;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        color: black;
        margin-left: 5vmax;
        margin-top: 1.75vmax;
      }
      .social-icon {
        max-width: 42px;
        margin: 0 2.5vmax;
      }
        .social-name {
          font-family: 'Fira Sans', sans-serif;
          font-weight: 800;
        }
          .phone-num {
            min-width: 200px;
            margin-left: .25vmax;
            margin-top: .5vmax;
            list-style-type: none;
          }
    /* contact end */
    /* about start */
    .about-paragraph-container {
      margin-top: 50px;
      width: 290px;
    }
      .about-paragraph {
        line-height: 2.25;
        font-family: 'Martel', serif;
        font-size: 12px;
      }
    /* about end */
    /* instructions start */
    .for-use-container-parent {
      display: flex;
      margin-top: 1.75vmax;
      max-width: 250px;
    }
      .for-use-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin: 1.25vmax 2.5vmax;
      }
        .for-use-image-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 1.25vmax 0;
        }
          .where-use-icon {
            max-width: 60px;
          }
    /* instructions end */
    .parent-container-desktop { /* doesn't show up on mobile */
      display: none;
    }