body {
    background-image: linear-gradient(to bottom,rgb(0, 0, 0), rgb(5, 0, 105), rgb(79, 0, 190), rgb(93, 0, 223), rgb(79, 0, 190), rgb(5, 0, 105), rgb(0, 0, 0));
}

p {
    color: rgb(255, 255, 255);
    background-color: rgb(255, 230, 2);
}

.vid1 {
    transform: matrix(1, 0, 0.39, 2, 150, 0);
    background-color: aqua;
    padding: 50px;
}

.nicespinny:hover {
    transition: 60s;
    transform: rotate(90deg);
    animation-name: colorz;
    animation-duration: 60s;
}

@keyframes colorz {
    0% {background-color: rgb(255, 2, 2);}
    5% {background-color: rgb(255, 140, 0);}
    10% {background-color: rgb(255,230,2);}
    15% {background-color: rgb(64, 255, 0);}
    20% {background-color: rgb(0, 255, 255);}
    25% {background-color: rgb(0, 76, 255);}
    30% {background-color: rgb(187, 0, 255);}
    35% {background-color: rgb(255, 0, 230);}
    40% {background-color: rgb(255,2,2);}
    45% {background-color: rgb(255, 140, 0);}
    50% {background-color: rgb(255, 230, 2);}
    55% {background-color: rgb(64,255,0);}
    60% {background-color: rgb(0, 255, 255)}
    65% {background-color: rgb(0, 76, 255)}
    70% {background-color: rgb(187, 0, 255)}
    75% {background-color: rgb(255, 0, 230);}
    80% {background-color: rgb(255,2,2)}
    85% {background-color: rgb(255, 140, 0)}
    90% {background-color: rgb(255, 230, 2)}
    95% {background-color: rgb(64, 255, 0);}
    100% {background-color: rgb(0, 255, 255)}
}

.evilspinny:hover {
    transition: 2s;
    padding: 350px;
    transform: rotate(360deg);
    transition-timing-function: ease;
    font-size: xx-large;
    animation-name: flavourz;
    animation-duration: 20s;
}

@keyframes flavourz {
    0% {color: rgb(255, 0, 0);}
    15% {color: rgb(255, 166, 0);}
    30% {color: rgb(255, 255, 0);}
    45% {color: rgb(26, 255, 0);}
    60% {color: rgb(0, 225, 255);}
    75% {color: rgb(170, 0, 255);}
    90% {color: rgb(255, 0, 200);}
    100% {color: rgb(0, 0, 0);}
}

.evilerspinny:hover {
    transition: 1s;
    transform: rotate(100000deg);
    transition-timing-function: ease;
}

.shrimps {
    transform: skew(-25deg, -39deg);
}

.goober:hover {
    transition: 1s;
    transform: rotate(100000deg);
    transition-timing-function: ease-in-out;
    padding: 50px;
    border-radius: 100px;
    animation-name: ranboewz;
    animation-duration: 10s;
}

@keyframes ranboewz {
    0% {background-image: linear-gradient(to left, red, orange)}
    10% {background-image: linear-gradient(to left, orange, yellow)}
    20% {background-image: linear-gradient(to left, yellow, lime)}
    30% {background-image: linear-gradient(to left, lime, rgb(50, 163, 255))}
    40% {background-image: linear-gradient(to left, rgb(50,163,255), rgb(174, 0, 255))}
    50% {background-image: linear-gradient(to left,rgb(174,0,255),rgb(255, 0, 255))}
    60% {background-image: linear-gradient(to left, rgb(255,0,255), red)}
    70% {background-image: linear-gradient(to left, red, orange)}
    80% {background-image: linear-gradient(to left, orange, yellow)}
    90% {background-image: linear-gradient(to left, yellow, lime)}
    100% {background-image: linear-gradient(to left, lime, rgb(50, 163,255))}

}

.twst {
    transform: translate(50px, 139px);
    transition-timing-function: ease;
}