.CSS files



*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100vh;
/* background-color: hsla(209 70% 3% / 100%); */ /* For dark theme */
background-color: hsl(214, 20%, 85%);
display: flex;
justify-content: center;
align-items: center;
}

.wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}

.icon {
text-decoration: none;
width: 5.625rem;
height: 5.625rem;
border-radius: 14px;
/* background-color: hsla(209 20% 70% / 20%); */ /* For dark theme */
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.icon > i {
color: #2dd4bf;
font-size: 1.5rem;
transition: all 0.2s;
}

.icon:hover > i {
scale: 1.2;
color: #f1f1f1;
}

.icon:before {
background: var(--color);
content: "";
position: absolute;
width: 130%;
height: 130%;
left: -110%;
top: 80%;
transform: rotate(45deg);
}

.icon:hover:before {
animation: slide 0.7s forwards;
}

@keyframes slide {
50% {
left: 10%;
top: -40%;
}

100% {
left: -15%;
top: -15%;
}
}

.icon:has(.fa-instagram) {
--color: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}
.icon:has(.fa-linkedin-in) {
--color: #0077b5;
}
.icon:has(.fa-youtube) {
--color: #ff0000;
}
.icon:has(.fa-x-twitter) {
--color: #1da1f2;
}
.icon:has(.fa-github) {
--color: #333;
}

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
/* background-color: hsla(209 70% 3% / 100%); */ /* For dark theme */
background-color: hsl(214, 20%, 85%);
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}
.icon {
text-decoration: none;
width: 5.625rem;
height: 5.625rem;
border-radius: 14px;
/* background-color: hsla(209 20% 70% / 20%); */ /* For dark theme */
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.icon > i {
color: #2dd4bf;
font-size: 1.5rem;
transition: all 0.2s;
}
.icon:hover > i {
scale: 1.2;
color: #f1f1f1;
}
.icon:before {
background: var(--color);
content: "";
position: absolute;
width: 130%;
height: 130%;
left: -110%;
top: 80%;
transform: rotate(45deg);
}
.icon:hover:before {
animation: slide 0.7s forwards;
}
@keyframes slide {
50% {
left: 10%;
top: -40%;
}
100% {
left: -15%;
top: -15%;
}
}
.icon:has(.fa-instagram) {
--color: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}
.icon:has(.fa-linkedin-in) {
--color: #0077b5;
}
.icon:has(.fa-youtube) {
--color: #ff0000;
}
.icon:has(.fa-x-twitter) {
--color: #1da1f2;
}
.icon:has(.fa-github) {
--color: #333;
}