.menu{

    position:relative;

    width:160px;

    max-width:100%;

    margin:0;

    box-sizing:border-box;

    padding:8px 0;

    border-top:1px solid #555;

    border-bottom:1px solid #555;

    font:12px "Lato",sans-serif;

    letter-spacing:.5px;

    overflow:hidden;

    left:50%;

    transform:translateX(-50%);

}


.menu a{

    color:inherit;

    text-decoration:none;

}





.menu ul{

    margin:0;

    padding:0;

    list-style:none;

}




.menu li{

    position:relative;

    height:20px;

    line-height:20px;

    padding-left:0;

    text-indent:-55px;

    color:#555;

    white-space:nowrap;

    transform-origin:left center;

}





.menu li::before{

    content:">";

    position:absolute;

    left:0;

    top:0;

    color:#000;

    font-weight:bold;

    line-height:20px;

    text-indent:0;

}





.menu li:nth-child(1)::before{

    animation:pointer1 8s infinite;

}


.menu li:nth-child(2)::before{

    animation:pointer2 8s infinite;

}


.menu li:nth-child(3)::before{

    animation:pointer3 8s infinite;

}


.menu li:nth-child(4)::before{

    animation:pointer4 8s infinite;

}




.menu li:nth-child(1){

    animation:select1 8s infinite;

}


.menu li:nth-child(2){

    animation:select2 8s infinite;

}


.menu li:nth-child(3){

    animation:select3 8s infinite;

}


.menu li:nth-child(4){

    font-weight:600;

    animation:love 8s infinite;

}





@keyframes pointer1{

    0%,25%{
        opacity:1;
    }

    25.1%,100%{
        opacity:0;
    }

}



@keyframes pointer2{

    0%,25%{
        opacity:0;
    }

    25.1%,50%{
        opacity:1;
    }

    50.1%,100%{
        opacity:0;
    }

}



@keyframes pointer3{

    0%,50%{
        opacity:0;
    }

    50.1%,75%{
        opacity:1;
    }

    75.1%,100%{
        opacity:0;
    }

}



@keyframes pointer4{

    0%,75%{
        opacity:0;
    }

    75.1%,100%{
        opacity:1;
    }

}






@keyframes select1{

    0%,25%{

        color:#d3d3d3;

    }

    25.1%,100%{

        color:#555;

    }

}



@keyframes select2{

    0%,25%{

        color:#555;

    }

    25.1%,50%{

        color:#d3d3d3;

    }

    50.1%,100%{

        color:#555;

    }

}



@keyframes select3{

    0%,50%{

        color:#555;

    }

    50.1%,75%{

        color:#d3d3d3;

    }

    75.1%,100%{

        color:#555;

    }

}






@keyframes love{

    0%,75%{

        color:#555;

        transform:scale(1);

        text-shadow:none;

    }


    87%,100%{

        color:#ff8d8d;

        transform:scale(1.04);

        text-shadow:0 0 8px rgba(255,90,90,.45);

    }

}





.gamebox{

    position:absolute;

    right:8px;

    top:49px;

    width:20px;

    height:20px;

    cursor:pointer;

}



.gamebox a{

    display:block;

    width:20px;

    height:20px;

}



.gamebox img{

    width:20px;

    height:20px;

    display:block;

    image-rendering:pixelated;

}





.gamebox::after{

    content:"";

    position:absolute;

    left:8px;

    top:6px;

    width:10px;

    height:10px;

    background:url("https://forumstatic.ru/files/001c/92/6e/57408.png") center/contain no-repeat;

    opacity:0;

    pointer-events:none;

}



.gamebox:hover::after{

    animation:heart .8s ease forwards;

}





.gamebox:hover img{

    animation:block .35s ease;

}



@keyframes block{

    0%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-7px);

    }

    100%{

        transform:translateY(0);

    }

}



@keyframes heart{

    0%{

        opacity:0;

        transform:translate(0,0) scale(.3);

    }

    15%{

        opacity:1;

    }

    70%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(8px,-18px) scale(1.3);

    }

}