body {
    background-color: rgb(186, 225, 182);
}

.box {
    background-color: rgba(166, 96, 133, 0.738);
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(20deg);
    position: relative;
    z-index: 3;
    left: 200px;
    top: 400px;
    transition: background-color 0.6s ease-in-out;
}

.box:hover {
    background-color: rgb(184, 105, 105);
}

.box p {
    font-family: monospace;
    font-weight: bold;
    font-size: 25px;
    transform: translate(100px, -20px);
    transition: transform 1s linear;
}

.shift {
    display: inline-block;
    transition: transform .3s ease-out;
}

.shift:hover {
    transform: rotate(-30deg);
}

.box p:hover {
    transform: scale(4);
}

.box2 {
    width: 100px;
    height: 80px;
    border: 1px dashed rgb(63, 63, 164);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 100px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.box2 p {
    transition: all .4s linear;
    color: grey;
    /* transition: text-decoration 1s linear; */
}

.box2:nth-child(odd) p:hover {
    font-family: fantasy;
    color: cadetblue;
    font-size: larger;
}

.box2:nth-child(2n) p:hover {
    text-decoration: underline overline;
    font-weight: 900;
    color: coral;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateX(-20px);
    }

    75% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }

}

.box2:nth-child(4) {
    animation: float 2s ease-in-out alternate infinite;
}

.box2 .p {
    display: inline-block;
    animation: float 2s ease-in-out .2s reverse infinite;
}