@font-face {
  font-family: Retro;
  src: url(/assets/fonts/retro_computer.ttf);
}

a {
    font-family: Retro;
    text-decoration: none;
    color: black;
    font-size: 20px;
}

.item {
    display: inline;
    left: 20px;
    padding-right: 200px;
}

.item img {
    width: 250px;
}

.cover {
    position: relative;
    z-index: 1;
}

.record {
    margin-left: -200px;
    animation: record-spin 10s linear 0s infinite;
}

.cover:hover + .record {
    animation: record-spin 10s linear 0s infinite, record-out 0.6s ease-in-out 0s 1 normal forwards;
}

@keyframes record-spin {
    to {
        rotate: 360deg;
    }
}

@keyframes record-out {
    to {
        translate: 180px;
    }
}