.sky
  .stars

.tardis
  .tardis__light
    .tardis__top-light
    .tardis__bottom-light
  .tardis__roof
    .tardis__dark-sign
      p Police
      p Public call
      p Box
  .tardis__doors
    .tardis__door.tardis__door--left
      .tardis__window
      .tardis__panel.tardis__panel--with-plaque
        .tardis__plaque
          p
            span.high police telephone
            span
              span.large free
              span for use of
              span.large public
            span.small Advice & assistence obtainable immediately
            span.small Officer & cars respond to all calls
            span.large.high pull to open
      .tardis__panel
      .tardis__panel
    .tardis__door.tardis__door--right
      .tardis__window
      .tardis__panel
      .tardis__panel
      .tardis__panel
  .tardis__step
  

@import url("https://fonts.googleapis.com/css?family=Lato:700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
* {
  font-family: Lato, Helvetica, sans-serif;
  box-sizing: border-box;
}

$dark: #04060a;
$tardis-base: #19293e;
$tardis-lighter: #2f5063;
$light: #5dc4ef;
$window: #d1b998;
$plaque: #12151e;

@mixin center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Star function by https://codepen.io/saransh/pen/BKJun ✨
// n is number of stars required
@function multiple-box-shadow ($n) {
  $value: '#{random(2000)}px #{random(2000)}px #fff';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #fff';  
  }
  @return unquote($value);
}

$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(200);
$shadows-large: multiple-box-shadow(100);

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  @include center-content;
  &:hover {
    .tardis {
    transform: scale(var(--scale)) translate(var(--x), var(--y));
    transition: transform 0.6s;      
    }

  }
}

.sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 100% 0, hotpink, rebeccapurple 40%, midnightblue);
}
.stars {
  width: 2px;
  height: 2px;
  box-shadow: $shadows-medium;
  border-radius: 100%;
  animation: animate-stars 150s infinite;
  &::before, &::after {
    content: '';
    position: absolute;
    box-shadow: $shadows-small;
    width: 1px;
    height: 1px;
    border-radius: 100%;
    animation: animate-stars 250s infinite;
  }
  &::after {
    width: 4px;
    height: 4px;
    box-shadow: $shadows-large;
    animation: animate-stars 500s infinite;
  }
}

