.tablinks {
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #666cff;
    border:none;
    padding: 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    box-shadow: 0px 4px 8px -4px rgba(76, 78, 100, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Create an active/current tablink class */
.tab button.active {
    background-color: red !important;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* Hide tab text on narrow screens. */
@media (max-width: 450px) {
    .tab-text {
        display: none;
    }
}