.about {
    --cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
    --transition: 0.6s var(--cubic);
    --size: 40px;
    position: fixed;
    z-index: 10;
    bottom: 10px;
    right: 10px;
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    transition: all 0.2s ease;
}

.about .bg-links {
    width: var(--size);
    height: var(--size);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #212121;
    backdrop-filter: blur(5px);
    position: absolute;
}

.about .logo {
    width: var(--size);
    height: var(--size);
    z-index: 9;
    background-image: url("../Icons/databay_logo-white.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 10px 9px;
    opacity: 0.9;
    transition: all 1s 0.2s ease;
    bottom: 0;
    right: 0;
}

.about .social {
    opacity: 0;
    right: 0;
    bottom: 0;
}
.about .social .icon {
    width: 100%;
    height: 100%;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    display: flex;
    transition: all 0.2s ease, background-color 0.4s ease;
    opacity: 0;
    border-radius: 100%;
}

.about .social.portfolio {
    transition: all 0.8s ease;
}
.about .social.portfolio .icon {
    background-image: url("../Icons/link-solid-white.svg");
}

.about .social.instagram {
    transition: all 0.3s ease;
}
.about .social.instagram .icon {
    background-image: url("../Icons/instagram-brands-white.svg");
}

.about .social.linkedin {
    transition: all 0.8s ease;
}
.about .social.linkedin .icon {
    background-image: url("../Icons/linkedin-in-brands-white.svg");
}

.about:hover {
    width: 105px;
    height: 105px;
    transition: all var(--transition);
}

.about:hover .logo {
    opacity: 1;
    transition: all 0.6s ease;
}

.about:hover .social {
    opacity: 1;
}

.about:hover  .social .icon {
    opacity: 0.9;
}

.about:hover .social:hover {
    background-size: 28px;
}
.about:hover .social:hover .icon {
    background-size: 65%;
    opacity: 1;
}

.about:hover .social.portfolio {
    right: 0;
    bottom: calc(100% - 40px);
    transition: all 0.3s 0s var(--cubic);
}

.about:hover .social.portfolio .icon:hover {
     background-color: #c40005;
}

.about:hover .social.instagram {
    bottom: 45%;
    right: 45%;
    transition: all 0.3s 0.15s var(--cubic);
}
.about:hover .social.instagram .icon:hover {
     background-color: #c40005;
}

.about:hover .social.linkedin {
    bottom: 0;
    right: calc(100% - 40px);
    transition: all 0.3s 0.25s var(--cubic);
}
.about:hover .social.linkedin .icon:hover {
     background-color: #c40005;
}