/* NAME on NAV enlargement on hover */
.nav-name:hover {
    transform: scale(1.02);
    transition: all .1s ease-in-out;
}

/* NAV color change on hover */


a.nav-link:hover {
    text-decoration: underline wavy #858483;
}

a:hover .hover-red {
    font-style: italic;
    color: #F2483B; 
}

a:hover .hover-blue {
    font-style: italic;
    color: #2451EE; 
}

a:hover .hover-orange {
    font-style: italic;
    color: #FF7816; 
}

a:hover .hover-green {
    font-style: italic;
    color: #86C600;
}

a:hover .hover-yellow {
    font-style: italic;
    color: #FFD749;
}

p a:hover {
    font-style: italic;
}

/* HOME project underline on hover */

a p:hover, footer a:hover {
    font-style: italic;
    text-decoration: underline wavy;
}


a:hover.hover-orange-underline {
    text-decoration: underline wavy #FF7816 1.3px;
}

a:hover.hover-underline {
    text-decoration: underline wavy 1.3px;
}

a:hover.orange, #item-1 a p:hover  {
    text-decoration-color: #FF7816;
}

a:hover.yellow, #item-3 a p:hover {
    text-decoration-color: #FFD749;
}

a:hover.blue, #item-2 a p:hover {
    text-decoration-color: #2451EE;
}

a:hover.red, #item-4 a p:hover {
    text-decoration-color: #F2483B;
}

a:hover.green, #item-5 a p:hover {
    text-decoration-color: #86C600;
}





h2.wavy span {
    /* margin: none; */
    position: relative;
    display: inline-block;
    animation: floating 3s ease-in-out infinite;
    animation-delay: calc(.1s * var(--i))
}

@keyframes floating {
    0% { transform: translateY(0); }
    65%  { transform: translateY(-1.8rem); }
    100%   { transform: translateY(0); }    
}

h2.wavy-slow span {
    /* margin: none; */
    position: relative;
    display: inline-block;
    animation: floating-slow 4s ease-in-out infinite;
    animation-delay: calc(.1s * var(--i))
}

@keyframes floating-slow {
    0% { transform: translateY(0); }
    65%  { transform: translateY(-1.8rem); }
    100%   { transform: translateY(0); }    
}

/* testing rotate */

@keyframes rotating-1 {
    0% { transform: rotate(0); }
    65% { transform: rotate(30deg); }
    100% { transform: rotate(0); }
}


/* #s {rotate: ;}
#o {color: #F2483B; font-size: 3rem;}
#p {color: #FACB28; font-size: 3.2rem;}
#h {color: #86C600; font-size: 3.4rem;}
#i {color: #BE55FF; font-size: 3.3rem;}
#a {color: #FF7816; font-size: 3.4rem;} */