1@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;700;900&display=swap");
2@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Libre+Baskerville&display=swap");
3
4::-webkit-scrollbar {
5 width: 10px;
6}
7
8::-webkit-scrollbar-track-piece {
9 background-color: #393939;
10}
11
12::-webkit-scrollbar-thumb {
13 background-color: #ffffff;
14}
15
16html {
17 scrollbar-color: #ffffff #393939;
18 scrollbar-width: thin;
19}
20
21body {
22 position: relative;
23 margin: 0;
24 color: white;
25 background: #000000;
26 text-shadow: 0px 0px 5px black;
27 width: 100vw;
28 height: 100vh;
29 font-weight: normal;
30 font-family: "Libre Baskerville";
31 font-size: 24px;
32}
33
34.line-div {
35 display: flex;
36}
37
38#cursor-div {
39 left: -50%;
40 top: 50%;
41 position: absolute;
42 backdrop-filter: invert(100%);
43 color: transparent;
44 transition: all 0.1s ease-in-out;
45}
46
47.character-div {
48 color: white;
49 font-weight: normal;
50}
51
52.character-div-error {
53 color: red;
54}
55
56.character-div-written {
57 font-weight: bold;
58}
59
60#lines-container {
61 position: absolute;
62 left: 50%;
63 top: 50%;
64 -webkit-transform: translate(-50%, -50%);
65 transform: translate(-50%, -50%);
66}
67
68#status-container {
69 position: absolute;
70 left: 20%;
71 top: 20%;
72 font-weight: bold;
73 font-family: "Source Sans Pro";
74 font-size: 24px;
75}
76
77#container {
78 position: relative;
79 width: 100%;
80 height: 100vh;
81 scroll-snap-type: y mandatory;
82 overflow-y: scroll;
83}
84
85#home-link {
86 position: absolute;
87 top: 40px;
88 right: 40px;
89}
90
91#home-link-a {
92 color: white;
93 text-decoration: none;
94 font-size: 32px;
95 font-weight: 400;
96}
97
98#home-icon {
99 width: 32px;
100 height: 32px;
101}