1@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');
2
3* {
4 box-sizing: border-box;
5 margin: 0;
6 padding:0;
7 }
8
9:root{
10 --lightGold: #d4af37;
11 --gold: rgb(250 204 21);
12}
13
14body{
15 display: flex;
16 flex-direction: column;
17 min-height: 100vh;
18 background-color: black;
19 font-family: "PT Mono", monospace;
20 color: white;
21 overflow: hidden;
22 justify-content: center;
23 align-items: center;
24}
25
26li:not(:last-child) {
27 margin-bottom: 10px;
28}
29
30input {
31 margin: 10px;
32 padding:5px;
33 border: solid 0.1px grey;
34 background-color: black;
35 border-radius: 3px;
36 width: 100%;
37 color: white;
38 max-width: 250px;
39 text-align: center;
40}
41
42input:focus {
43 outline: none;
44}
45
46input::-webkit-outer-spin-button,
47input::-webkit-inner-spin-button {
48 -webkit-appearance: none;
49 margin: 0;
50}
51
52
53.footer{
54 position: absolute;
55 bottom: 0;
56 margin-bottom: 30px;
57 text-align: center;
58 padding: 10px;
59 font-size: 16px;
60 font-family: "Source Code Pro", monospace;
61 font-optical-sizing: auto;
62 font-weight: 500px;
63 font-style: normal;
64 font-spacing: 10px;
65 color: white;
66 opacity: 70%;
67 left: 50%;
68 transform: translateX(-50%);
69 display:flex;
70 flex-direction: column;
71 justify-content: center;
72 gap: 14px;
73}
74
75.footer label{
76 opacity: 50%;
77 cursor: pointer;
78}
79
80.footer label:hover{
81 color: white;
82 opacity: 100%;
83}
84
85.arrow{
86 position:relative;
87 width:30px;
88 height: 30px;
89 cursor:pointer;
90 overflow:hidden;
91 cursor: pointer;
92 opacity: 50%;
93 }
94
95 .arrow:hover{
96 opacity: 100%;
97 }
98
99 .arrow:after{
100 position:absolute;
101 display:block;
102 content:"";
103 color:white;
104 width: 20px;
105 height: 15px;
106 top:-1px;
107 border-bottom:solid 2px;
108 transform:translatex(4px);
109 }
110
111 .arrow:before{
112 position:absolute;
113 display:block;
114 content:"";
115 color:white;
116 width: 8px;
117 height: 8px;
118 border-top:solid 2px;
119 border-left:solid 2px;
120 top:50%;
121 left:2px;
122 transform-origin:0% 0%;
123 transform:rotatez(-45deg);
124 }
125
126 .modal {
127 opacity: 0;
128 visibility: hidden;
129 position: fixed;
130 top: 0;
131 right: 0;
132 bottom: 0;
133 left: 0;
134 text-align: left;
135 background: rgba(0,0,0);
136 transition: opacity .3s ease;
137 z-index: 100;
138 }
139
140 .modal__bg {
141 position: absolute;
142 top: 0;
143 right: 0;
144 bottom: 0;
145 left: 0;
146 cursor: pointer;
147 }
148
149 .modal-state {
150 display: none;
151 }
152
153 .modal-state:checked + .modal {
154 opacity: 1;
155 visibility: visible;
156 }
157
158 .modal-state:checked + .modal .modal__inner {
159 top: 0;
160 }
161
162 .modal__inner {
163 transition: bottom .3s ease;
164 position: absolute;
165 top: -20%;
166 right: 0;
167 bottom: 0;
168 left: 0;
169 height: fit-content;
170 width: 20%;
171 min-width: 300px;
172 margin: auto;
173 overflow: auto;
174 background: black;
175 border: solid 1px grey;
176 border-radius: 5px;
177 padding: 1em 2em;
178 }
179 .modal__p{
180 margin-top: 20px;
181 color: white;
182 display: flex;
183 flex-direction: column;
184 }
185
186 .modal__close {
187 position: absolute;
188 right: 1em;
189 top: 1em;
190 width: 1.1em;
191 height: 1.1em;
192 cursor: pointer;
193 }
194
195 .modal__close:after,
196 .modal__close:before {
197 content: '';
198 position: absolute;
199 width: 2px;
200 height: 1.5em;
201 background: #ccc;
202 display: block;
203 transform: rotate(45deg);
204 left: 50%;
205 margin: -3px 0 0 -1px;
206 top: 0;
207 }
208
209 .modal__close:hover:after,
210 .modal__close:hover:before {
211 background: #aaa;
212 }
213
214 .modal__close:before {
215 transform: rotate(-45deg);
216 }