html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
.clear{
    display: flex;
    justify-content: center;
    align-items: center;
}
.clear i{
    font-size: 30px;
    margin-left: 10px;
    margin-right: 10px;
}
        * {
          margin: 0;
          padding: 0;
      }

    body {
          /* display: grid; */
          grid-template-rows: 1fr auto;
          grid-template-areas: "main""footer";
          overflow-x: hidden;
          background: #F5F7FA;
          min-height: 100vh;
          font-family: "Open Sans", sans-serif;
      }

     .footer {
         margin-top: 120px;
          z-index: 1;
          --footer-background: #970505;
          display: grid;
          position: relative;
          grid-area: footer;
          min-height: 12rem;
      }

     .footer .bubbles {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1rem;
          background: var(--footer-background);
          filter: url("#blob");
      }

     .footer .bubbles .bubble {
          position: absolute;
          left: var(--position, 50%);
          background: var(--footer-background);
          border-radius: 100%;
          -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
          transform: translate(-50%, 100%);
      }

     .footer .content {
          z-index: 2;
          display: grid;
          grid-template-columns: 1fr auto;
          grid-gap: 4rem;
          padding: 2rem;
          background: var(--footer-background);
      }

     .footer .content a,
     .footer .content p {
          color: #F5F7FA;
          text-decoration: none;
      }

     .footer .content b {
          color: white;
      }

     .footer .content p {
          margin: 0;
          font-size: 0.75rem;
      }

     .footer .content>div {
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

     .footer .content>div>div {
          margin: 0.25rem 0;
      }

     .footer .content>div>div>* {
          margin-right: 0.5rem;
      }

     .footer .content>div .image {
          align-self: center;
          width: 4rem;
          height: 4rem;
          margin: 0.25rem 0;
          background-size: cover;
          background-position: center;
      }

      @-webkit-keyframes bubble-size {

          0%,
          75% {
              width: var(--size, 4rem);
              height: var(--size, 4rem);
          }

          100% {
              width: 0rem;
              height: 0rem;
          }
      }

      @keyframes bubble-size {

          0%,
          75% {
              width: var(--size, 4rem);
              height: var(--size, 4rem);
          }

          100% {
              width: 0rem;
              height: 0rem;
          }
      }

      @-webkit-keyframes bubble-move {
          0% {
              bottom: -4rem;
          }

          100% {
              bottom: var(--distance, 10rem);
          }
      }

      @keyframes bubble-move {
          0% {
              bottom: -4rem;
          }

          100% {
              bottom: var(--distance, 10rem);
          }
      }