diff --git a/s/css/cyber.css b/s/css/cyber.css deleted file mode 100644 index 0108c1d..0000000 --- a/s/css/cyber.css +++ /dev/null @@ -1,538 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Oswald:700|Press+Start+2P'); - -body { - margin: 1em auto 3em auto; - background-color: rgb(10, 10, 10); - color: #01ffbd; - font-family: 'Oswald', sans-serif; - font-size: 17px; -} - -a { - color: #f300ff; - text-decoration: none; -} - -a:hover { - color: #ffffff; - text-decoration: none; -} - -.return { - text-align: center; - font-family: 'Press Start 2P', cursive; - font-size: 29px; - text-decoration: none; - animation: glitch2 2s steps(100) infinite; - color: white; -} - -.thumb { - border: 2px solid rgb(4, 232, 189); -} - -/* Color the Controls */ -a#next { - color: #01f4b5; -} - -a#next:hover { - animation: glitch2 2s steps(100) infinite; -} - -a#random { - color: #01f4b5; -} - -a#random:hover { - animation: glitch2 2s steps(100) infinite; -} - -a#prev { - color: #01f4b5; -} - -a#prev:hover { - animation: glitch2 2s steps(100) infinite; -} - -a#holland { - color: white; -} - -a#holland:hover { - color: #cc0ccb; - animation: glitch2 2s steps(100) infinite; -} - -/* PANEL */ -.panel { - background-color: rgba(4, 27, 23, 0.61); - border: 5px solid #9a0039; -} - -@keyframes noise-anim { - 0% { - clip: rect(2px, 9999px, 94px, 0); - } - 5% { - clip: rect(89px, 9999px, 60px, 0); - } - 10% { - clip: rect(66px, 9999px, 50px, 0); - } - 15% { - clip: rect(3px, 9999px, 54px, 0); - } - 20% { - clip: rect(26px, 9999px, 19px, 0); - } - 25% { - clip: rect(20px, 9999px, 66px, 0); - } - 30% { - clip: rect(18px, 9999px, 43px, 0); - } - 35% { - clip: rect(54px, 9999px, 48px, 0); - } - 40% { - clip: rect(33px, 9999px, 66px, 0); - } - 45% { - clip: rect(24px, 9999px, 61px, 0); - } - 50% { - clip: rect(30px, 9999px, 18px, 0); - } - 55% { - clip: rect(16px, 9999px, 96px, 0); - } - 60% { - clip: rect(2px, 9999px, 20px, 0); - } - 65% { - clip: rect(84px, 9999px, 19px, 0); - } - 70% { - clip: rect(50px, 9999px, 5px, 0); - } - 75% { - clip: rect(60px, 9999px, 80px, 0); - } - 80% { - clip: rect(26px, 9999px, 96px, 0); - } - 85% { - clip: rect(100px, 9999px, 74px, 0); - } - 90% { - clip: rect(82px, 9999px, 29px, 0); - } - 95% { - clip: rect(34px, 9999px, 97px, 0); - } - 100% { - clip: rect(91px, 9999px, 44px, 0); - } -} - -.return:after { - content: attr(class="return"); - position: absolute; - left: 2px; - text-shadow: -1px 0 red; - top: 0; - color: white; - background: black; - overflow: hidden; - clip: rect(0, 900px, 0, 0); - animation: noise-anim 2s infinite linear alternate-reverse; -} - -@keyframes noise-anim-2 { - 0% { - clip: rect(76px, 9999px, 52px, 0); - } - 5% { - clip: rect(5px, 9999px, 11px, 0); - } - 10% { - clip: rect(25px, 9999px, 9px, 0); - } - 15% { - clip: rect(56px, 9999px, 30px, 0); - } - 20% { - clip: rect(63px, 9999px, 93px, 0); - } - 25% { - clip: rect(84px, 9999px, 63px, 0); - } - 30% { - clip: rect(55px, 9999px, 54px, 0); - } - 35% { - clip: rect(53px, 9999px, 52px, 0); - } - 40% { - clip: rect(40px, 9999px, 66px, 0); - } - 45% { - clip: rect(50px, 9999px, 15px, 0); - } - 50% { - clip: rect(90px, 9999px, 31px, 0); - } - 55% { - clip: rect(33px, 9999px, 4px, 0); - } - 60% { - clip: rect(18px, 9999px, 57px, 0); - } - 65% { - clip: rect(2px, 9999px, 21px, 0); - } - 70% { - clip: rect(38px, 9999px, 93px, 0); - } - 75% { - clip: rect(61px, 9999px, 44px, 0); - } - 80% { - clip: rect(83px, 9999px, 27px, 0); - } - 85% { - clip: rect(80px, 9999px, 51px, 0); - } - 90% { - clip: rect(91px, 9999px, 39px, 0); - } - 95% { - clip: rect(59px, 9999px, 36px, 0); - } - 100% { - clip: rect(74px, 9999px, 80px, 0); - } -} -.return:before { - content: attr(data-text); - position: absolute; - left: -2px; - text-shadow: 1px 0 blue; - top: 0; - color: white; - background: transparent; - overflow: hidden; - clip: rect(0, 900px, 0, 0); - animation: noise-anim-2 3s infinite linear alternate-reverse; -} - -@keyframes glitch2 { - 0% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 1% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 2% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 3% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 4% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 5% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 6% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 7% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 8% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 9% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 10% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 11% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 12% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 13% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 14% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 15% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 16% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 17% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 18% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 19% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 20% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 21% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 22% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 23% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 24% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 25% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 26% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 27% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 28% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 29% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 30% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 31% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 32% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 33% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 34% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 35% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 36% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 37% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 38% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 39% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 40% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 41% { - text-shadow: 50px 0 0 blue, -50px 0 0 lime; - } - 42% { - text-shadow: 0 0 0 blue, 0 0 0 lime; - } - 43% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 44% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 45% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 46% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 47% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 48% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 49% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 50% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 51% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 52% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 53% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 54% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 55% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 56% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 57% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 58% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 59% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 60% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 61% { - text-shadow: 30px 0 0 red, -30px 0 0 lime; - } - 62% { - text-shadow: 0 0 0 red, 0 0 0 lime; - } - 63% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; - } - 64% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; - } - 65% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; - } - 66% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; - } - 67% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 68% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 69% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 70% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 71% { - text-shadow: 70px 0 0 red, -70px 0 0 blue; - } - 72% { - text-shadow: 0 0 0 red, 0 0 0 blue; - } - 73% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 74% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 75% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 76% { - text-shadow: 1px 0 0 red, -1px 0 0 blue; - } - 77% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 78% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 79% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 80% { - text-shadow: -1px 0 0 red, 1px 0 0 blue; - } - 81% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 82% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 83% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 84% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 85% { - text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; - } - 86% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 87% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 88% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 89% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 90% { - text-shadow: -1px 0 0 red, 1px 0 0 lime; - } - 91% { - text-shadow: 60px 0 0 lime, -60px 0 0 blue; - } - 92% { - text-shadow: 0 0 0 lime, 0 0 0 blue; - } - 92% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 93% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 94% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 95% { - text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; - } - 96% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 97% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 98% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 99% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } - 100% { - text-shadow: -1px 0 0 blue, 1px 0 0 lime; - } -}