:root {
      --tt-dark-color: #212121;
      --tt-light-color: #e9e9e9;
      --tt-primary-color: #001E43;
      --tt-secondary-color: #c50d0d;
  }

  main>.container {
      padding: 60px 15px 0;
      margin-bottom: 5rem;
      min-height:90vh;
  }


  /*-- Navbar Styles --*/
  .navbarBG {
      background-color: var(--tt-dark-color);
  }
  body{
      background-color: slategray;
  }

  .jsicon {
      color: rgb(226, 211, 4);

  }

  .bootstrapicon {
      color: #55008d
  }

  .html5icon {
      color: #ca4305
  }

  .css3icon {
      color: #1881e4
  }

  .checklisticon {
      color: var(--tt-secondary-color)
  }

  .btn-outline-primary {
      color: var(--tt-dark-color);
      border-color: var(--tt-secondary-color) !important;
  }

  .btn-outline-primary:hover,
  .btn-outline-primary:active,
  .btn-oultine-primary:focus {
      border-color: var(--tt-primary-color);
      background-color: var(--tt-secondary-color);
  }

  .btn-primary {
      color: white !important;
      background-color: var(--tt-secondary-color) !important;
      border-color: var(--tt-secondary-color)
  }

  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary:visited,
  .btn-primary:focus {
      filter: brightness(1.1) !important;
      border-color:var(--tt-secondary-color)
  }


  /*-- Footer Styles --*/
  .footer {
      background-color: var(--tt-dark-color);
      padding-right: 1rem;
      color: var(--tt-light-color)
  }

  .sticky-footer {
      position: sticky;
      left: 0;
      bottom: 0;
      width: 100%;
  }

  footer .social>a {
      color: var(--tt-light-color);
      opacity: .75;
  }

  footer .social>a:hover {
      color: var(--tt-secondary-color);
      opacity: .90;
  }