/* Inspiration https://codepen.io/webcrunchblog/pen/YOZQXP */

:root {
  --text: #060d07;
  --background: #f7fcf8;
  --primary: #44c953;
  --secondary: #86e691;
  --accent: #5ce96c;

}



ul.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  
  
  li {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;

    border: black solid 4px;

    background-color: var(--secondary);
    flex: 1;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease-in-out;

    &:hover {
      filter: brightness(0.95);
    }
    
    a {
      pointer-events: none;
      text-decoration: none;
      color: rgb(0, 0, 0);
      font-weight: 600;
      padding: 10px;
      font-size: 1.2rem;
      transition: all .3s ease-in-out;
      border-bottom: 1px solid transparent;
      &:hover {
        color: gray;
      }
    }
  }
}

.side-page-title {
  font-size: 1.3rem;
  margin-top: 20px;
  margin-bottom: 20px;
} 

.tab-pane { 
  display: none;
}

.tab-pane.active { 
  display: block; 
}

ul.nav li.active {
  background-color: var(--primary);
}


.tab-pane {
  padding-left: 10px;
  padding-right: 10px;
}