@import url(style.css);

.about {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .about-visual {
        width: 45%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .description {
        width: 45%;
        height: 100%;
    }
}

.about-visual .container-img {
    width: 70%;
    aspect-ratio: 1/1;
    border: 5px solid var(--text-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .rotate {
        width: 20%;
        height: 100%;
        background-color: var(--home-text-color);
        border-right: 5px solid var(--text-color-light);
        border-left: 5px solid var(--text-color-light);
        position: relative;
        animation: rotate 3s linear 0s infinite normal none;
    }

    .img {
        border: 5px solid var(--text-color-light);
        width: 25%;
        aspect-ratio: 1/1;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        background-color: var(--primary-bg-color-light);

        img {
            width: 100%;
            height: 100%;
            object-position: 50% 50%;
            filter: invert(100%);
        }
    }
} 

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Mobile */
@media screen and (max-width : 600px) {
    .about {
        position: relative;
        z-index: -1;
    }
}