.me-deco {
    position: relative;
    width: 345px;
    height: 370px;
    justify-self: end;

}

#deco-lightblue {
    box-shadow: 1px 2px 4px #39414d33;
    position: absolute;
    background-color: var(--lightblue);
    width: 200px;
    height: 200px;
    border-radius: 50%;

    left: 120px;

    pointer-events: auto;
}


#deco-darkblue {
    box-shadow: 1px 2px 4px #02204933;
    margin-top: 50px;
    position: absolute;
    width: 240px;
    height: 240px;
    background-color: var(--darkblue);
    border-radius: 50%;

    left: 0px;

    pointer-events: auto;
}

#me-frame {
    margin-top: 50px;
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;

    left: 0px;
    pointer-events: none;
}

#me {
    position: absolute;
    width: 200px;

    left: 45px;
    top: 13px;

    pointer-events: none;
}

#me-svg {
    position: absolute;
    width: 200px;

    left: 45px;
    top: 13px;


}

#me-hover {
    pointer-events: auto;
}

#deco-pink {
    box-shadow: 1px 2px 4px #47324533;
    margin-top: 50px;
    position: absolute;
    background-color: var(--lightpink);
    width: 320px;
    height: 320px;
    border-radius: 50%;

    left: 25px;


    pointer-events: auto;
}




.about-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px;
    direction: rtl;
}

.about-item {
    direction: ltr;
}


#around-coffee {
    width: 100%;
    text-align: center;
    justify-content: center;
    opacity: 0;
    margin-top: 20px;
}

#small-coffee {
    width: 10%;
}


@media (max-width: 1024px) {

    .about-item {
        width: calc(100vw - 40px);
    }
    

    .about-container {
        grid-template-columns: 1fr; 
        gap: 0px;
        direction: ltr;
    }

    .me-deco {
        height: 420px;
    }

}

@media (max-width: 500px) {
    .me-deco {
        transform: scale(0.7);
        transform-origin: top right;
        height: 300px;
    }
}





/* Darkmode  */
body.dark-mode #deco-lightblue {
    background-color: var(--dark-lightblue);
}

body.dark-mode #deco-pink {
    background-color: var(--dark-lightpink);

}