html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.logo {
  width: 50%;
}

@keyframes shine {
  0% {
    -webkit-mask-position: -130%;
    mask-position: -30%;
  }
  100% {
    -webkit-mask-position: 130%;
    mask-position: 130%;
  }
}

.shine {
    -webkit-mask-image: linear-gradient(45deg, #000 45%, rgba(0,0,0,0.8) 50%, #000 55%);
    mask-image: linear-gradient(45deg, #000 45%, rgba(0,0,0,0.8) 50%, #000 55%);
    -webkit-mask-size: 200%;
    mask-size: 200%;
    -webkit-mask-position: -130%;
    mask-position: -130%;
    animation: shine 1.5s ease-out;
}

.shine:hover {
    transition: mask-position 1.5s ease-out, -webkit-mask-position 1.5s ease-out;
    -webkit-mask-position: 130%;
    mask-position: 130%;
}