#rgb {
    animation-name: rgb_animation;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes rgb_animation {
    0% {color: rgb(0,0,0);}
    16% {color: rgb(255, 0, 0);}
    32% {color: rgb(255, 255, 0);}
    48% {color: rgb(0,255,0);}
    58% {color: rgb(0,255,255);}
    68% {color: rgb(0,0,255);}
    84% {color: rgb(255,0,255);}
    100% {color: rgb(255, 255, 255);}
}

#hex {
    color: #0020f080;
}

#hsl {
    animation-name: hsl_animation;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes hsl_animation {
    0% {color: hsl(0,50%,75%); font-size: 30px;}
    10%{color: hsl(36,100%,50%);}
    20%{color: hsl(72,50%,25%);}
    30%{color: hsl(108, 100%, 50%);}
    40%{color: hsl(144, 50%, 75%);}
    50%{color: hsl(180,100%,50%); font-size: 50px;}
    60%{color: hsl(216,50%,25%);}
    70%{color: hsl(252,100%,50%);}
    80%{color: hsl(288,50%,75%);}
    90%{color: hsl(324,100%,50%);}
    100% {color: hsl(360,50%,25%); font-size: 30px;}
}

p {
    font-size: 40px;
}

body {
    background-color: #008080;
}