* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: moccasin;
    text-align: center;
    padding: 20px;
}
#hat {
    align-content: center;
    position: relative;
    width: 10%;
    height: auto;
    transition: all 2s ease-in;
    z-index: 1;
}

#platypus {
    align-content: center;
    position: relative;
}

@media screen and (max-width:1344px) {
    #hat.slide {
transform: translateX(500%) translateY(-225px);
    }
    }
@media screen and (min-width:1345px){
    #hat.slide {
        transform: translateX(335%) translateY(-225px);
    }
}

#squat:hover{
    transform: rotate(360deg);
    transition: all 1s ease-in;
}

#violet{
    margin: 114px;
    width: 20%;
    height: auto;
}

#violet:hover{
    content: url(../images/Violet-bloated.webp);
    transform: scale(200%);
    transition: all 0.5s ease-in;
}