1 @font-face {
2 font-family: "Roboto Mono";
3 src: url("../fonts/roboto-mono-medium.ttf");
4 }
5
6 :root {
7 --font: "Roboto Mono";
8 --background: #0f0e17;
9 --foreground: #fffffe;
10 --pink: #e53170;
11 --red: #f25f4c;
12 --orange: #ff8906;
13 --branch: 1px solid #a7a9be;
14 }
15
16 html {
17 font-size: 18px;
18 }
19
20 body {
21 background: var(--background);
22 }
23
24 .container {
25 position: absolute;
26 top: 50%;
27 left: 45%;
28 transform: translate(-50%, -50%);
29 }
30
31 .prompt {
32 font-family: var(--font);
33 color: var(--foreground);
34 }
35
36 .prompt~.prompt {
37 padding: 1.5rem 0 0.3125rem;
38 }
39
40 span {
41 color: var(--pink);
42 }
43
44 h1 {
45 display: inline;
46 font-family: var(--font);
47 font-size: 1rem;
48 font-weight: normal;
49 color: var(--red);
50 }
51
52 .tree > ul {
53 margin: 0;
54 padding-left: 1rem;
55 }
56
57 ul {
58 list-style: none;
59 padding-left: 2.5rem;
60 }
61
62 li {
63 position: relative;
64 }
65
66 li::before, li::after {
67 content: "";
68 position: absolute;
69 left: -0.75rem;
70 }
71
72 li::before {
73 border-top: var(--branch);
74 top: 0.75rem;
75 width: 0.5rem;
76 }
77
78 li::after {
79 border-left: var(--branch);
80 height: 100%;
81 top: 0.25rem;
82 }
83
84 li:last-child::after {
85 height: 0.5rem;
86 }
87
88 a {
89 font-family: var(--font);
90 font-size: 1rem;
91 color: var(--foreground);
92 text-decoration: none;
93 outline: none;
94 }
95
96 a:hover {
97 color: var(--background);
98 background: var(--orange);
99 }
100
101 form h1 {
102 padding-left: 0.125rem;
103 }
104
105 input {
106 font-family: var(--font);
107 font-size: 1rem;
108 color: var(--foreground);
109 background-color: var(--background);
110 border: none;
111 }