#crab:hover{
    transform: rotate(45deg);
}

#crab, #dog, #goggles{
    transition: transform 0.5s;
}

#dog:hover{
    transform: scale(2);
}

#dog, #goggles{
    size: 15px;
    max-width: 500px;
}

/* #goggles:hover{
    transform: translateX(900px);
} */

.move-right{
    transform: translateX(900px);
}


h4{
    font-size: 25px;
}

/* solution */ 

article{
    position: relative;
}

article section {
    position: absolute;
    width: 500px;
    top: 2.44em;
    left: -500px;
    transition: transform 0.5s;
    background-color: black
    
}

article section nav{
    width: 530px;
    text-align: right;
    background-color: black;
    padding: 0.5rem;
}

.visible{
    transform: translateX(500px);
}