|
0
|
1 * {
|
|
|
2 box-sizing: border-box;
|
|
|
3 }
|
|
|
4
|
|
|
5 body {
|
|
|
6 font-family: Bitter;
|
|
|
7 margin: 0;
|
|
|
8 }
|
|
|
9 body[colored] {
|
|
|
10 background-color: #C0D1D6;
|
|
|
11 }
|
|
|
12
|
|
|
13 a[link] {
|
|
|
14 display: block;
|
|
|
15 border-radius: 12px / 50%;
|
|
|
16 color: white;
|
|
|
17 background-color: #325762;
|
|
|
18 text-align: center;
|
|
|
19 padding: 12px;
|
|
|
20 text-decoration: none;
|
|
|
21 margin-bottom: 10px;
|
|
|
22 }
|
|
|
23 a[link]:hover {
|
|
|
24 background-color: #243F47;
|
|
|
25 }
|
|
|
26
|
|
|
27 div[links] {
|
|
|
28 max-width: 600px;
|
|
|
29 margin-left: auto;
|
|
|
30 margin-right: auto;
|
|
|
31 }
|
|
|
32 @media (max-width: 700px) {
|
|
|
33 div[links] {
|
|
|
34 max-width: 90%;
|
|
|
35 }
|
|
|
36 }
|
|
|
37
|
|
|
38 div[saved] {
|
|
|
39 background-color: white;
|
|
|
40 padding-top: 10px;
|
|
|
41 padding-bottom: 10px;
|
|
|
42 color: green;
|
|
|
43 text-align: center;
|
|
|
44 position: relative;
|
|
|
45 }
|
|
|
46 div[saved] p {
|
|
|
47 margin-top: 8px;
|
|
|
48 margin-bottom: 8px;
|
|
|
49 }
|
|
|
50 div[saved] a {
|
|
|
51 text-decoration: none;
|
|
|
52 }
|
|
|
53 div[saved] a[close] {
|
|
|
54 position: absolute;
|
|
|
55 top: 10px;
|
|
|
56 right: 10px;
|
|
|
57 display: block;
|
|
|
58 }
|
|
|
59 div[saved] img {
|
|
|
60 display: block;
|
|
|
61 height: 26px;
|
|
|
62 opacity: 0.7;
|
|
|
63 }
|
|
|
64
|
|
|
65 div[pics] {
|
|
|
66 display: flex;
|
|
|
67 gap: 3%;
|
|
|
68 flex-wrap: wrap;
|
|
|
69 }
|
|
|
70 div[pics] span {
|
|
|
71 width: 22.75%;
|
|
|
72 aspect-ratio: 1;
|
|
|
73 margin-bottom: 3%;
|
|
|
74 }
|
|
|
75 @media (max-width: 800px) {
|
|
|
76 div[pics] span {
|
|
|
77 width: 48.5%;
|
|
|
78 }
|
|
|
79 }
|
|
|
80 div[pics] a img {
|
|
|
81 display: block;
|
|
|
82 width: 100%;
|
|
|
83 border-radius: 4px;
|
|
|
84 }
|
|
|
85
|
|
|
86 div[back] a {
|
|
|
87 display: inline-block;
|
|
|
88 margin-left: 20px;
|
|
|
89 margin-top: 10px;
|
|
|
90 }
|
|
|
91 div[back] img {
|
|
|
92 width: 30px;
|
|
|
93 }
|
|
|
94
|
|
|
95 html[pic] div[hashtags] {
|
|
|
96 margin-top: 8px;
|
|
|
97 }
|
|
|
98 div[hashtags] a {
|
|
|
99 text-decoration: none;
|
|
|
100 color: black;
|
|
|
101 }
|
|
|
102
|
|
|
103
|
|
|
104 html[main] body {
|
|
|
105 text-align: center;
|
|
|
106 }
|
|
|
107 html[main] div[home] {
|
|
|
108 padding-top: 8px;
|
|
|
109 margin-bottom: 60px;
|
|
|
110 }
|
|
|
111 html[main] div[home] a {
|
|
|
112 text-decoration: none;
|
|
|
113 color: black;
|
|
|
114 }
|
|
|
115 html[main] div[home] a:hover {
|
|
|
116 text-decoration: underline;
|
|
|
117 }
|
|
|
118 html[main] div[home] span[lms] {
|
|
|
119 font-family: Fraunces;
|
|
|
120 font-size: 18px;
|
|
|
121 font-weight: bold;
|
|
|
122 }
|
|
|
123 html[main] div[home] span[small] {
|
|
|
124 font-size: 11px;
|
|
|
125 }
|
|
|
126 html[main] img[user] {
|
|
|
127 display: block;
|
|
|
128 width: 100px;
|
|
|
129 height: 100px;
|
|
|
130 object-fit: cover;
|
|
|
131 border-radius: 50%;
|
|
|
132 margin-left: auto;
|
|
|
133 margin-right: auto;
|
|
|
134 }
|
|
|
135 html[main] h1 {
|
|
|
136 font-size: 24px;
|
|
|
137 font-weight: normal;
|
|
|
138 }
|
|
|
139 html[main] div[bio] {
|
|
|
140 white-space: pre-wrap;
|
|
|
141 margin-bottom: 20px;
|
|
|
142 max-width: 600px;
|
|
|
143 margin-left: auto;
|
|
|
144 margin-right: auto;
|
|
|
145 }
|
|
|
146 html[main] div[icons] {
|
|
|
147 display: flex;
|
|
|
148 justify-content: center;
|
|
|
149 flex-wrap: wrap;
|
|
|
150 gap: 10px;
|
|
|
151 margin-bottom: 20px;
|
|
|
152 }
|
|
|
153 html[main] div[icons] img {
|
|
|
154 display: block;
|
|
|
155 height: 40px;
|
|
|
156 }
|
|
|
157 html[main] div[hashtags] {
|
|
|
158 margin-top: 40px;
|
|
|
159 }
|
|
|
160
|
|
|
161 html[main] div[pics] {
|
|
|
162 width: 90%;
|
|
|
163 margin-top: 40px;
|
|
|
164 margin-left: auto;
|
|
|
165 margin-right: auto;
|
|
|
166 }
|
|
|
167
|
|
|
168 html[pic] img[pic] {
|
|
|
169 width: 100%;
|
|
|
170 display: block;
|
|
|
171 }
|
|
|
172
|
|
|
173 html[pic] div[body] {
|
|
|
174 margin-top: 40px;
|
|
|
175 margin-bottom: 40px;
|
|
|
176 }
|
|
|
177 @media (min-width: 888px) {
|
|
|
178 html[pic] div[body] {
|
|
|
179 display: flex;
|
|
|
180 align-items: flex-start;
|
|
|
181 }
|
|
|
182 html[pic] div[left] {
|
|
|
183 width: 45%;
|
|
|
184 margin-left: 5%;
|
|
|
185 }
|
|
|
186 html[pic] div[outer_links] {
|
|
|
187 width: 55%;
|
|
|
188 margin-left: 5%;
|
|
|
189 margin-right: 5%;
|
|
|
190 }
|
|
|
191 }
|
|
|
192 @media (max-width: 887px) {
|
|
|
193 html[pic] div[left] {
|
|
|
194 width: 90%;
|
|
|
195 margin-left: auto;
|
|
|
196 margin-right: auto;
|
|
|
197 margin-bottom: 40px;
|
|
|
198 }
|
|
|
199 }
|
|
|
200
|
|
|
201 span[select] {
|
|
|
202 display: inline-block;
|
|
|
203 color: white;
|
|
|
204 }
|
|
|
205 span[select] select {
|
|
|
206 background-color: #325762;
|
|
|
207 padding: 12px;
|
|
|
208 padding-right: calc(12px + 1em);
|
|
|
209 border-radius: 12px / 50%;
|
|
|
210 border: none;
|
|
|
211 appearance: none;
|
|
|
212 cursor: pointer;
|
|
|
213 color: inherit;
|
|
|
214 outline: none;
|
|
|
215 }
|
|
|
216 span[select] select:hover {
|
|
|
217 background-color: #243F47;
|
|
|
218 }
|
|
|
219 span[select]:after {
|
|
|
220 content: "⋁";
|
|
|
221 margin-left: -1.5em;
|
|
|
222 pointer-events: none;
|
|
|
223 }
|
