#body-div {
    align-items: center;
    display: flex;
    flex-direction: column;
}

#desc {
    font-size: 1.125rem;
    font-weight: 300;
}

#desc, #title {
    padding-left: var(--padding-xs);
    padding-right: var(--padding-xs);
}

#image-div {
    height: 400px;
    max-width: 250px;
    position: relative;
}

#notebook {
    max-width: inherit;
    padding-top: var(--padding-s);
    position: relative;
    transition: padding-top 0.7s ease;
}

#notebook-base-inactive {
    position: absolute;
    right: 31px;
    top: 146px;
    width: 225px;
    z-index: -1;
}

#notebook-base-active {
    position: absolute;
    right: 1px;
    top: 117px;
    width: 285px;
    z-index: -1;
}

#notebook:hover {
    padding-top: 30px;
}

#mouse {
    position: absolute;
    right: 16px;
    top: 258px;
    transition: top 0.7s ease;
    width: 45px;
}

#mouse-base-inactive {
    position: absolute;
    right: 0px;
    top: 251px;
    width: 77px;
    z-index: -1;
}

#mouse-base-active {
    position: absolute;
    right: -33px;
    top: 218px;
    width: 143px;
    z-index: -1;
}

#mouse:hover {
    top: 250px;
}

#title {
    font-size: 3rem;
    padding-top: var(--padding-xs);
}

@media (min-width: 420px) {
    #desc, #title {
        padding-left: var(--padding-s);
        padding-right: var(--padding-s);
    }
}

@media (min-width: 560px) {
    #desc {
        font-size: 1.25rem;
        font-weight: 300;
    }

    #desc, #title {
        padding-left: var(--padding-m);
        padding-right: var(--padding-m);
    }
    
    #image-div {
        position: relative;
        max-width: 400px;
        height: 600px;
    }

    #notebook {
        padding-top: var(--padding-m);
        position: relative;
        transition: padding-top 0.7s ease;
        max-width: inherit;
    }

    #notebook-base-inactive {
        position: absolute;
        top: 230px;
        right: 50px;
        width: 360px;
        z-index: -1;
    }

    #notebook-base-active {
        position: absolute;
        top: 182px;
        right: 2px;
        width: 456px;
        z-index: -1;
    }

    #notebook:hover {
        padding-top: 50px;
    }

    #mouse {
        position: absolute;
        top: 417px;
        transition: top 0.7s ease;
        right: 26px;
        width: 65px;
    }

    #mouse-base-inactive {
        position: absolute;
        top: 407px;
        right: 0px;
        width: 115px;
        z-index: -1;
    }

    #mouse-base-active {
        position: absolute;
        top: 359px;
        right: -48px;
        width: 212px;
        z-index: -1;
    }

    #mouse:hover {
        top: 408px;
    }

    #title {
        font-size: 4rem;
        padding-top: var(--padding-m);
    }
}

@media (min-width: 928px) {
    #body-div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #desc, #title {
        max-width: 500px;
    }

    #title {
        margin-top: 0;
    }

    #image-div {
        padding-right: var(--padding-l);
    }

    #notebook {
        position: relative;
        padding-top: var(--padding-l);
        transition: padding-top 0.7s ease;
        max-width: inherit;
    }

    #notebook-base-inactive {
        position: absolute;
        top: 270px;
        right: 150px;
        width: 360px;
        z-index: -1;
    }

    #notebook-base-active {
        position: absolute;
        top: 222px;
        right: 103px;
        width: 455px;
        z-index: -1;
    }

    #notebook:hover {
        padding-top: 90px;
    }

    #mouse {
        position: absolute;
        top: 459px;
        transition: top 0.7s ease;
        right: 123px;
        width: 65px;
    }

    #mouse-base-inactive {
        position: absolute;
        top: 448px;
        right: 93px;
        width: 120px;
        z-index: -1;
    }

    #mouse-base-active {
        position: absolute;
        top: 398px;
        right: 43px;
        width: 220px;
        z-index: -1;
    }

    #mouse:hover {
        top: 450px;
    }
}