#splash-screen {
  position: absolute;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;

  .logo {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    @media @landscape {
      background-position: center top;
      width: 60%;
      height: 42%;
    }
    @media @portrait {
      background-position: center;
      width: 70%;
      height: 50%;
    }
  }

  .continue {
    position: absolute;
    font-family: "Troika";
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    font-size: 5vmin;
    text-align: center;
    color: #b5b0ab;
    -webkit-text-stroke: 0.4vmin transparent;
    text-shadow: 0 0.4vmin #575756;
    cursor: pointer;
    background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0),
      #b5b0ab,
      rgba(0, 0, 0, 0)
    );
    background-size: 40% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation-name: glow;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    @keyframes glow {
      0% {
        background-position-x: -40%;
      }
      50% {
        background-position: 140%;
      }
      100% {
        background-position: -40%;
      }
    }
    &:hover {
      background-size: 100%;
    }
  }
}