* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#cosmix {
    width: 300px;
    position: absolute;
    /* left: calc(50% - 150px); */
    /* top: 100px; */
}
.move{
    transform: translateX(100px);
}

body {
    width: 100%;
    height: 100vh;
    background-color: blueviolet;
}
@keyframes shake {
    0% { translate(1px, 1px) rotate(0deg); }
    10% { translate(-1px, -2px); rotate(-1deg); }
    20% { translate(-3px, 0px); rotate(1deg); }
    30% { translate(3px, 2px); rotate(0deg); }
    40% { translate(1px, -1px); rotate(1deg); }
    50% { translate(-1px, 2px); rotate(-1deg); }
    60% { translate(-3px, 1px); rotate(0deg); }
    70% { translate(3px, 1px); rotate(-1deg); }
    80% { translate(-1px, -1px); rotate(1deg); }
    90% { translate(1px, 2px); rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  #cosmix {
    width: 300px;
    position: absolute;
    /* left: calc(50% - 150px); */
    /* top: 100px; */
    transition: all 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

    #btn {
        color:hwb(340 48% 0%);
        font-size: 15px;
        top: -50px;
        font-family:'Courier New', Courier, monospace;
        display: inline-block;
        background-color: pink;
        padding: 2px 5px;
        border-radius: 10px;
        box-shadow:  2px 4px 10px rgb(104, 62, 76);
        margin-bottom: 20px;
        text-align: center;
        margin-left: 20px;
    }
        #btn:hover {
            color: pink;
            background-color: hwb(340 48% 0%);
        }