@import 'base';

.fullscreen {
  padding-top: .2em;
  &.full {
    height: 100%;
  }
}

.title-divider {
  margin-top: -1.2em;
  margin-bottom: -.2em;
  font-size: 1.5em;
}

.lang {
  display: inline-block;
  margin: 24px;
  .logo {
    width: 168px;
    height: 168px;
    background: no-repeat center;
    background-size: contain;
  }
  .logo.mono {
    transition: opacity .5s;
  }
  .name {
    margin-top: 16px;
    width: 168px;
    transition: color .5s;
  }
  &:hover, &.selected {
    .logo.mono {
      opacity: 0;
    }
    .name {
      color: white;
    }
  }
}

.unfocused {
  opacity: .2;
}

.focused {
  transition: opacity .5s;
}

.stick-to-bottom.stick, .stick-to-bottom.fake {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.stick-to-bottom.fake {
  visibility: hidden;
}

.footer {
  text-shadow: 0 1px 0 black;
  padding: 32px 0 4px 0;
  a {
    color: $primary-dark;
  }
}

.github-corner {
  svg {
    fill: $primary-light;
    color: $primary-normal;
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  &:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

@keyframes octocat-wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  20%, 60% {
    transform: rotate(-25deg);
  }
  40%, 80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }

  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}