#color-content{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 500px;
    height: 200px;
    margin:5%;
}

#color-content {
    font-size: 60px;
    font-weight:bolder;
    text-transform: capitalize;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

#color-content span{
    display:inline-block;
    animation: wave 3s ;
    animation-timing-function:ease-in-out;
    animation-iteration-count: infinite;
    animation-delay:0s;
}

#color-content span.space{
    visibility: hidden;
    width:0.4em;
}

@keyframes wave{
    0%{
        transform:translateY(0px);
    } 33% {
        transform: translateY(-10px);
    } 66% {
        transform: translateY(10px);
    } 100% {
        transform: translateY(0px);
    }
}



.nav-button{
    text-align: center;
    vertical-align: middle;
    height:75px;
    width:150px;
    margin: 7%;

    border:#3842ce 10px ridge;
    border-radius: 4px;
    background-color:cornflowerblue ;
}

.nav-button{
    font-size: 18px;
    font-weight:bolder;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color:azure;
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


.nav-button:hover {
  rotate: var(--angle);
  animation: spin 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin{
    from {
        --angle:0deg;
    } to {
        --angle:360deg;
    }
}

.nav-button2{
    height:70px;
    border:#3842ce 10px ridge;
    border-radius: 4px;
    background-color:cornflowerblue ;
    font-size: 18px;
    font-weight:bolder;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color:azure;
    text-transform: uppercase;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    rotate: var(--angle);
}


.nav-button2:hover {
  
  animation: spin2 1.4s ease-in-out 1;
}

@keyframes spin2{
    from {
        --angle:0deg;
    } to {
        --angle:720deg;
    }
}





#color-content2{
    display: flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    height: fit-content;
    margin:5%;
}

#color-content2 {
    font-size: 60px;
    font-weight:bolder;
    text-transform: capitalize;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

#color-content2 span{
    display:inline-block;
    animation: wave2 0.2s ;
    animation-timing-function:linear;
    animation-iteration-count:1;
}



#color-content2 span.space{
    visibility: hidden;
    width:0.4em;
}

@keyframes wave2{
    0%{
        transform:translateY(0px);
    } 50% {
        transform: translateY(-15px);
    } 100% {
        transform: translateY(0px);
    }
}








#grow{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1000px;
    height: 200px;
    margin:5%;
}

#grow {
    font-weight:bolder;
    text-transform: capitalize;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: -4px -4px 0 #2628d5, 4px -4px 0 #dd1c1c, -4px 4px 0 #10ca25, 4px 4px 0 #dd950e;
}


#grow {
    font-size: 60px;
    animation: grow  1.2s ease-in-out infinite;
}


@keyframes grow{
    50% {
        transform: scale(0.8);
    } 
}



#jump{
    display: flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    height: fit-content;
    margin:5%;
}

#jump {
    font-weight:bolder;
    text-transform: capitalize;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background: linear-gradient(red, blue, yellow, green, red);
    color: transparent;
    background-clip: text;
    font-size: 80px;
}

#jump {
    animation: jump 1s ease-in-out infinite;
}

@keyframes jump {
    25% {
        transform:translateY(-28px);
    } 50% {
        transform:translateY(0);
    } 65%{
        transform:translateY(-8px);
    } 75% {
        transform:translateY(0);
    } 80% {
        transform:translateY(-5px);
    } 85% {
        transform:translateY(0);
    }
}