body {
    &:has(.bg1) {
        background-color: rgb(41, 22, 58);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: rgb(240, 120, 120);
    }
    &:has(.bg2) {
        background-color: rgb(69, 16, 16);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #f7e1b5;
    }
    &:has(.bg3) {
        background-color: rgb(98, 19, 19);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #fae8c4;
    }
    &:has(.bg4) {
        background-color: rgb(113, 18, 23);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #fae8c4;
    }
    &:has(.bg5) {
        background-color: rgb(156, 15, 22);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #fae8c4;
    }
    &:has(.bg6) {
        background-color: rgb(231, 102, 22);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #fff6e4;
    }
    &:has(.bg7) {
        background-color: rgb(249 141 43);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #940909;
    }
    &:has(.bg8) {
        background-color: rgb(251, 245, 165);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #e24d2f;
    }
    &:has(.bg9) {
        background-color: rgb(82, 250, 250);
        transition: background-color 1s, --johannes-header-color 1s;
        --johannes-header-color: #2c3981;
    }
}

h1 {
    color: var(--johannes-header-color);
    text-align: center;
}

body:has(#honeysuckle-comic) {
    background-color: rgb(34, 34, 34);
    color: white;
}

/* #johannes-link-container {
    border: 5px double white;
    background: #7a0e31;
    border-radius: 0.75rem;
    height: 10rem;
    width: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    transition: background-color 0.3s;
    
    &:hover {
        background-color: #bd3f11;
        transition: background-color 0.3s;
    }

    a {
        text-align: center;
        text-decoration: none;
        color: rgb(253, 230, 201);
        font-weight: bolder;
        font-size: 1.4rem;
    }
} */

.back-to-portfolio {
    padding-block: 4rem;
    a {
        text-decoration: none;
        color: var(--johannes-header-color);
        transition: font-weight 0.2s;

        &:hover {
            font-weight: bolder;
            transition: font-weight 0.2s;
        }
    }
}