ASCII text
1
@import url("/fonts/inter/inter.css");
2
@import url("/fonts/mononoki/mononoki.css");
3
body,
5
html {
6
margin: 0;
7
width: 100vw;
8
font-size: 95%;
9
font-family: "Inter";
10
}
11
body {
13
background-image: url("/Background.webp");
14
background-color: #000;
15
color: #fff;
16
}
17
:any-link {
19
color: #9a9af0;
20
}
21
:any-link:active {
23
color: #f09a9a;
24
}
25
main {
27
padding: 8px;
28
box-sizing: border-box;
29
max-width: 60vw;
30
margin: 0 auto;
31
background-color: #19191b;
32
}
33
.breadcrumbs {
35
list-style: none;
36
padding: 8px;
37
box-sizing: border-box;
38
margin: 0 auto;
39
width: 60vw;
40
background-color: #19191b;
41
}
42
.breadcrumbs li {
44
display: inline-block;
45
}
46
.breadcrumbs li + li::before {
48
content: "\00A5";
49
}
50
body > header {
52
display: flex;
53
padding: 20px;
54
box-sizing: border-box;
55
align-items: center;
56
width: 60vw;
57
margin: 0 auto;
58
background-color: #0b0b0c;
59
}
60
body > header :any-link {
62
color: #f1f1f1 !important;
63
font-style: italic;
64
text-decoration: none;
65
}
66
body > header h2 {
68
font-size: large;
69
margin: 0;
70
}
71
body > header nav {
73
font-size: large;
74
padding-left: 15px;
75
margin-left: 15px;
76
border-left: 1px solid white;
77
}
78
body > header nav :any-link:not(:last-child) {
80
margin-right: 15px;
81
}
82
tr > :not(:last-child) {
84
padding-right: 15px;
85
}
86
body > footer {
88
margin: 8px auto;
89
margin-top: 12px;
90
width: fit-content;
91
padding: 15px;
92
background-color: #19191b;
93
position: absolute;
94
top: 15px;
95
right: 15px;
96
}
97
.footer-link-list-holder {
99
flex: 1;
100
}
101
.footer-link-list {
103
list-style: none;
104
padding-left: 0;
105
margin: 0;
106
}
107
.footer-link-list-label {
109
font-weight: 900;
110
font-size: 1.05rem;
111
}
112
img {
114
image-rendering: optimizeQuality;
115
}
116
abbr :any-link {
118
text-decoration-style: dotted;
119
text-decoration-color: currentColor;
120
}
121
abbr:has(:any-link) {
123
text-decoration: none;
124
}
125
kbd {
127
white-space: pre-wrap;
128
font-family: "mononoki", monospace;
129
display: inline-block;
130
font-size: .85rem;
131
}
132
:not(samp) kbd:not(:has(kbd)) {
134
background-color: #222728;
135
color: currentColor;
136
border: currentColor 1px solid;
137
border-radius: 10px;
138
padding: 5px;
139
margin: 1px 0;
140
}
141
samp kbd {
143
display: block;
144
}
145
samp {
147
background-color: #282722;
148
color: #fff;
149
font-family: "mononoki", monospace;
150
padding: 10px;
151
display: block;
152
font-size: .85rem;
153
white-space: pre-wrap;
154
}
155
.button-hotlink {
157
display: block;
158
margin-top: 3px;
159
}
160
input,
162
textarea {
163
appearance: none;
164
background-color: #000;
165
color: #fff;
166
border: 1px solid white;
167
}
168
input[type=checkbox],
170
input[type=radio] {
171
width: 1em;
172
height: 1em;
173
}
174
input[type=radio] {
176
border-radius: 100%;
177
}
178
input:is([type=radio], [type=checkbox]):checked {
180
background-color: #f00;
181
}
182
.ticker-wrapper {
184
overflow: hidden;
185
display: block;
186
width: 100%;
187
}
188
.ticker-wrapper .ticker {
190
animation: infinite linear ticker 14s;
191
white-space: nowrap;
192
display: inline-block;
193
box-sizing: content-box;
194
}
195
.ticker-wrapper.pauseonhover:hover > * {
197
animation-play-state: paused;
198
}
199
@keyframes ticker {
201
0% {
202
margin-left: 100%;
203
transform: translateX(0%);
204
}
205
100% {
207
margin-left: 0;
208
transform: translateX(-100%);
209
}
210
}
211
.cool-people-prj :any-link {
213
text-decoration: none;
214
}
215
@media (prefers-reduced-motion) {
217
.ticker-wrapper .ticker {
218
animation: none;
219
}
220
.ticker-wrapper {
222
overflow: scroll;
223
}
224
}
225
.ticker-wrapper.ticker-reversed .ticker {
227
animation-direction: reverse;
228
}
229
.cool-people-prj-no-bttn :any-link {
231
margin-right: 5px;
232
}
233