@@ -212,6 +212,25 @@ svg.purple .color {
212212 stroke : var (--purple );
213213}
214214
215+ .xp {
216+ margin-bottom : .5em ;
217+ }
218+
219+ .xp : hover .head {
220+ transform : translateY (-10% );
221+ }
222+
223+ .xp .head {
224+ color : var (--white ) !important ;
225+ font-weight : bold;
226+ transition : .5s ease-in-out;
227+ }
228+
229+ .xp .head .number {
230+ font-size : 1.5em ;
231+ display : inline-block;
232+ }
233+
215234.about .link {
216235 text-align : center;
217236 position : relative;
@@ -232,7 +251,11 @@ svg.purple .color {
232251 margin : 10em auto auto;
233252}
234253
235- .about .content h2 + p {
254+ .about .content {
255+ height : 100% ;
256+ }
257+
258+ .about .content p {
236259 color : var (--grey );
237260 margin-top : 0 ;
238261 font-size : 1.1em ;
@@ -254,15 +277,16 @@ i, .hand .waving {
254277 display : flex;
255278 justify-content : space-between;
256279 align-items : center;
257- gap : .5 em ;
280+ gap : .8 em ;
258281 margin : 0 0 .2em ;
259282}
260283
261284.sectionTitle p {
262285 color : var (--grey ) !important ;
263286 text-transform : uppercase;
264287 font-weight : 600 ;
265- font-size : .9em ;
288+ font-size : .9em !important ;
289+ margin : .1em 0 ;
266290 min-width : max-content;
267291 font-family : "Noto Sans" , sans-serif;
268292}
@@ -277,7 +301,8 @@ i, .hand .waving {
277301
278302.heading {
279303 font-size : 3em ;
280- margin : 0 0 1em ;
304+ line-height : 1 ;
305+ margin : 0.4em 0 .5em ;
281306}
282307
283308.heading .blue {
@@ -292,6 +317,45 @@ i, .hand .waving {
292317 color : var (--purple )
293318}
294319
320+ .techno-jail {
321+ width : 100% ;
322+ height : 100% ;
323+ overflow : hidden;
324+ position : relative;
325+ }
326+
327+ .techno {
328+ position : absolute;
329+ top : 0 ;
330+ left : 0 ;
331+ cursor : grab;
332+ }
333+
334+ .techno , .techno img {
335+ width : 40px ;
336+ height : 40px ;
337+ }
338+
339+ .techno img {
340+ user-select : none;
341+ -moz-user-select : none;
342+ -webkit-user-select : none;
343+ -ms-user-select : none;
344+ pointer-events : none;
345+ }
346+
347+ .techno .moving {
348+ cursor : grabbing;
349+ z-index : 10000 ;
350+ }
351+
352+ .techno a .open {
353+ width : 20px !important ;
354+ height : 20px !important ;
355+ font-size : .5em !important ;
356+ transform : translate (30px , -5px ) !important ;
357+ }
358+
295359@media (max-width : 1024px ) {
296360 .about {
297361 flex-direction : column;
0 commit comments