1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
@font-face {
font-family: "yess";
src: url(https://github.com/Luking9/Creepy-fonts/raw/master/damagrafik_script/DamagrafikScript-Regular.ttf) format("truetype");
}
p:before, li:before {
content: "Happy April Fools! I am so glad to meet you, dear peppa pig! Hooray! Please check out the libre society project when you're AVAIL for some serious stuff. For now, enjoy some CSS. ";
}
body {
background-color: black;
color: white;
font-family: "yess" cursive fantasy serif monospace sans-serif;
margin: 3%;
line-height: 1.4;
}
*, body, div, p, h1, h2, h3, h4, h5, h6, ul, ol{
padding: 2px;
animation-name: rotate;
animation-iteration-count: 1;
animation-duration: 5s;
border: 2px dotted gray;
transition: all 25s;
}
p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover {
perspective: 0px;
border: 2px dotted red;
font-size: 200%;
transition: all 5s;
}
p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active {
font-size: 600%;
perspective: 0px;
border: 2px solid lime;
transition: all 5s;
}
h1 {
text-align: center;
}
#main {
margin: auto;
columns: 6 50em;
}
#main div {
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;
}
a:visited {
color: violet;
text-decoration: none;
border: solid violet 1px;
padding: 1px;
}
a:hover {
color: yellow;
text-decoration: none;
transition: all 0.5s;
font-size: 300%;
border: solid yellow 1px;
padding: 1px;
}
a:active {
color: lime;
text-decoration: none;
border: solid lime 1px;
padding: 1px;
transition: all 0.5s;
font-size: 5000%;
}
#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: 200%;
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: font-size 1s;
animation-name: shake;
animation-iteration-count: 1;
animation-duration: 3s;
}
.alarm {
color: red;
}
.alert {
color: orange;
}
.good {
color: lime;
}
@keyframes shake {
0%, 100% {transform: rotate(0deg);}
10%, 30%, 50%, 70%, 90% {transform: rotate(-3deg);}
20%, 40%, 60%, 80% {transform: rotate(3deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(720deg);}
}
@keyframes grow {
to { font-size: 1000%; }
}
|