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 label {
58 cursor: pointer;
59 margin-right: 0.2rem;
60 }
61
62 @media screen and (max-width: 499px) {
63 label {
64 display: block;
65 }
66
67 input,
68 select {
69 width: 100%;
70 }
71 }
72 }
73
74 button {
75 cursor: pointer;
76 margin-top: 1rem;
77 }
78
79 .tz-table {
80 display: flex;
81 flex-wrap: wrap;
82 justify-content: center;
83 text-align: center;
84
85 $spacing: 0.5rem;
86
87 .tz-table-element {
88 flex: 0 0 calc(100% - ($spacing * 2));
89 margin: $spacing;
90
91 @media screen and (min-width: 440px) {
92 flex: 0 0 calc(50% - ($spacing * 2));
93 }
94
95 @media screen and (min-width: 630px) {
96 flex: 0 0 calc(33% - ($spacing * 2));
97 }
98
99 @media screen and (min-width: 820px) {
100 flex: 0 0 calc(25% - ($spacing * 2));
101 }
102 }
103 }
104
105 .share {
106 margin-top: 1rem;
107 text-align: center;
108 }
109}
110
111footer {
112 color: #444;
113 font-size: 0.7rem;
114 margin-top: 1rem;
115 padding: 1rem;
116 text-align: center;
117
118 a {
119 color: inherit;
120 }
121}
122
123@media screen and (prefers-color-scheme: dark) {
124 body {
125 background-color: #111;
126 color: #fff;
127 }
128
129 header {
130 background-color: #000;
131 }
132
133 footer {
134 color: #b5b5b5;
135 }
136}