.languages-wrapper {
    overflow: hidden;
    /* hides scrollbar */
    width: 100%;
    position: relative;
    padding: 70px 0;
    margin-bottom: 100px;
}

#languages {
    display: flex;
    flex-wrap: nowrap;
    /* IMPORTANT */
    width: max-content;
    /* grow based on content */
    animation: scrollLanguages 60s linear infinite;
}


#languages h4 {
    font-family: consolas;
    font-size: 21px;
}

#languages p {
    font-family: consolas;
    font-size: 10.5px;
    text-align: center;
    padding: 0px 2px;
}

.card {
    position: relative;
    cursor: pointer;
    margin: 0 5rem;
    flex-shrink: 0;
}



.top-half,
.bottom-half {
    width: 180px;
    height: 120px;
    transition: 0.8s ease;
}

.bottom-half {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    justify-content: flex-end;
    background: #E7E7E7;
}

.card .top-half {
    display: flex;
    flex-direction: column;

    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(121px) translateX(-1px);

    border: solid 2px;
}

.card:nth-child(9n + 1) .top-half {
    border-color: #e34f26;
}

.card:nth-child(9n + 2) .top-half {
    border-color: blue;
}

.card:nth-child(9n + 3) .top-half {
    border-color: yellow;
}

.card:nth-child(9n + 4) .top-half {
    border-color: #5382A1;
}

.card:nth-child(9n + 5) .top-half {
    border-color: #00599C;
}

.card:nth-child(9n + 6) .top-half {
    border-color: #953CAD;
}

.card:nth-child(9n + 7) .top-half {
    border-color: gold;
}

.card:nth-child(9n + 8) .top-half {
    border-color: #3776AB;
}

.card:nth-child(9n + 9) .top-half {
    border-color: #7F52FF;

}

/* icon sizes */
.card .top-half svg {
    max-width: 80px;
}

.card:nth-child(7) .top-half svg,
.card:nth-child(9) .top-half svg {
    max-width: 56px;
    margin-bottom: 0.64rem;

}

.card:nth-child(3) .top-half svg {
    max-height: 72px;
}

.card:nth-child(5) .top-half svg,
.card:nth-child(6) .top-half svg {
    max-width: 64px;
    margin-bottom: 0.64rem;
}

.card .top-half h4 {
    margin: 0;
    padding: 0;
    text-align: center;
}

.card:hover .top-half h4 {
    padding: 0;
    text-align: center;
}

/* This are the hover effects */
.card:hover .top-half {
    transform: translateY(5px) translateX(-2px);
}

.card:hover .bottom-half {
    transform: translateY(-3px);
}

.card:hover:nth-child(9n + 1) .top-half {
    transform: translateY(40px) translateX(-2px);
}

.card:hover:nth-child(9n + 2) .top-half,
.card:hover:nth-child(9n + 4) .top-half,
.card:hover:nth-child(9n + 5) .top-half,
.card:hover:nth-child(9n + 6) .top-half {
    transform: translateY(50px) translateX(-2px);
}

.card:hover:nth-child(9n + 3) .top-half {
    transform: translateY(10px) translateX(-2px);
}

.card:hover:nth-child(9n + 8) .top-half {
    transform: translateY(60px) translateX(-2px);
}

.card:hover:nth-child(9n + 7) .top-half,
.card:hover:nth-child(9n + 9) .top-half {
    transform: translateY(25px) translateX(-2px);
}

/* The glow effect */
.card:nth-child(9n + 1):hover .top-half {
    background: #e34f26;
}

.card:nth-child(9n + 1) .bottom-half {
    box-shadow: 0 10px 50px #e34f26;
}

.card:nth-child(9n + 1) .top-half h4,
.card:nth-child(9n + 1) .top-half svg {
    color: #e34f26;
    fill: #e34f26;
}

.card:nth-child(9n + 2):hover .top-half {
    background: blue;
}

.card:nth-child(9n + 2) .bottom-half {
    box-shadow: 0 10px 50px blue;
}

.card:nth-child(9n + 2) .top-half h4,
.card:nth-child(9n + 2) .top-half svg {
    color: blue;
    fill: blue;
}

.card:nth-child(9n + 3):hover .top-half {
    background: yellow;
}

.card:nth-child(9n + 3) .bottom-half {
    box-shadow: 0 10px 50px yellow;
}

.card:nth-child(9n + 3) .top-half h4,
.card:nth-child(9n + 3) .top-half svg {
    color: yellow;
    fill: yellow;
}

.card:nth-child(9n + 3) .top-half svg {
    width: 100px;
    height: 100px;
}

.card:nth-child(9n + 4):hover .top-half {
    background: linear-gradient(180deg, orange, #5382A1);
}

.card:nth-child(9n + 4) .bottom-half {
    box-shadow: 0 10px 50px #5382A1;
}

.card:nth-child(9n + 4) .top-half h4,
.card:nth-child(9n + 4) .top-half svg {
    color: #5382A1;
    fill: #5382A1;
}

.card:nth-child(9n + 5):hover .top-half {
    background: #00599C;
}

.card:nth-child(9n + 5) .bottom-half {
    box-shadow: 0 10px 50px #00599C;
}

.card:nth-child(9n + 5) .top-half h4,
.card:nth-child(9n + 5) .top-half svg {
    color: #00599C;
    fill: #00599C;
}

.card:nth-child(9n + 6):hover .top-half {
    background: #953CAD;
}

.card:nth-child(9n + 6) .bottom-half {
    box-shadow: 0 10px 50px #953CAD;
}

.card:nth-child(9n + 6) .top-half h4,
.card:nth-child(9n + 6) .top-half svg {
    color: #953CAD;
    fill: #953CAD;
}

.card:nth-child(9n + 7):hover .top-half {
    background: gold;
}

.card:nth-child(9n + 7) .bottom-half {
    box-shadow: 0 10px 50px gold;
}

.card:nth-child(9n + 7) .top-half h4,
.card:nth-child(9n + 7) .top-half svg {
    color: gold;
    fill: gold;
}

.card:nth-child(9n + 8):hover .top-half {
    background: linear-gradient(135deg, blue, yellow);
}

.card:nth-child(9n + 8) .bottom-half {
    box-shadow: 0 10px 50px #3776AB;
}

.card:nth-child(9n + 8) .top-half h4,
.card:nth-child(9n + 8) .top-half svg {
    color: #3776AB;
    fill: #3776AB;
}

.card:nth-child(9n + 9):hover .top-half {
    background: linear-gradient(135deg, purple, blue);
}

.card:nth-child(9n + 9) .bottom-half {
    box-shadow: 0 10px 50px #7F52FF;
}

.card:nth-child(9n + 9) .top-half h4,
.card:nth-child(9n + 9) .top-half svg {
    color: #7F52FF;
    fill: #7F52FF;
}

.card:hover .top-half svg {
    fill: black;
}

.card:hover .top-half h4 {
    color: black;
}

@keyframes scrollLanguages {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}