audio:hover {
    transition: 5s transform;
    transform: translate(500px);
}
@keyframes _red {
    0% {background-color: red}
    20% {background-color: yellow}
    40% {background-color: rgb(0, 255, 0);}
    60% {background-color: blue}
    80% {background-color: rgb(255, 0, 255)}
    100% {background-color: red}
}
@keyframes _yellow {
    0% {background-color: yellow}
    20% {background-color: rgb(0, 255, 0)}
    40% {background-color: blue}
    60% {background-color: rgb(255, 0, 255)}
    80% {background-color: red}
    100% {background-color: yellow}
}
@keyframes _green {
    0% {background-color: rgb(0, 255, 0);}
    20% {background-color: blue}
    40% {background-color: rgb(255, 0, 255)}
    60% {background-color: red}
    80% {background-color: yellow}
    100% {background-color: rgb(0, 255, 0);}
}
@keyframes _blue {
    0% {background-color: blue}
    20% {background-color: rgb(255, 0, 255)}
    40% {background-color: red}
    60% {background-color: yellow}
    80% {background-color: rgb(0, 255, 0);}
    100% {background-color: blue}
}
@keyframes _pink {
    0% {background-color: rgb(255, 0, 255)}
    20% {background-color: red}
    40% {background-color: yellow}
    60% {background-color: rgb(0, 255, 0);}
    80% {background-color: blue}
    100% {background-color: rgb(255, 0, 255)}
}
.freaky.hovered{
    
    transition: .1s transform ease;
    transform: 
        rotate(var(--rot)) 
        translate(var(--tx), var(--ty)) 
        scale(var(--scale)) 
        skew(var(--skewx), var(--skewy));
    pointer-events: auto;
}
h1:hover {
    transition-duration: 1s;
    transition-property: transform;
    transform: scale(270%);
}
div {
    display: inline-block;
    position: relative;
    margin: -18.65px;
    margin-top: -39px;
    margin-bottom: -78px;
    width: 200px;
    height: 200px;
    z-index: 10;
}
#red {
    background-color: red;
    animation-name: _red;
    animation-iteration-count: infinite;
    animation-duration: .01s;
    z-index: 8;
}
#green {
    background-color: rgb(0, 255, 0);
    animation-name: _green;
    animation-iteration-count: infinite;
    animation-duration: .01s;
    z-index: 12;
}
#blue {
    background-color: blue;
    animation-name: _blue;
    animation-iteration-count: infinite;
    animation-duration: .01s;
    z-index: 9;
}
#yellow {
    background-color: yellow;
    animation-name: _yellow;
    animation-iteration-count: infinite;
    animation-duration: .01s;
    z-index: 10;
}
#pink {
    background-color: rgb(255, 0, 225);
    animation-name: _pink;
    animation-iteration-count: infinite;
    animation-duration: .01s;
    z-index: 11; 
}
audio, video, h1{
    position: absolute;
}
p {
    position: relative;
    margin-top: -22px;
    color: white;
}
#high {
    display: flex;
    justify-content: center;
    text-align: center;
    z-index: 100;
}