/* SCROLL CONTAINER & SCROLL BAR */
.scroll-container {

    padding-top: 15px;
    padding-bottom: 10px;


    position: absolute;
    top: var(--nav-height); /* start right below the navbar */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto; /* scroll only in this area */







    padding-right: 3%;

    padding-left: 3%;


    box-sizing: border-box; /* make padding included in width */
    
    /* Smooth scrolling performance */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scroll-behavior: smooth;
    will-change: scroll; /* hints browser to optimize scroll */
}







.skill {
  margin-bottom: 14px;
}

.skill span {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

.skill-bar {
  background-color: #e0e0e0;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.skill-level {
  height: 100%;
  background-color: #1f4fd8;
}

.skill-level.learning {
  background-color: #6c8cff;
}