#experience {
    /* animation: 30000ms ease-in-out infinite color-change; */
    /* background-color: #26282f; */
}


@keyframes color-change {
    0% {
        background-color: rgb(1, 110, 110);
    }
    30% {
        background-color: rgba(255, 217, 0, 0.685);
    }
    60% {
        background-color: rgba(205, 92, 92, 0.726);
    }
    90% {
        background-color: rgba(146, 204, 11, 0.747);
    }
    100% {
        background-color: teal;
    }
}

/* Experience styles */
.exp-content{
    display: flex;
    /* justify-content: center; position along the main axis  */
    /*padding-left: calc(50vw - 7px);*/ /*Center the div, since the scroll takes 15px*/
    gap: 15px;
    padding-top: 10vh;
    padding-left: 10vw;
    overflow: hidden; /* When the animation is playing, the div is longer, this avoids the expansion of the div and scrolling down.*/
    height: 60vh;
}

.exp-content-vline{
    border-right: 5px solid #50DED0;
}

.exp-content-text {
    display: flex;
    flex-direction: column;
    align-items: start; /*position along cross axis*/
    gap: 15px;    
    justify-content: space-between;
}

.exp-content-text * { /*select all nested children of exp-content-text*/
    font-family: 'Mukta';
}


.exp-row{
    display: flex;
    gap: 15px;
}
.exp-col-image {
    width: 70px;
    height: 50px;
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.exp-title {
    font-size: 22px;
    color: rgba(0,0,0,0.6);
}

.exp-text {
    font-size: 18px;
    color: rgba(0,0,0,0.4);
}