/* layout.css */
:root {
    --side-padding: 8vw;
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body1);
    color: var(--text-colour-light);
    padding-left: var(--side-padding);
    transition: background-color 0.3s ease;
}

body.light-mode {
    background-color: var(--white-100);
    color: var(--text-colour-light);
}

body.dark-mode {
    background-color: var(--background-colour-dark);
    color: var(--text-colour-dark);
}

.work-header {
    /* Hide margin on mobile */
    margin-top: 0px;
    

    /* Show padding on desktop */
    @media screen and (min-width: 768px) {
        margin-top: 155px;
    }
}

/* Class to hide element on mobile */
.hide-on-mobile {
    display: none !important; 
}

/* Show element on mobile */
@media screen and (min-width: 768px) {
    .hide-on-mobile {
        display: block !important;
    }
}

/* Hide element on mobile */
.show-on-mobile {
    display: block !important;
}

@media screen and (min-width: 768px) {
    .show-on-mobile {
        display: none !important;
    }
}