Will be awesome one day, I guarantee you
1body {
2 font-family: monospace;
3 margin: 0 20px 20px;
4}
5
6h1 {
7 font-weight: 200;
8 font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
9}
10
11h2 {
12 display: inline-block;
13}
14
15header {
16 display: flex;
17 justify-content: space-between;
18 align-items: center;
19 gap: 1rem;
20}
21
22header .meta {
23 display: flex;
24 flex-direction: column;
25}
26
27header p {
28 margin: 2px;
29 position:sticky;
30}
31
32@media (max-width: 600px) {
33 header {
34 flex-direction: column;
35 align-items: flex-start;
36 }
37
38 h1 {
39 font-size: 1.2em;
40 }
41}
42
43#content {
44 transition: transform 0.3s ease;
45}
46
47#content.rotated {
48 transform: rotate(180deg);
49}
50
51.hidden {
52 display: none;
53}
54
55#prevention {
56 color: red;
57 margin: 15px 0;
58}
59
60.btns {
61 margin: 0 -20px;
62 display: flex;
63 flex-wrap: wrap;
64 gap: 8px;
65 width: calc(100% + 40px);
66}
67
68.btns button {
69 margin: 0;
70 padding: 10px 20px;
71 font-size: 1em;
72 cursor: pointer;
73 background-color: black;
74 color: white;
75 border: 0;
76 border-radius: 0;
77 outline: none;
78}
79
80.btns button:hover {
81 background-color: #333;
82}
83
84.highlight {
85 background-color: rgb(132, 0, 0);
86 color: white;
87 padding: 0 0.25rem;
88}
89
90.btns button.danger-button {
91 background-color: red;
92}