/* PROJECT SCROLL BAR */
#projects-bar-fade {
    position: relative;
    overflow: hidden;
}
#projects-bar-fade .more {
    background-clip: padding-box;
    top: 0;
    width: 40px;
    height: 100%;
    margin: 10px 0;
    position: absolute;
    pointer-events: none;
}
#projects-bar-fade .fadeLeft {
    background: linear-gradient(
        to right,
        var(--sublevel1-glass-color) 0%,
        transparent 40px
        );
}
#projects-bar-fade .fadeRight {
    right:10;
    background: linear-gradient(
        to left,
        var(--sublevel1-glass-color) 0%,
        transparent 40px
        );
}
#projects-bar{
    gap: 10px;
}
.project {
    width: 200px;
    grid-row-start: 1;
    box-sizing: content-box;
    align-self: stretch;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.project img{
    max-width: 200px;
    margin-bottom: 10px;
}
.puck{
    margin-left: auto;
    margin-right: auto;
    grid-row-start: 2;
    display: inline-block;
    grid-column-start: 1;
    height: 10px;
    width: 30px;
    border-radius: 5px;
    background-color: var(--secondary-text-color);
}
#fixed-puck{
    visibility: hidden;
}
#moving-puck{
    position: relative;
}