body {
    background: #f7efe2;
    height: 100vh;
    display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo {
    height:500px;
    width:500px;
    position: relative;
    animation: spin 10s linear infinite;
    animation-play-state: paused;
}

.logo:hover {
    animation-play-state: running;    
}

a.logo-link {
    height:100%;
    width:100%;
    position: absolute;
    z-index: 1;
}

.logo-text {
    height:100%;
    width:100%;
    background: url('logo-text.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
}


.logo-smile {
    height:100%;
    width:100%;
    background: url('logo-smile.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
}

@keyframes spin {
    100% {transform: rotate(1turn); }
  }