---
# System prepended metadata

title: CYP DISCO
tags: [OOAD]

---

---
title: CYP DISCO
tags: "OOAD"
---

<!-- <span class='disco'><img src="https://i.imgur.com/rhdv19Q.png"></span>

<span class='disco'><img src="https://i.imgur.com/8PFLZdS.png"></span> -->

<style>
.disco
{
    display: inline-block;
    position: relative;    
    animation: sway 4s calc(var(--i) *.39s) linear infinite, rainbow 1s infinite;
}
@keyframes rainbow
{
      0% {filter: hue-rotate(  0deg);}
     25% {filter: hue-rotate( 90deg);}
     50% {filter: hue-rotate(180deg);}
     75% {filter: hue-rotate(270deg);}
    100% {filter: hue-rotate(360deg);}
}
@keyframes sway
{
      0% {left:  0%; transform: scaleX(1);}
     25% {transform: scaleX(-1);}
     50% {left: 74%; transform: scaleX(1);}
     75% {transform: scaleX(-1);}
    100% {left:  0%; transform: scaleX(1);}
}
.disco img
{
    width: 200px;
}
</style>


<!-- 20230315  -->
<style>
    
body
{
    background-image: url('https://i.imgur.com/9c51gZX.png');
    background-size: 50% 50%;    
    animation: veryimportant 1000s linear infinite;
}
@keyframes veryimportant
{
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 20000% 20000%;
    }
}

#doc
{
/*     text-shadow: 0 3px 10px #39c5bb, 0 -3px 10px #39c5bbaa */
    animation: txt 2s ease infinite;
}
@keyframes txt
{
    0% {text-shadow: 0 3px 10px #39c5bb, 0 -3px 10px #39c5bbaa}
    50% {text-shadow: 0 3px 10px #ff0000, 0 -3px 10px #ff0000}
    100% {text-shadow: 0 3px 10px #39c5bb, 0 -3px 10px #39c5bbaa}
}
img
{
    animation: cypboss 2s ease infinite;
}
@keyframes cypboss
{
    0% {box-shadow: 0px 0px 5px red;}
    50% {box-shadow: 0px 0px 40px red;}
    100% {box-shadow: 0px 0px 5px #ff0000;}
}
    
</style>