.tardis {
  --x: 0;
  --y: 0;
  --y2: -20px;
  position: relative;
  background: linear-gradient(
    -145deg,
    $tardis-lighter,
    $tardis-base 60%,
    darken($tardis-base, 10%)
  );
  width: 200px;
  height: 350px;
  padding-top: 10px;
  @include center-content;
  flex-direction: column;
  transition: transform 0.4s ease-out;
  --scale: 1;
  @media (max-width: 750px) {
    --scale: 0.5;
  }
  transform: scale(var(--scale)) translate(0, 0);
  transform-origin: center;
  &__light {
    @include center-content;
    position: absolute;
    top: -75px;
    left: calc(50% - 10px);
    width: 20px;
    height: 30px;
    background-image: linear-gradient($light 20%, #fff 80%);
    box-shadow: 0 0 20px white;
    animation: pulse 2s infinite alternate ease-in;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      width: 2px;
      height: 100%;
      background: $dark;
    }
    &::before {
      left: 3px;
    }
    &::after {
      right: 3px;
    }
  }
  &__top-light {
    position: absolute;
    top: -8px;
    left: -7px;
    width: 35px;
    border: 7px solid transparent;
    border-bottom-color: $dark;
    border-radius: 50%;
    &::before,
    &::after {
      content: "";
      position: absolute;
    }
    &::before {
      top: -6px;
      left: 3px;
      z-index: -1;
      border-radius: 5px;
      width: 14px;
      height: 14px;
      background: $dark;
      transform: rotate(-45deg);
    }
    &::after {
      top: -10px;
      left: calc(50% - 1px);
      width: 2px;
      height: 7px;
      border-radius: 15px;
      background: $dark;
    }
  }
  &__bottom-light {
    position: absolute;
    bottom: 30px;
    left: -2px;
    width: 24px;
    height: 6px;
    background: $dark;
  }
  &__roof {
    @include center-content;
    position: absolute;
    top: -30px;
    width: calc(100% + 10px);
    background-image: linear-gradient(
      to right,
      $tardis-lighter,
      $tardis-lighter 5px,
      $tardis-base 5px,
      $tardis-base calc(100% - 5px),
      $tardis-lighter calc(100% - 5px)
    );
    height: 30px;
    &::before,
    &::after {
      content: "";
      position: absolute;
    }
    &::before {
      width: calc(100% - 20px);
      left: 10px;
      top: -15px;
      height: 15px;
      background-image: linear-gradient(
        to right,
        $tardis-base,
        darken($tardis-base, 20%) 15px,
        darken($tardis-base, 10%) 16px,
        darken($tardis-base, 1%) calc(100% - 15px),
        $tardis-base calc(100% - 15px),
        darken($tardis-base, 25%) calc(100% - 15px),
        $tardis-base calc(100% - 12px)
      );
    }
    &::after {
      width: calc(100% - 40px);
      left: 20px;
      top: -30px;
      height: 15px;
      background: $tardis-base;
      background-image: none;
    }
  }
  &__dark-sign {
    @include center-content;
    position: relative;
    width: calc(100% - 40px);
    height: 20px;
    border: 3px $tardis-lighter solid;
    background: $dark;
    color: #fff;
    text-shadow: 0px 0px 10px #ffffff;
    text-transform: uppercase;
    p {
      width: 40%;
      flex-grow: 1;
      font-size: 15px;
      text-align: right;
      &:nth-of-type(3) {
        width: 35%;
        text-align: left;
      }
      &:nth-of-type(2) {
        font-size: 7px;
        line-height: 0.95;
        width: 25%;
        flex-grow: 0;
        text-align: center;
      }
    }
  }
  &__doors {
    @include center-content;
    width: calc(100% - 40px);
    height: 100%;
    border: 2px solid $tardis-base;
    &::before {
      content: "";
      position: absolute;
      top: 10px;
      bottom: 1px;
      width: 6px;
      background-image: linear-gradient(
        to right,
        darken($tardis-base, 10%),
        $tardis-base 1px,
        $tardis-base calc(100% - 1px),
        lighten($tardis-base, 10%) calc(100% - 1px)
      );
    }
  }
  &__door {
    width: 50%;
    height: 100%;
    padding: 10px;
    &:nth-of-type(2) {
      position: relative;
      &::before,
      &::after {
        content: "";
        position: absolute;
      }
      &::before {
        top: calc(50% - 20px);
        left: 5px;
        width: 2px;
        height: 20px;
        background-image: linear-gradient(
          to bottom,
          silver,
          darken(silver, 20%) 20%,
          darken(silver, 20%) 80%,
          silver
        );
        border-radius: 2px;
      }
      &::after {
        width: 4px;
        height: 4px;
        top: calc(50% - 40px);
        left: 4px;
        border-radius: 50%;
        background: silver;
      }
    }
  }
  &__window,
  &__panel {
    width: 100%;
    height: calc(100% / 4 - (50px / 4));
  }
  &__window {
    position: relative;
    background: $window;
    background-image: linear-gradient(
      to bottom,
      transparent,
      transparent calc(100% / 2),
      darken($window, 40%),
      transparent calc(100% / 2 + 2px),
      transparent calc(100% / 2 + 2px)
    );
    border: 2px solid darken($light, 40%);
    box-shadow: inset -2px -1px 1px darken($window, 10%);
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(
        to right,
        transparent,
        transparent calc(100% / 3),
        darken($window, 40%),
        transparent calc(100% / 3 + 2px),
        transparent calc(100% / 3 + 2px),
        transparent calc(100% / 3 * 2),
        darken($window, 40%),
        transparent calc(100% / 3 * 2 + 2px)
      );
    }
  }
  &__panel {
    border: 1px solid $tardis-base;
    margin-top: 10px;
    box-shadow: inset -2px -1px 2px darken($tardis-base, 10%);
    &--with-plaque {
      padding: 6px;
      position: relative;
      &::before,
      &::after {
        content: "";
        position: absolute;
      }
      &::before {
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background-image: linear-gradient(
          to bottom,
          transparent,
          transparent 20%,
          silver 20%,
          silver calc(20% + 6px),
          transparent calc(20% + 6px),
          transparent calc(80% - 6px),
          silver calc(80% - 6px),
          silver 80%,
          transparent 80%
        );
      }
      &::after {
        top: calc(50% - 8px);
        left: 2px;
        width: 2px;
        height: 16px;
        background-image: linear-gradient(
          to bottom,
          silver,
          darken(silver, 20%) 20%,
          darken(silver, 20%) 80%,
          silver
        );
        border-radius: 2px;
      }
    }
  }
  &__plaque {
    display: flex;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, $plaque, lighten($plaque, 5%));
    p {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0;
      padding: 3px;
      height: 100%;
      color: white;
    }
    span {
      display: block;
      font-size: 4px;
      text-align: center;
      text-transform: uppercase;
      line-height: 1;
      &.large {
        font-size: 5px;
      }
      &.high {
        font-family: Oswald, sans-serif;
        font-size: 5px;
      }
      &.small {
        font-size: 2.5px;
        line-height: 1.2;
      }
    }
  }
  &__step {
    position: absolute;
    bottom: -20px;
    width: calc(100% + 10px);
    height: 20px;
    background-image: linear-gradient(
      to right,
      darken($tardis-base, 10%),
      darken($tardis-base, 1%) calc(100% - 15px),
      $tardis-base calc(100% - 15px)
    );
  }
}

@keyframes pulse {
  from {
    box-shadow: 0 0 50px white;
  }
  to {
    box-shadow: 0 0 10px white;
  }
}

@keyframes animate-stars{
  from	{
    transform: translateY(0px);
  }
  to {		
    transform: translateY(-2000px);
  }
}

const tardis = document.querySelector('.tardis');

document.addEventListener('mousemove', (e) => {
  const correctionX = window.innerWidth / 2;
  const correctionY = window.innerHeight / 2;
  tardis.style.setProperty('--x', `${e.clientX - correctionX}px`);
  tardis.style.setProperty('--y', `${e.clientY - correctionY}px`);
});