diff options
Diffstat (limited to 'lovely/style.css')
| -rw-r--r-- | lovely/style.css | 255 |
1 files changed, 255 insertions, 0 deletions
diff --git a/lovely/style.css b/lovely/style.css new file mode 100644 index 0000000..dd997a0 --- /dev/null +++ b/lovely/style.css @@ -0,0 +1,255 @@ +body { + background-color: black; + color: white; + font-family: sans-serif; + line-height: 1.4; + transition: all 1s; +} +body:hover { + transition: all 1s; + animation-name: shakenn; + animation-iteration-count: 1; + animation-duration: 1s; +} +p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover { + border: solid yellow 1px; + font-size: 3000%; + transition: all 0.5s; + animation-name: shakenn; + animation-iteration-count: 5; + animation-duration: 1s; +} +p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active { + border: solid lime 1px; + font-size: 30000%; + transition: all 0.5s; + animation-name: shakenn; + animation-iteration-count: 5; + animation-duration: 1s; +} +p, h1, h2, h3, h4, h5, h6, li { + font-size: 100%; + transition: all 0.5s; + padding: 5px; +} +h1 { + text-align: center; +} +.wrapper { + margin: auto; + /* display: flex; */ + /* flex-flow: row wrap; */ + /* flex-flow: row wrap; */ + /* justify-content: center; */ + /* align-items: flex-start; */ + /* align-content: flex-start; */ + /* height: calc(100vh); */ + /* gap: 3%; */ +} +.wrapper div { + min-width: 30ex; + max-width: 100ex; + margin: auto; +} +#footer { + line-height: 1.2; + font-size: 80%; +} +a:link { + color: cyan; + text-decoration: none; + border: solid cyan 1px; + padding: 1px; + font-size: 100%; + transition: all 0.5s; +} +a:visited { + color: violet; + text-decoration: none; + border: solid violet 1px; + padding: 1px; + font-size: 100%; + transition: all 0.5s; +} +a:hover { + color: yellow; + text-decoration: none; + border: solid yellow 1px; + padding: 1px; + font-size: 105%; + transition: all 0.5s; +} +a:active { + color: lime; + text-decoration: none; + border: solid lime 1px; + padding: 1px; + font-size: 200%; + transition: all 0.5s; +} +#nav ul { + list-style-type: none; + padding: 1em 0; + text-align: center; + /*************************************/ + /* border-top: 2px solid black; */ + /* border-bottom: 2px solid back; */ + /*************************************/ +} +#nav ul li { + display: inline; + padding: 0 1.5em; + border: none; +} +#nav ul li a { + font-weight: bold; +} +#majornote { + font-size: 120%; + color: lime; + display: block; + border: 3px dashed lime; + transition: all 0.5s; +} +#campaign { + font-size: 120%; + color: red; + display: block; + border: 3px dashed red; + transition: all 0.5s; +} +#campaign:hover{ + font-size: 140%; + transition: all 0.5s; + animation-name: shake; + animation-iteration-count: 1; + animation-duration: 5s; + padding: 1ex; +} +.alarm { + color: red; +} +.alert { + color: orange; +} +.good { + color: lime; +} +@keyframes shaken { + 0%, 100% {transform: rotate(0deg);} + 10%, 30%, 50%, 70%, 90% {transform: rotate(-0.4deg);} + 20%, 40%, 60%, 80% {transform: rotate(0.4deg);} +} +@keyframes shake { + 0%, 100% {transform: rotate(0deg);} + 10%, 30%, 50%, 70%, 90% {transform: rotate(-1deg);} + 20%, 40%, 60%, 80% {transform: rotate(1deg);} +} +@keyframes shakey { + 0%, 100% {transform: rotate(0deg);} + 10%, 30%, 50%, 70%, 90% {transform: rotate(-45deg);} + 20%, 40%, 60%, 80% {transform: rotate(45deg);} +} +@keyframes shakenn { +0% {background-color: black; transform: rotate(0deg);} +1% {background-color: black; transform: rotate(3deg);} +2% {background-color: black; transform: rotate(7deg);} +3% {background-color: black; transform: rotate(10deg);} +4% {background-color: black; transform: rotate(14deg);} +5% {background-color: black; transform: rotate(18deg);} +6% {background-color: black; transform: rotate(21deg);} +7% {background-color: black; transform: rotate(25deg);} +8% {background-color: black; transform: rotate(28deg);} +9% {background-color: black; transform: rotate(32deg);} +10% {background-color: black; transform: rotate(36deg);} +11% {background-color: black; transform: rotate(39deg);} +12% {background-color: black; transform: rotate(43deg);} +13% {background-color: black; transform: rotate(46deg);} +14% {background-color: black; transform: rotate(50deg);} +15% {background-color: black; transform: rotate(54deg);} +16% {background-color: black; transform: rotate(57deg);} +17% {background-color: black; transform: rotate(61deg);} +18% {background-color: black; transform: rotate(64deg);} +19% {background-color: black; transform: rotate(68deg);} +20% {background-color: black; transform: rotate(72deg);} +21% {background-color: black; transform: rotate(75deg);} +22% {background-color: black; transform: rotate(79deg);} +23% {background-color: black; transform: rotate(82deg);} +24% {background-color: black; transform: rotate(86deg);} +25% {background-color: black; transform: rotate(90deg);} +26% {background-color: black; transform: rotate(93deg);} +27% {background-color: black; transform: rotate(97deg);} +28% {background-color: black; transform: rotate(100deg);} +29% {background-color: black; transform: rotate(104deg);} +30% {background-color: black; transform: rotate(108deg);} +31% {background-color: black; transform: rotate(111deg);} +32% {background-color: black; transform: rotate(115deg);} +33% {background-color: black; transform: rotate(118deg);} +34% {background-color: black; transform: rotate(122deg);} +35% {background-color: black; transform: rotate(126deg);} +36% {background-color: black; transform: rotate(129deg);} +37% {background-color: black; transform: rotate(133deg);} +38% {background-color: black; transform: rotate(136deg);} +39% {background-color: black; transform: rotate(140deg);} +40% {background-color: black; transform: rotate(144deg);} +41% {background-color: black; transform: rotate(147deg);} +42% {background-color: black; transform: rotate(151deg);} +43% {background-color: black; transform: rotate(154deg);} +44% {background-color: black; transform: rotate(158deg);} +45% {background-color: black; transform: rotate(162deg);} +46% {background-color: black; transform: rotate(165deg);} +47% {background-color: black; transform: rotate(169deg);} +48% {background-color: black; transform: rotate(172deg);} +49% {background-color: black; transform: rotate(176deg);} +50% {background-color: black; transform: rotate(180deg);} +51% {background-color: black; transform: rotate(176deg);} +52% {background-color: black; transform: rotate(172deg);} +53% {background-color: black; transform: rotate(169deg);} +54% {background-color: black; transform: rotate(165deg);} +55% {background-color: black; transform: rotate(162deg);} +56% {background-color: black; transform: rotate(158deg);} +57% {background-color: black; transform: rotate(154deg);} +58% {background-color: black; transform: rotate(151deg);} +59% {background-color: black; transform: rotate(147deg);} +60% {background-color: black; transform: rotate(144deg);} +61% {background-color: black; transform: rotate(140deg);} +62% {background-color: black; transform: rotate(136deg);} +63% {background-color: black; transform: rotate(133deg);} +64% {background-color: black; transform: rotate(129deg);} +65% {background-color: black; transform: rotate(126deg);} +66% {background-color: black; transform: rotate(122deg);} +67% {background-color: black; transform: rotate(118deg);} +68% {background-color: black; transform: rotate(115deg);} +69% {background-color: black; transform: rotate(111deg);} +70% {background-color: black; transform: rotate(108deg);} +71% {background-color: black; transform: rotate(104deg);} +72% {background-color: black; transform: rotate(100deg);} +73% {background-color: black; transform: rotate(97deg);} +74% {background-color: black; transform: rotate(93deg);} +75% {background-color: black; transform: rotate(90deg);} +76% {background-color: black; transform: rotate(86deg);} +77% {background-color: black; transform: rotate(82deg);} +78% {background-color: black; transform: rotate(79deg);} +79% {background-color: black; transform: rotate(75deg);} +80% {background-color: black; transform: rotate(72deg);} +81% {background-color: black; transform: rotate(68deg);} +82% {background-color: black; transform: rotate(64deg);} +83% {background-color: black; transform: rotate(61deg);} +84% {background-color: black; transform: rotate(57deg);} +85% {background-color: black; transform: rotate(54deg);} +86% {background-color: black; transform: rotate(50deg);} +87% {background-color: black; transform: rotate(46deg);} +88% {background-color: black; transform: rotate(43deg);} +89% {background-color: black; transform: rotate(39deg);} +90% {background-color: black; transform: rotate(36deg);} +91% {background-color: black; transform: rotate(32deg);} +92% {background-color: black; transform: rotate(28deg);} +93% {background-color: black; transform: rotate(25deg);} +94% {background-color: black; transform: rotate(21deg);} +95% {background-color: black; transform: rotate(18deg);} +96% {background-color: black; transform: rotate(14deg);} +97% {background-color: black; transform: rotate(10deg);} +98% {background-color: black; transform: rotate(7deg);} +99% {background-color: black; transform: rotate(3deg);} +100% {background-color: black; transform: rotate(0deg);} +} |