maelkmark.github.io/style.css at master · MaelkMark/maelkmark.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
:root:has(#logo:hover) {
	--gradient: linear-gradient(120deg, hsl(0, 90%, 55%) 20%, hsl(0, 92%, 100%), hsl(100, 90%, 55%) 80%);
	--gradient-reverse: var(--gradient);
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	font-size: min(3rem, 8vw);
	text-align: center;
	_text-shadow: 0 0 50px #ffffff44, 0 0 200px white;
	cursor: default;
	user-select: none;
}

main {
	_backdrop-filter: blur(0px) brightness(0.4);
	width: 100%;
	height: 100vh;
	height: 100dvh;
	padding: min(2em, 10vw);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1em;
}

#logo {
	width: 4em;
	border-radius: 50%;
	position: relative;
	transition: 0.3s;

	&:hover {
		box-shadow: 0 0 0 5px hsl(100, 90%, 55%), 0 0 0 10px hsl(0, 92%, 100%), 0 0 0 15px hsl(0, 90%, 55%), 0 0 100px 15px hsla(0, 90%, 55%, .4);
	}
}

mark {
	display: inline-block;
	background: var(--gradient);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	text-shadow: none;
	text-shadow: 5px 5px 100px #2482f5;
	transform-origin: bottom;

	&:hover, &:active, &:focus {
		animation: jump 1.5s infinite;
	}
}

@keyframes jump {
	0% {
		scale: 1 1;
	}
	30% {
		scale: 1 0.8;
	}
	50% {
		scale: 1 1.2;
	}
	60% {
		scale: 1 0.95;
	}
	65% {
		scale: 1 1
	}
}

#icons {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

	img {
		height: 2em;
		position: absolute;
		left: var(--x);
		top: var(--y);
		offset-rotate: 0deg;
		animation: travel 20s infinite linear;
		filter: blur(3px) brightness(0.35);

		&:nth-child(1) {
			--x: 10%;
			--y: 8%;
			offset-path: path("M30 81C-6 99 3 27 3 27 3 27 3 9 39 0 53.787-3.627 66 9 84 27 89.589 33.687 84 45 66 63 57 72 48 72 30 81");
		}

		&:nth-child(2) {
			--x: 5%;
			--y: 70%;
			offset-path: path("M28.021 63.606C11.742 47.327 13.062 33.688 13.282 30.168 13.722 27.748 14.382 15.429 39.02 6.85 43.2 2.89 71.138 5.53 73.777 26.648 74.657 38.747 76.857 48.647 65.198 60.966 57 72 50.019 74.165 28.021 63.606");
			animation-direction: reverse;
		}

		&:nth-child(3) {
			--x: 73%;
			--y: 25%;
			offset-path: path("M6.683 4.87C21.642 3.11 43.861.25 53.54 13.009 54.64 13.449 55.3 18.069 54.42 18.729 54.86 22.1753 54.86 25.988 70.919 37.648 79.938 53.266 46.061 54.806 41.221 48.207 30.882 39.187 22.5957 45.127 13.283 43.587 2.944 41.387-7.615 12.569 6.683 5.09Z");
		}

		&:nth-child(4) {
			--x: 80%;
			--y: 80%;
			offset-path: path("M32.984 4.652C50.869-.452 69.379 13.009 72.679 23.349 71.799 37.208 76.858 38.748 69.819 42.707 62.559 46.007 53.76 35.448 40.561 40.067 31.762 47.987 24.062 50.187 15.263 49.747 5.584 50.187 3.384 42.487-1.236 36.548-2.116 28.848-.576 19.169 6.463 12.349 13.283 2.89 24.9417 7.2163 32.985 4.648");
			animation-direction: reverse;
		}

		&:nth-child(5) {
			--x: 30%;
			--y: 35%;
			offset-path: path("M34.177 4.673C55.96 3.55 69.379 13.009 72.679 23.349 71.799 37.208 76.858 38.748 69.819 42.707 62.559 46.007 53.76 35.448 40.561 40.067 31.762 47.987 24.062 50.187 15.263 49.747 5.584 50.187 3.384 42.487-1.236 36.548-2.116 28.848-.576 19.169 6.463 12.349 13.283 2.89 24.9417 7.2163 34.181 4.65");
			animation-direction: reverse;
		}
	}
}

@keyframes float {
	0% {
		left: var(--x);
		top: var(--y);
	}
	10% {
		left: calc(var(--x) + 3% * var(--m));
		top: calc(var(--y) + 1% * var(--m));
	}
	20% {
		left: calc(var(--x) - 1% * var(--m));
		top: calc(var(--y) + 3% * var(--m));
	}
	30% {
		left: calc(var(--x) - 3% * var(--m));
		top: calc(var(--y) - 2% * var(--m));
	}
	40% {
		left: calc(var(--x) - 0% * var(--m));
		top: calc(var(--y) - 4% * var(--m));
	}
	50% {
		left: calc(var(--x) + 2% * var(--m));
		top: calc(var(--y) - 3% * var(--m));
	}
	60% {
		left: calc(var(--x) + 3% * var(--m));
		top: calc(var(--y) - 0% * var(--m));
	}
	70% {
		left: calc(var(--x) + 4% * var(--m));
		top: calc(var(--y) - 2% * var(--m));
	}
	80% {
		left: calc(var(--x) + 3% * var(--m));
		top: calc(var(--y) + 2% * var(--m));
	}
	90% {
		left: calc(var(--x) + 2% * var(--m));
		top: calc(var(--y) + 1% * var(--m));
	}
	100% {
		left: var(--x);
		top: var(--y);
	}
}

@keyframes travel {
	from {
		offset-distance: 0%;
	}
	to {
		offset-distance: 100%;
	}
}