footer {
  margin: 0;
  padding: 0;

  .gradient {
    width: 100%;
    height: 150px;
    background-image: linear-gradient(to right, #40712e, #2b5948, #1b6184, #20175e);

    #wrapper-footer {
      display: flex;
      width: 100vw;
      z-index: 2;

      h3 {
        color: #aeaeae00;
        font-family: "terminus", monospace;
        text-shadow: 0px 0px 0px white, 1px 0px 0 #d0d0d0, 2px 0px 0 #979797c9, 3px 0px 0 #7b7b7bd1, 4px 0px 0 #5e5e5ede, 5px 0px 0 #26262680, 5px 0px 0 #17171794, 6px 0px 0 #13131396, 7px 0px 0 #00000026, 8px 0px 0 #0000002e,2px 2px 10px black;
        font-weight: lighter;
        padding: 36px;
        font-size: 28px;
        margin: auto;
      }

      #buttons-88x31 {
        padding: 30px;
        background-color: #00000057;
        border-radius: 16px 0px 16px 0px;
        margin: 16px 16px;
        box-shadow: inset 3px 3px 8px #111, 0 2px 6px #ffffff1a;
        overflow: auto;
        width: calc(100vw - 18em);
        text-align: center;

        img {
          width: 88px;
          height: 31px;
        }
      }

      #copyright {
        flex:1;
        min-width: 17em;
        margin: auto 0;
      }

      /**
       * breakpoint: desktop-16x9;
       */
      @media only screen and (min-width: 1224px){
        width: 1200px;

        #copyright h3{
          padding: 36px 36px 36px 8px;
        }
      }
    }
  }

  .tiled {
    height: 150px;
  }

  /**
   * breakpoint: mobile;
   */
  @media only screen and (max-width: 649px){
    .gradient, .tiled {
      height: 200px;
    }

    .gradient {
      #wrapper-footer {
        display: grid;
        text-align: center;

        #copyright h3{
          padding: 16px 16px 0px 16px;
        }

        #buttons-88x31 {
          width: auto;
          padding: 24px;
        }
      }
    }
  }
}