.tablinks {
    cursor: pointer;
    padding: 8px 8px 8px 8px;
    margin: 8px 8px 8px 8px;
    vertical-align: middle;
    display: inline-block;
    text-decoration: none;
}

    .tablinks:hover {
        color: #8844CC;
        text-shadow: 4px 4px 30px #880044;
        animation: tablinks_hover 10s infinite;
    }

@keyframes tablinks_hover {
    0% {
        transform: scale(1);
        text-shadow: none;
    }

    2% {
        transform: scale(1.2);
        text-shadow: 2px 2px 15px #0000FF;
    }

    4% {
        transform: scale(0.9);
        text-shadow: none;
    }
 
    8% {
        transform: scale(1);
        text-shadow: none;
    }

    100% {
        transform: scale(1);
        text-shadow: none;
    }
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #9B9EA5;
    background-color: #9B9EA5;
    height: 3em;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

.tabinfo {
}

.tabodd {
}

.tabeven {
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.tabcontent_fade {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}