1:root {
2 --bg: #ffffff;
3 --fg: #292929;
4 --fg-mute: #d4d4d4;
5 --fg-link: #782a2a;
6 --fg-link-dark: #451e1e;
7
8 --subtext: 12px;
9 --default: 18px;
10 --header: 48px;
11}
12
13@font-face {
14 src: url('/.assets/pprsm.otf') format('opentype');
15 font-family: ppright;
16 font-weight: normal;
17 font-style: normal;
18 font-display: block;
19}
20
21@font-face {
22 src: url('/.assets/is.ttf') format('opentype');
23 font-family: instrument;
24 font-weight: normal;
25 font-style: normal;
26 font-display: block;
27}
28
29body {
30 cursor: url('/.assets/left_ptr.png'), auto;
31 display: flex;
32 flex-direction: column;
33 font-family: ppright, serif;
34 font-size: var(--default);
35 background: var(--bg);
36 color: var(--fg);
37 height: 100vh;
38 margin: 0;
39 overflow: hidden;
40}
41
42img {
43 object-fit: contain;
44 max-height: 80vh;
45 max-width: 100%;
46 height: auto;
47 width: auto;
48}
49
50.mcontain {
51 display: flex;
52 flex-direction: row;
53 position: absolute;
54 top: 0;
55 left: 0;
56 padding: 10px;
57 gap: 20px;
58 width: 100%;
59 height: calc(100vh - 50px);
60 box-sizing: border-box;
61}
62
63.mheader {
64 font-size: var(--header);
65 font-family: instrument;
66 margin-bottom: 5px;
67}
68
69.lcontain {
70 flex-shrink: 0;
71 width: 200px;
72 margin: auto 0;
73 margin-left: 40px;
74}
75
76.lcontain a {
77 text-decoration: none;
78}
79
80.lcontain ul {
81 list-style: none;
82 padding: 0;
83 margin: 0;
84}
85
86.lcontain ul ul {
87 padding-left: 20px;
88}
89
90.lcontain li {
91 margin: 4px 0;
92}
93
94.lcontain .liactive {
95 background: var(--fg-link);
96 color: var(--bg);
97}
98
99.lcontain .liactive::first-letter {
100 text-decoration: none;
101}
102
103.ccontain {
104 flex: 0 1 auto;
105 height: fit-content;
106 margin: auto 0;
107 overflow-y: auto;
108 padding: 0 10px;
109 background: var(--fg-mute);
110}
111
112.bcontain {
113 display: flex;
114 justify-content: right;
115 align-items: right;
116 background: var(--bg);
117 position: fixed;
118 bottom: 0;
119 width: 100vw;
120 padding: 0;
121 box-sizing: border-box;
122}
123
124.bcontain footer {
125 flex: 1;
126 padding: 10px;
127 font-size: var(--default);
128 box-sizing: border-box;
129 text-align: right;
130 background: var(--bg);
131}
132
133header {
134 font-size: var(--header);
135 letter-spacing: 0.4rem;
136}
137
138.logo {
139 max-width: 300px;
140 max-height: 60vh;
141 width: auto;
142 height: auto;
143}
144
145.button-grid {
146 display: flex;
147 flex-wrap: wrap;
148 flex-direction: column;
149 gap: 10px;
150 justify-content: center;
151 padding: 10px 0;
152}
153
154.button-grid__item {
155 display: inline-block;
156 background: var(--fg-link-dark);
157 padding: 2px;
158 line-height: 0;
159 filter: drop-shadow(4px 4px 0 var(--fg-link));
160}
161
162.button-grid__item:hover {
163 filter: drop-shadow(4px 4px 0 var(--fg-link-dark));
164}
165
166.button-grid__item img {
167 max-width: 100%;
168 height: auto;
169 border: 2px solid var(--fg-mute);
170}
171
172.button-grid__item:hover img {
173 border-color: var(--fg-link);
174}
175
176a {
177 cursor: url('/.assets/arrow_up.png'), pointer;
178 display: inline-block;
179 filter: drop-shadow(1px 1px 0 var(--fg-mute));
180 color: var(--fg);
181 position: relative;
182 text-decoration: none;
183}
184
185a::before {
186 position: absolute;
187 content: '';
188 z-index: -1;
189 top: 0;
190 left: 0;
191 width: 0%;
192 height: 100%;
193 background: var(--fg-link);
194 transition: width 0.1s ease;
195}
196
197a::first-letter {
198 background: var(--fg-link);
199 color: var(--bg);
200 text-decoration: underline;
201}
202
203a:hover {
204 text-decoration: underline;
205 color: var(--bg);
206}
207
208a:hover::before {
209 width: 100%;
210}
211
212h1, h2, h3, h4, h5, h6 {
213 font-family: instrument, serif;
214}
215
216.highlight {
217 color: var(--fg-link);
218}
219.italic {
220 font-style: italic;
221}
222.bold {
223 font-weight: bold;
224}
