.footer {
  background: var(--b-color);
  padding: 1rem 0 0 0;
  margin: 0;
  border-top: .1rem solid var(--t-color);

  .top {
    display: grid;
    grid-template-columns: repeat(3, 1.25fr) 2fr;
    max-width: 60rem;
    padding: 2rem 4rem;
    margin: 0 auto;
    
    ul {
      list-style-type: none;
      white-space:nowrap;
      padding: 0;
      margin: 0;
      
      li { 
        font-size: .895rem;
        margin: .25rem 0;
      }

      li h5 { font-size: 1rem }
      li h6 { 
        font-size: .895rem;
        font-weight: 400;
      }

      a {
        color: var(--link);
        &:hover { text-decoration: underline }
      }

      .btn a {
        display: inline-block;
        background: var(--b-color);
        font-weight: 600;
        padding: .15rem 2rem .25rem 1.55rem;
        margin: .25rem 0;

        .icon-zap,
        .icon-btc-b {
          position: relative;
          top: .15rem;
          font-size: 1.15rem;
        }

        &:hover {
          text-decoration: none;
          background: var(--sh-color);
        }
      }

      .zap a {
        color: var(--zap);
        border: .1rem solid var(--zap);
      }

      .btc a {
        color: var(--btc);
        border: .1rem solid var(--btc);
      }
    }
  }

  hr {
    height: 1px;
    border: none;
    color: var(--t-color);
    background-color: var(--t-color);
    margin: 0;
  }

  .bottom {
    background: var(--b-color);
    
    .center {
      height: 5.5rem;
      max-width: 60rem;
      padding: 2rem 4rem;
      margin: 0 auto;

      .who {
        float: left;
        color: var(--f-color);
        font-size: .895rem;
    
        a {
          color: var(--link);
          margin: 0 2px;
    
          &:hover { text-decoration: underline }
        }
    
        .icon-btc-b {
          position: relative;
          top: .25rem;
          font-size: 1.1rem;
        }
      }
      
      ul {
        float: right;
        list-style-type: none;
        white-space:nowrap;
        padding: 0;
        margin: 0;
    
        li, li p {
          display:inline; 
          font-size: .895rem;
        }
    
        a {
          color: var(--link);
          margin: 0 .5rem;
    
          &:hover { text-decoration: underline }
        }
    
        p {
          color: var(--f-color);
          margin: 0 0 0 .5rem;
        }
    
        .copy .icon-copyright {
          font-size: .7rem;
          opacity: .9;
        }
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .footer {
    height: unset;
    padding: 0;

    .top {
      grid-template-columns: 1fr 1fr;
      padding: 2rem 2rem 0 2rem;

      ul {
        margin: 2rem 1rem;
            
        li { 
          font-size: 1rem;
        }
  
        li h5 { 
          font-size: 1.15rem 
        }
      }
    }

    .bottom {      
      .center {
        height: 5.5rem;
        padding: .5rem 2.5rem;
        margin: 0;

        .who {
          float: none;
          padding: .5rem;
        }

        ul {
          float: none;
        }
      }
    }
  }
}

@media only screen and (max-width: 345px) {
  .footer {
    padding: 0 1rem;
  }
}