body {
    min-height: 100vh;
    background: linear-gradient(to left, #0dcaf0, #00d3b2);
}

.nav-pills-custom .nav-link {
    color: #aaa;
    background: #fff;
    position: relative;
}

.nav-pills-custom .nav-link.active {
    color: #0b6884;
    background: #fff;
}

.skills {
    width: 50px;
    height: 50px;
    padding: 2px;
}

a {
    color: #0b6884;
    text-decoration:none;
}

a:hover {
    color: #084c61;
    text-decoration:none;
}

@media (min-width: 992px) { /** bootstrap breakpoints :) **/
    .nav-pills-custom .nav-link::before {
        content: '';
        display: block;
        border-top: 8px solid transparent;
        border-left: 10px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        opacity: 0;
    }
}

.nav-pills-custom .nav-link.active::before {
    opacity: 1;
}