:root{
    --box-w:400px;
    --box-h:160px;
    --box-b:16px;
    --ani-f: forwards;
    --ani-r: reverse;
}
body{
    padding-top: 100px;
    background-color: rgb(0, 60, 60);
}
.box{
    position: relative;
    width: var(--box-w);
    height: var(--box-h);
    margin: 0 auto;
    transition: 0.2s;
    box-shadow: var(--box-b) var(--box-b) 50px 10px white;
}
.box:hover{
    --ani-f: reverse;
    transition: 0.2s;
    transform: rotate(30deg) translate(100px,0);

}

p{
    position: absolute;
    display: block;
    background: cadetblue;
    border: var(--box-b) solid wheat;
    width: var(--box-w);
    height: var(--box-h);
    margin: 0 auto;
    font-size: 4em;
    text-align: center;
    padding-bottom: 0px;
    color: black;
}
.dot{
    position: absolute;
    width: var(--box-b);
    aspect-ratio: 1/1;
    background: white;
    animation: txt1 8s infinite var(--ani-f);
    box-shadow: 0px 0px 35px 20px white;
    border-radius: 3em;
}


@keyframes txt1 {
    25%{transform: translate(calc(var(--box-w) + var(--box-b)),0px);}   
    50%{transform: translate(calc(var(--box-w) + var(--box-b)),calc(var(--box-h) + var(--box-b)));}
    75%{transform: translate(0px,calc(var(--box-h) + var(--box-b)));}
}