/* Desktop styles (default) */
#header .image.avatar img {
    margin-left: -260px;
}

#header h1 {
    transform: translateX(-150px);
}

#header h1 strong {
    position: relative;
    left: -100px;
}

#footer .inner {
    transform: translateX(-175px);
}

#footer .icons {
    transform: translateX(-60px);
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    #header .image.avatar img {
        margin-left: 0 !important;
        max-width: 150px;
        display: block;
        margin: 0 auto;
    }

    #header h1 {
        transform: none !important;
        text-align: center;
    }

    #header h1 strong {
        position: static !important;
        left: 0 !important;
    }

    #footer .inner {
        transform: none !important;
    }

    #footer .icons {
        transform: none !important;
        display: flex;
        justify-content: center;
    }

    .work-item {
        width: 100% !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}