html, body {
	margin: 0;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(-90deg, #ff0000, #ffff00, #0000ff, #ff0000, yellow, #0000ff);
	background-size: 1200% 1200%;
	animation: gradient 120s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
	}
	50% {
        background-position: 100% 50%;
	}
	100% {
        background-position: 0% 50%;
	}
}

.main-container {
    padding: 20px;
}

.text-container {
    background: repeating-linear-gradient(-90deg, #00ff00, #ff00ff, #ff8000, #00ff00, #ff00ff, #ff8000);
	background-size: 1200% 1200%;
	animation: gradient2 120s ease infinite;
    color: transparent;
    background-clip: text;
    font-size: 30px;
}

@keyframes gradient2 {
    0% {
        background-position: 0% 50%;
	}
	50% {
        background-position: 100% 50%;
	}
	100% {
        background-position: 0% 50%;
	}
}

.icon-link {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.icon-link:hover {
    opacity: 0.7;
}

.icon-link:active {
    opacity: 0.4;
}

.icon-base {
    background: repeating-linear-gradient(-90deg, #00ff00, #ff00ff, #ff8000, #00ff00, #ff00ff, #ff8000);
    background-size: 1200% 1200%;
    animation: gradient2 120s ease infinite;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 50px;
    height: 50px;
}

.svg-gradient-icon-li {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 382 382'><path fill='white' d='M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472L341.91,330.654L341.91,330.654z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 382 382'><path fill='white' d='M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472L341.91,330.654L341.91,330.654z'/></svg>");
}

.svg-gradient-icon-email {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M20 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M20 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>");
}

.svg-gradient-icon-gh {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98 96'><path fill='white' d='M49 1a49 49 0 0 0-15.5 95.5c2.5.5 3.4-1 3.4-2.3v-8.2c-13.7 3-16.6-6.6-16.6-6.6-2.2-5.7-5.5-7.2-5.5-7.2-4.5-3 .3-3 .3-3 5 .4 7.6 5.1 7.6 5.1 4.4 7.6 11.6 5.4 14.4 4.1.4-3.2 1.7-5.4 3.1-6.6-11-1.2-22.5-5.5-22.5-24.4 0-5.4 1.9-9.8 5-13.2-.5-1.3-2.2-6.3.5-13 0 0 4.1-1.3 13.4 5a46.3 46.3 0 0 1 24.4 0c9.3-6.3 13.4-5 13.4-5 2.7 6.8 1 11.8.5 13 3.2 3.4 5 7.8 5 13.2 0 18.9-11.6 23.1-22.6 24.3 1.8 1.5 3.3 4.6 3.3 9.3v13.8c0 1.3.9 2.8 3.4 2.3A49 49 0 0 0 49 1z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98 96'><path fill='white' d='M49 1a49 49 0 0 0-15.5 95.5c2.5.5 3.4-1 3.4-2.3v-8.2c-13.7 3-16.6-6.6-16.6-6.6-2.2-5.7-5.5-7.2-5.5-7.2-4.5-3 .3-3 .3-3 5 .4 7.6 5.1 7.6 5.1 4.4 7.6 11.6 5.4 14.4 4.1.4-3.2 1.7-5.4 3.1-6.6-11-1.2-22.5-5.5-22.5-24.4 0-5.4 1.9-9.8 5-13.2-.5-1.3-2.2-6.3.5-13 0 0 4.1-1.3 13.4 5a46.3 46.3 0 0 1 24.4 0c9.3-6.3 13.4-5 13.4-5 2.7 6.8 1 11.8.5 13 3.2 3.4 5 7.8 5 13.2 0 18.9-11.6 23.1-22.6 24.3 1.8 1.5 3.3 4.6 3.3 9.3v13.8c0 1.3.9 2.8 3.4 2.3A49 49 0 0 0 49 1z'/></svg>");
}

.svg-gradient-icon-li,
.svg-gradient-icon-email,
.svg-gradient-icon-gh {
    background: repeating-linear-gradient(-90deg, #00ff00, #ff00ff, #ff8000, #00ff00, #ff00ff, #ff8000);
    background-size: 1200% 1200%;
    animation: gradient2 120s ease infinite;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}