rita.moe
1body {
2 background-color: #efefef;
3 color: #000;
4 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
5 margin: 0 auto;
6 max-width: 900px;
7}
8
9header {
10 background-color: #fff;
11 border-radius: 10px;
12 margin: 1rem 0.5rem 0;
13 padding: 1rem 1.5rem;
14
15 h1 {
16 font-size: 1.5rem;
17 margin: 0;
18
19 @media screen and (min-width: 500px) {
20 font-size: 2rem;
21 }
22 }
23
24 a {
25 color: inherit;
26 text-decoration: none;
27 }
28
29 svg {
30 height: 1.7rem;
31 vertical-align: -0.3rem;
32 width: 1.7rem;
33
34 @media screen and (min-width: 500px) {
35 height: 2rem;
36 width: 2rem;
37 }
38 }
39}
40
41main {
42 padding: 1rem 2rem;
43
44 h2 {
45 font-size: 1.5rem;
46 margin: 1rem 0;
47 text-align: center;
48
49 span {
50 font-size: 1.2rem;
51 }
52 }
53
54 form {
55 line-height: 2rem;
56 }
57
58 label {
59 cursor: pointer;
60 }
61
62 button {
63 cursor: pointer;
64 }
65
66 .tz-table {
67 display: flex;
68 flex-wrap: wrap;
69 justify-content: center;
70 text-align: center;
71
72 $spacing: 0.5rem;
73
74 .tz-table-element {
75 flex: 0 0 calc(100% - ($spacing * 2));
76 margin: $spacing;
77
78 @media screen and (min-width: 440px) {
79 flex: 0 0 calc(50% - ($spacing * 2));
80 }
81
82 @media screen and (min-width: 630px) {
83 flex: 0 0 calc(33% - ($spacing * 2));
84 }
85
86 @media screen and (min-width: 820px) {
87 flex: 0 0 calc(25% - ($spacing * 2));
88 }
89 }
90 }
91
92 .share {
93 display: none;
94 margin-top: 2rem;
95 text-align: center;
96 }
97}
98
99footer {
100 color: #444;
101 font-size: 0.7rem;
102 margin-top: 1rem;
103 padding: 1rem;
104 text-align: center;
105
106 a {
107 color: inherit;
108 }
109}
110
111@media screen and (prefers-color-scheme: dark) {
112 body {
113 background-color: #111;
114 color: #fff;
115 }
116
117 header {
118 background-color: #000;
119 }
120
121 footer {
122 color: #b5b5b5;
123 }
124}