1@import url("https://fonts.googleapis.com/css2?family=DotGothic16&family=Pixelify+Sans:wght@400..700&family=Rubik&family=Space+Grotesk:wght@400;700&display=swap");
  2
  3@font-face {
  4    font-family: "Cozette";
  5    src: url(/assets/fonts/CozetteVector.woff2);
  6}
  7
  8:root {
  9    --text-color: #664e64;
 10    --text-color-accent: #793a73;
 11
 12    --bg-color: #ffffff;
 13    --bg-sec-color: #f0d8e3;
 14
 15    color: var(--text-color);
 16    -webkit-font-smoothing: none;
 17    -moz-osx-font-smoothing: none;
 18    font-smoothing: none;
 19}
 20
 21a {
 22    color: var(--text-color-accent);
 23    text-decoration: none;
 24    font-size: 16px;
 25}
 26
 27#topbar {
 28    position: fixed;
 29    top: 0;
 30    left: 0;
 31    width: 100vw;
 32    background-color: var(--bg-sec-color);
 33    text-align: center;
 34    padding: 24px 16px 16px 16px;
 35}
 36
 37body {
 38    margin: 0;
 39    position: relative;
 40    font-family: "Cozette", "DotGothic16", sans-serif;
 41    font-weight: 400;
 42    font-style: normal;
 43    background-color: var(--bg-color);
 44    background-image: url(assets/images/bg-v1-dithered-3levels-colored-big.png);
 45    text-align: center;
 46    background-position: center;
 47    background-repeat: repeat-y;
 48}
 49
 50.content-main {
 51    height: 1312px;
 52}
 53
 54#content {
 55    position: relative;
 56    display: inline-block;
 57    min-width: 720px;
 58    max-width: 1280px;
 59    width: 100vw;
 60    padding: 128px 32px 32px 32px;
 61    text-align: left;
 62}
 63
 64#right {
 65    position: absolute;
 66    right: 32px;
 67    top: 128px;
 68    text-align: right;
 69}
 70
 71#chicken-microwave {
 72    position: absolute;
 73    right: 32px;
 74    top: 424px;
 75}
 76
 77#chris-chan {
 78    position: absolute;
 79    right: 172px;
 80    top: 436px;
 81    text-align: right;
 82}
 83
 84#error-container,
 85#counter-container,
 86#counter-container-reloads,
 87#counter-container-chart,
 88#footer {
 89    position: absolute;
 90    text-align: center;
 91    left: 0px;
 92    min-width: 720px;
 93    max-width: 1280px;
 94    width: 100vw;
 95}
 96
 97#counter-container {
 98    top: 560px;
 99}
100
101#counter-container-chart {
102    top: 720px;
103}
104
105#counter-container-reloads {
106    top: 996px;
107}
108
109#counter {
110    background: transparent;
111    border: none;
112    width: 600px;
113}
114
115#footer {
116    top: 1280px;
117}
118
119.link-container {
120    margin: 8px;
121    padding: 8px;
122    width: max-content;
123    border: var(--bg-sec-color) 1px solid;
124}
125
126.project-title {
127    font-size: 24px;
128}
129
130.project-header {
131    display: flex;
132    margin-top: 32px;
133    margin-bottom: 26px;
134}
135
136.project-info-right {
137    margin-left: auto;
138    text-align: right;
139}
140
141.project-info-left {
142    margin-right: auto;
143    text-align: left;
144}
145
146.separator {
147    width: 100%;
148    height: 0px;
149    border-bottom: var(--text-color-accent) dashed 2px;
150}
151
152.text-underline {
153    text-decoration: wavy underline;
154}
155
156.flag {
157    border: 1px solid var(--bg-sec-color);
158    margin-bottom: -1px;
159}
160
161#error-container {
162    font-size: 24px;
163    font-weight: bold;
164}
165
166#image-2x {
167    image-rendering: pixelated;
168    transform-origin: center center;
169    transform: scale(2);
170}
171
172#garden-banner-container {
173    text-align: center;
174}
175
176#garden-side-decoration-left,
177#garden-side-decoration-right {
178    background-image: url(/garden/assets/images/garden-flowers.png);
179    height: 100vh;
180    position: absolute;
181    width: 768px;
182}
183
184#garden-side-decoration-left {
185    top: 0px;
186    left: 0px;
187}
188
189#garden-side-decoration-right {
190    top: 0px;
191    right: 0px;
192    transform: scaleX(-1);
193    background-position-y: 200px;
194}
195
196/* Mobile specific */
197@media only screen and (hover: none) and (pointer: coarse) {
198    #topbar {
199        height: 96px;
200    }
201    .topbar-link {
202        font-size: 72px;
203        margin-left: 24px;
204        margin-right: 24px;
205    }
206    #content {
207        margin-top: 200px;
208    }
209    #profile-pic {
210        width: 0px;
211    }
212    body {
213        font-size: 48px;
214        background-image: url(assets/images/bg-v1-dithered-3levels-colored-big-2x.png);
215    }
216    #chris-chan {
217        top: 700px;
218        right: 320px;
219    }
220    #chicken-microwave {
221        top: 690px;
222        width: 256px;
223        image-rendering: pixelated;
224    }
225    #counter-container {
226        top: 950px;
227    }
228    #counter-container-reloads {
229        top: 1730px;
230    }
231    #counter-container-chart {
232        top: 1150px;
233    }
234    #footer {
235        top: 2900px;
236    }
237    a {
238        font-size: 48px;
239    }
240    #garden-banner {
241        width: 1024px;
242    }
243    #eightyeightbythirtyone {
244        height: 62px;
245    }
246    #counter-chart {
247        width: 1200px;
248    }
249    .flag {
250        height: 34px;
251    }
252    .project-title {
253        font-size: 128px;
254    }
255}