#myTab .nav-item{
    padding-right: 20px;
}

.tab-content .wave,
.tab-content .curvy,
.tab-content .border,
.tab-content .stripes,
.tab-content .gradient {
    text-align: center;
    margin: 24px 0;
}

.tab-content .wave-settings .wave-hover-html textarea,
.tab-content .wave-settings .wave-hover-css textarea,
.tab-content .curvy-settings .curvy-hover-css textarea,
.tab-content .curvy-settings .curvy-hover-html textarea,
.tab-content .border-settings .border-hover-css textarea,
.tab-content .border-settings .border-hover-html textarea,
.tab-content .gradient-settings .gradient-hover-css textarea,
.tab-content .gradient-settings .gradient-hover-html textarea,
.tab-content .stripes-settings .stripes-hover-css textarea,
.tab-content .stripes-settings .stripes-hover-html textarea {
    background-color: #000;
    color: #fff;
}

.tab-content .wave a {
    font-size: 4em;
    font-weight: bold;
    color: #564dd5;
    font-family: sans-serif;
    text-decoration: none;
    background: linear-gradient(#e66465, #9198e5) repeat-x #fff;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 200% 100%;
    background-position-x: 0;
    background-position-y: 2em;
    transition: background-position-y 0.6s ease;
    animation: waveAnimation 4s infinite linear;
    animation-play-state: running;
    animation-play-state: paused;
}

.tab-content .wave a:hover {
    background-position-x: 0;
    background-position-y: 0;
    animation-play-state: running;
}

@keyframes waveAnimation {
    from {
        background-position-x: 0%;
    }

    to {
        background-position-x: 200%;
    }
}

.tab-content .stripes a {
    font-size: 4em;
    font-weight: bold;
    font-family: sans-serif;
    color: transparent;
    background: url("https://png.pngtree.com/png-clipart/20210310/original/pngtree-color-line-stripes-png-image_5927236.jpg") repeat rgb(19, 17, 17);
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-clip: border-box;
    background-size: 100%;
    background-position: 0%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: stripeAnimation 3s linear infinite;
    animation: stripeAnimation 3s linear infinite;
    animation-play-state: running;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.tab-content .stripes a:hover {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

@keyframes stripeAnimation {
    100% {
        background-position-y: -200%;
    }
}
:root{
    --tab-curve-bg-posion-x: 150%;
}

.tab-content .curvy a {
    --tab-curve-bg-posion-x: 150%;
    font-size: 4em;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none;
    color: #564dd5;
    background: radial-gradient(circle at 100% 50%, transparent 20%, #2044ae 21%, #2044ae 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, #2044ae 21%, #2044ae 34%, transparent 35%, transparent) 0 -50px;
    background-color: rgba(0, 0, 0, 0);
    background-position-y: 0%, -50px;
    background-repeat: repeat, repeat;
    background-size: auto, auto;
    background-clip: border-box, border-box;
    background-color: #fff;
    background-size: 75px 100px;
    background-clip: text;
    background-repeat: repeat-x;
    background-position-y: -2em;
    transition: background-position-y 0.9s ease;
    animation: curvyAnimation 3s linear infinite;
    animation-play-state: running;
    animation-play-state: paused;
}

.tab-content .curvy a:hover {
    background-position-y: 0%, -50px;
    animation-play-state: running;
}

@keyframes curvyAnimation {
    100% {
        background-position-x: var(--tab-curve-bg-posion-x);
    }
}

:root {
    --tab-pane-border-width: 100%;
    --tab-pane-border-width-after: 0%;
    --tab-pane-border-text-shadow: -2px 0 #00C6A7, 0 2px #00C6A7, 2px 0 #00C6A7, 0 -2px #00C6A7;
    --tab-pane-border-text-shadow-after: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
}

.tab-pane .border a {
    --tab-pane-border-width: 100%;
    --tab-pane-border-width-after: 0%;
    --tab-pane-border-text-shadow: -2px 0 #00C6A7, 0 2px #00C6A7, 2px 0 #00C6A7, 0 -2px #00C6A7;
    --tab-pane-border-text-shadow-after: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
    font-size: 4em;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none;
    color: #fff;
    position: relative;
    text-shadow: var(--tab-pane-border-text-shadow);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.tab-pane .border a:after {
    content: 'HOVER ME';
    color: #fff;
    position: absolute;
    /* top: -12px; */
    left: 0;
    text-shadow: var(--tab-pane-border-text-shadow-after);
    width: var(--tab-pane-border-width);
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.5s ease;
}

.tab-pane .border a:hover::after {
    width: var(--tab-pane-border-width-after);
}

.tab-pane .gradient a {
    font-size: 4em;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none;
    background: rgba(0, 0, 0, 0) linear-gradient(90deg, #90f3b3, #90e9f3, #909ff3) repeat scroll 0% 0%/200% 200%;
    background-clip: border-box;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.tab-pane .gradient a:hover {
    -webkit-animation: GradientAnimation 2s ease infinite;
    animation: GradientAnimation 2s ease infinite;
}

@keyframes GradientAnimation {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@media only screen and (max-width: 426px) {

    .tab-pane .gradient a, .tab-pane .border a, .tab-content .curvy a, .tab-content .stripes a, .tab-content .wave a{
        font-size: 2.7em;
    } 

}