:root {
  /************** colors ************/

  --t-col-000: #fff;
  --t-col-100: #D1E7DD;
  --t-col-200: #A3CFBB;
  --t-col-300: #75B798;
  --t-col-400: #479F76;
  --t-col-500: #198754;
  --t-col-600: #146C43;
  --t-col-700: #0F5132;
  --t-col-800: #0A3622;
  --t-col-900: #051B11;

  .t-col-000 {
    color: var(--t-col-000)
  }

  .tbg-col-000 {
    background-color: var(--t-col-000)
  }

  .t-col-100 {
    color: var(--t-col-100)
  }

  .tbg-col-100 {
    background-color: var(--t-col-100)
  }

  .t-col-200 {
    color: var(--t-col-200)
  }

  .tbg-col-200 {
    background-color: var(--t-col-200)
  }

  .t-col-300 {
    color: var(--t-col-300)
  }

  .tbg-col-300 {
    background-color: var(--t-col-300)
  }

  .t-col-400 {
    color: var(--t-col-400)
  }

  .tbg-col-400 {
    background-color: var(--t-col-400)
  }

  .t-col-500 {
    color: var(--t-col-500)
  }

  .tbg-col-500 {
    background-color: var(--t-col-500)
  }

  .t-col-600 {
    color: var(--t-col-600)
  }

  .tbg-col-600 {
    background-color: var(--t-col-600)
  }

  .t-col-700 {
    color: var(--t-col-700)
  }

  .tbg-col-700 {
    background-color: var(--t-col-700)
  }

  .t-col-800 {
    color: var(--t-col-800)
  }

  .tbg-col-800 {
    background-color: var(--t-col-800)
  }

  .t-col-900 {
    color: var(--t-col-900)
  }

  .tbg-col-900 {
    background-color: var(--t-col-900)
  }

  /*********** typo ************/
  .t-h1 {
    background: linear-gradient(to top, var(--t-col-300), var(--t-col-700));
    background-clip: text;
    color: transparent;
    padding-bottom: 0.5rem;
  }

  /******* float columns *******/

  .t-column {
    column-count: 2;
    column-gap: 2rem;
    column-width: 18rem;
    margin-bottom: 2rem;
  }

  .t-column p {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    line-height: 1.35rem;
    text-align: justify;
    hyphens: auto;
    orphans: 3;
    widows: 3;
  }

  .t-column h5 {
    font-size: 1.2rem;
    line-height: 1.35rem;
    margin: 1.35rem 0 1.35rem 0;
    break-after: avoid-column;
    -webkit-column-break-inside: avoid;
  }



  /********** navbar ***********/
  .t-navbar {
    border-bottom: 4px solid #003E04;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
  }

  .t-navbar-brand {
    width: 40%;
    max-width: 280px;
  }

  .dropdown-menu>li>a.dropdown-item {
    color: #F5FFF7;
  }

  .dropdown-menu>li>a.dropdown-item:hover {
    background-color: var(--t-col-400);
  }

  /********** separator *********/
  .t-separator {
    position: relative;
    height: 6px;
    background-image: linear-gradient(to top, #D1E7DD, #75B798);
  }

  .t-separator>picture {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92px;
  }

  /************* carousel **********/
  #carouselAutoplaying .carousel-item>img {
    object-fit: cover;
    height: 120px;
  }

  @media (min-width: 768px) {
    #carouselAutoplaying .carousel-item>img {
      height: 180px
    }
  }

  @media (min-width: 1200px) {
    #carouselAutoplaying .carousel-item>img {
      height: 300px
    }
  }

  #linkList picture {
    display: block;
    width: 70%;
    min-width: 100px;
    max-width: 130px;
  }


  .btn-t1 {
    background-color: var(--t-col-500);
    color: var(--t-col-100);
  }

  .btn-t1:hover {
    background-color: var(--t-col-400);
  }

  /********** misc **************/
  .t-mb-8 {
    margin-bottom: 8rem;
  }

  /** playground **/

  .tf {
    border: 1px solid red;
  }
}