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:root {
  4  --text-color: #664e64;
  5  --text-color-accent: #793a73;
  6
  7  --bg-color: #ffffff;
  8  --bg-sec-color: #f0d8e3;
  9
 10  color: var(--text-color);
 11}
 12
 13a {
 14  color: var(--text-color-accent);
 15  text-decoration: none;
 16  font-size: 16px;
 17}
 18
 19#topbar {
 20  position: fixed;
 21  top: 0;
 22  left: 0;
 23  width: 100vw;
 24  background-color: var(--bg-sec-color);
 25  text-align: center;
 26  padding: 24px 16px 16px 16px;
 27}
 28
 29body {
 30  margin: 0;
 31  position: relative;
 32  font-family: "DotGothic16", sans-serif;
 33  font-weight: 400;
 34  font-style: normal;
 35  background-color: var(--bg-color);
 36  background-image: url(assets/images/logo-64px-padded.png);
 37  text-align: center;
 38}
 39
 40.content-main {
 41  height: 1312px;
 42}
 43
 44#content {
 45  position: relative;
 46  display: inline-block;
 47  min-width: 720px;
 48  max-width: 1280px;
 49  width: 100vw;
 50  padding: 128px 32px 32px 32px;
 51  text-align: left;
 52}
 53
 54#right {
 55  position: absolute;
 56  right: 32px;
 57  top: 128px;
 58  text-align: right;
 59}
 60
 61#chicken-microwave {
 62  position: absolute;
 63  right: 32px;
 64  top: 424px;
 65}
 66
 67#chris-chan {
 68  position: absolute;
 69  right: 172px;
 70  top: 436px;
 71  text-align: right;
 72}
 73
 74#error-container,
 75#counter-container,
 76#counter-container-reloads,
 77#counter-container-chart,
 78#footer {
 79  position: absolute;
 80  text-align: center;
 81  left: 0px;
 82  min-width: 720px;
 83  max-width: 1280px;
 84  width: 100vw;
 85}
 86
 87#counter-container {
 88  top: 560px;
 89}
 90
 91#counter-container-chart {
 92  top: 720px;
 93}
 94
 95#counter-container-reloads {
 96  top: 996px;
 97}
 98
 99#counter {
100  background: transparent;
101  border: none;
102  width: 600px;
103}
104
105#footer {
106  top: 1280px;
107}
108
109.link-container {
110  margin: 8px;
111  padding: 8px;
112  width: max-content;
113  border: var(--bg-sec-color) 1px solid;
114}
115
116.project-title {
117  font-size: 24px;
118}
119
120.project-header {
121  display: flex;
122  margin-top: 32px;
123  margin-bottom: 26px;
124}
125
126.project-info-right {
127  margin-left: auto;
128  text-align: right;
129}
130
131.project-info-left {
132  margin-right: auto;
133  text-align: left;
134}
135
136.separator {
137  width: 100%;
138  height: 1px;
139  background: var(--bg-sec-color);
140}
141
142.text-underline {
143  text-decoration: wavy underline;
144}
145
146.flag {
147  border: 1px solid var(--bg-sec-color);
148  margin-bottom: -1px;
149}
150
151#error-container {
152  font-size: 24px;
153  font-weight: bold;
154}
155
156#image-2x {
157  image-rendering: pixelated;
158  transform-origin: center center;
159  transform: scale(2);
160}
161
162#garden-banner-container{
163  text-align: center;
164}
165
166#garden-side-decoration-left,#garden-side-decoration-right{
167  background-image: url(/garden/assets/images/garden-flowers.png);
168  height: 100vh;
169  position: absolute;
170  width: 768px;
171}
172
173#garden-side-decoration-left{
174  top: 0px;
175  left: 0px;
176}
177
178#garden-side-decoration-right{
179  top: 0px;
180  right: 0px;
181  transform: scaleX(-1);
182  background-position-y:200px;
183}