#hero {
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    width: 90%;
    max-width: 1200px;
}
#hero .text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
}
#hero .text p {
    font-size: 1.5rem;
}
#hero .socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
#hero .socials a {
    transition: all 0.3s ease;
}
#hero .socials a:hover {
    transform: scale(2);
    filter: drop-shadow(0 0 0.2rem var(--hover-color));
}
#hero h2 {
    font-size: 2.5rem;
    line-height: 1.5;
}
#hero .img-container {
    position: relative;
}
#hero .hero-img {
    width: 60rem;
    border-radius: 1.5rem;
    filter: drop-shadow(0 0 40px var(--hover-color));
}
#hero .img-container .fa-brands {
    position: absolute;
    width: 5rem;
    height: 5rem;
    font-size: 3rem;
    background: #9d4edd8f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}
#hero .img-container .fa-node-js     { top: 40%;  left: -12%; }
#hero .img-container .fa-react    { top: 10%;  left: -10%; }
#hero .img-container .fa-mongo    { bottom: 15%; left: -10%; }
#hero .img-container .fa-js       { top: 5%;   right: -10%; }
#hero .img-container .fa-css3-alt      { bottom: -10%; right: 12%; }
#hero .img-container .fa-html5      { bottom: 10%; left: 12%; }
#hero .img-container .fa-git-alt      { bottom: 40%; right: -20%; }
#hero .img-container .fa-npm      { top: -15%; right: 40%; }

.btns {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.btns .btn:nth-child(2) {
    background-color: var(--neutral-color);
    color: var(--secondary-color);
}
.btns .btn:nth-child(2):hover {
    background-color: var(--secondary-color);
    color: var(--neutral-color);
}