// colours
$bg: rgb(2%, 11%, 13%);

$x: red;
$glass: rgb(45%, 53%, 59%);
$black: rgb(2%, 11%, 13%); //blackish
$cityscapedk:rgb(24%, 31%, 30%);
$cityscapemd:rgb(36%, 49%, 51%);
$cityscapelt:rgb(47%, 58%, 60%);
$asphalt: rgb(0%, 12%, 10%);
$yellow: rgb(97%, 72%, 20%);
$red: rgb(52%, 0%, 20%);
$purple: rgb(49%, 18%, 73%);
$tyres: rgb(4%, 7%, 16%);
//shapes & sizes
$circle: 50%;
$rounded: 50px;
$size: 100px;
@mixin wh($w, $h) {
    width: $w;
    height: $h;
}
@mixin loc($horiz, $vert){
  left: $horiz;
  top:$vert;
}
@keyframes swaya{
  0%, 50%, 100%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(35deg);
  }
  75%{
    transform: rotate(-35deg);
  }
}
@keyframes swayb{
  0%, 50%, 100%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(-35deg);
  }
  75%{
    transform: rotate(35deg);
  }
}
@keyframes swayc{
  0%, 100%{
    transform: translateY(0%);
  }
  25%, 75%{
    transform: translateY(-30%);
  }
  50%{
    transform: translateY(0%);
  }
}
@keyframes back {
  0%{
    opacity: 0;
    color: $cityscapedk;
  }
  80%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    color: $yellow;
  }
}
@keyframes mid {
  0%{
    opacity: 0;
    color: $cityscapemd;
  }
  80%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    color: $yellow;
  }
}
@keyframes fore {
  0%{
    opacity: 0;
    color: $cityscapelt;
  }
  80%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    color: $yellow;
  }
}
@keyframes iht {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;

  }
}
@keyframes pink {
  0%{
    color: $yellow;
  }
  100%{
    color: rgb(96%, 47%, 72%);
  }
}
@keyframes blue {
  0%{
    color: $yellow;
  }
  100%{
    color: rgb(11%, 62%, 84%);
  }
}
@keyframes green {
  0%{
    color: $yellow;
  }
  100%{
    color: rgb(52%, 85%, 27%);
  }
}
@keyframes orange {
  0%{
    color: $yellow;
  }
  100%{
    color: rgb(97%, 32%, 25%);
  }
}
@keyframes purple {
  0%{
    color: $yellow;
  }
  100%{
    color: rgb(29%, 3%, 92%);
  }
}
@keyframes red {
  0%{
    color: $yellow;
  }
  100%{
    color: rgb(100%, 0%, 0%);
  }
}
@keyframes yellow {
  0%{
    color: $yellow;
  }
  100%{
    color: rgb(86%, 100%, 22%);
  }
}
@keyframes zoom {
  0%{
    transform: translateX(-10%);
  }
  70%, 100%{
    transform: translateX(-660%);
  }
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
body{
	height: 100vh;
  background: $bg;
}

.box{
  position: relative;
  margin:auto;
  margin-top: 5%;
  width: 600px;
  height: 500px;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  border: 1px solid $x;
  & * {
		position: absolute;
	}
}

.cityscapeback{
  @include wh(100%, 50%);
  top: 30%;
  left: 0%;
  background: $cityscapedk;
  z-index: 2;
}
.skyscrapers-back-1 {
  @include wh(20%, 20%);
  top: -20%;
  left: 5%;
  background:$cityscapedk; 
}
.skyscrapers-back-2 {
  @include wh(10%, 20%);
  top: -20%;
  left: 45%;
  background:$cityscapedk; 
}
.skyscrapers-back-3 {
  @include wh(15%, 30%);
  top: -30%;
  left: 75%;
  background:$cityscapedk; 
}
.cityscapemid{
  @include wh(100%, 40%);
  top: 40%;
  position: absolute;
  background: $cityscapemd;
  z-index: 4;
}
.skyscrapers-mid-1 {
  @include wh(20%, 60%);
  top: -60%;
  left: 25%;
  background:$cityscapemd; 
}
.skyscrapers-mid-2 {
  @include wh(10%, 20%);
  top: -20%;
  left: 55%;
  background:$cityscapemd; 
}
.skyscrapers-mid-3 {
  @include wh(5%, 50%);
  top: -50%;
  right: 1%;
  background:$cityscapemd; 
}
.cityscapefore{
  @include wh(100%, 30%);
  position: absolute;
  top: 50%;
  background: $cityscapelt;
  z-index: 6;
}
.skyscrapers-fore-1 {
  @include wh(30%, 10%);
  top: -10%;
  left: 0%;
  background:$cityscapelt; 
}
.skyscrapers-fore-2 {
  @include wh(30%, 30%);
  top: -30%;
  left: 40%;
  background:$cityscapelt; 
}
.skyscrapers-fore-3 {
  @include wh(12%, 140%);
  top: -140%;
  right: 7%;
  background:$cityscapelt; 
}
.street{
  @include wh(100%, 20%);
  bottom: 0%;
  position: absolute;
  background: $asphalt;
  z-index: 2;
}
.treeboxes {
  @include wh(4%, 7%);
  background: rgb(14%, 4%, 1%);
   border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.treetrunk {
  @include wh(25%, 300%);
  background: rgb(22%, 12%, 10%);
  bottom: 100%;
  left: 37.5%;
}
.treetopa{
  @include wh(40px, 40px);
  background: rgba(24%, 0%, 0%,0.33);
  transform-origin: bottom;
  bottom: 99%;
  left: -16px;
  border-radius: $circle;
  animation: 2s linear 1s swaya infinite;
}
.treetopb{
  @include wh(40px, 40px);
  background: rgba(0%, 31%, 0%, 0.33);
  transform-origin: bottom;
  bottom: 99%;
  left: -16px;
  border-radius: $circle;
  animation: 2s linear 1s swayb infinite;
}
.treetopc{
  @include wh(40px, 40px);
  background: rgba(0%, 0%, 16%, 0.33);
  transform-origin: bottom;
  bottom: 99%;
  left: -16px;
  border-radius: $circle;
  animation: 2s linear 1s swayc infinite;
}
@for $i from 0 through 6{
  .#{treebox}-#{$i}{
    margin-left: 30px + $i*100;
    bottom: 0%;
  }
}
.curb {
  @include wh(100%, 5%);
  border-top: 1px solid $cityscapedk;
  background-image: linear-gradient(to top, $cityscapedk 0%, $cityscapelt 100%);
}
.lines {
  @include wh(8%, 5%);
  background: $yellow;
  top: 40%;
}
@for $i from 0 through 6{
  .#{line}-#{$i}{
  margin-left: 20px + $i*85;}
}

.car {
  @include wh(15%, 30%);
  top: 45%;
  right:0%;
  transform: translateX(30%);
  background: $red;
  border-top-right-radius: 20px;
  border-top-left-radius: 100%;
  z-index: 2;
  animation: 4s linear 1s zoom infinite;
}
.car-copy {
  @include wh(100%, 100%);
  background: $red;
  border-top-right-radius: 20px;
  border-top-left-radius: 100%;
  z-index: 4;
}
.tyre-front {
  @include wh(25px, 25px);
  border-radius: $circle;
  background: $cityscapelt;
  border: 7px solid $tyres;
  top: 80%;
  left: 7%;
}
.tyre-back {
  @include wh(25px, 25px);
  border-radius: $circle;
  background: $cityscapelt;
  border: 7px solid $tyres;
  top: 80%;
  right: 5%;
}
@keyframes tyres {
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(-360deg);
  }
}
.hubcap {
  @include wh(11px, 11px);
  border-radius: $circle;
  border: 2px dotted $purple;
  background: none;
  animation: 1s linear 1s tyres infinite;
}
.roof{
  @include wh(50%, 60%);
  border-top-right-radius: $circle;
  border-top-left-radius: 100px;
  background: $red;
  top: -45%;
  right: 15%;
  z-index: 3;
}
.window-f{
  @include wh(45%, 60%);
  border-top-right-radius: $circle;
  border-top-left-radius: 120px;
  background: $glass;
  top: 16%;
  left: 2%;
}
.window-b{
  @include wh(33%, 60%);
  background: $glass;
  top: 16%;
  right: 15%;
}
.antenna {
  @include wh(3%, 130%);
  top: -130%;
  right: 1%;
  transform-origin: bottom left;
  transform: rotate(15deg);
  background: $cityscapemd;
}
.banner {
  @include wh(50px, 17px);
  background: $purple;
  transform-origin: top left;
  transform: skewY(-18deg);
}
.banner:before{
  position:absolute;
  content: "Done!";
  font-family: 'Indie Flower', cursive;
  left: 5%;
  top: -5%;
  color: $yellow;
}
.days-a,.days-b, .days-c, .iht{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.5em;
}
.days-a {
  color: $cityscapedk;
}
.days-b {
  color: $cityscapemd;
}
.days-c {
  color: $cityscapelt;
}
.bearcub{
  left: 5%;
  top: -19%;
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s pink alternate infinite;
 
}
.elephant{
  left: 49%;
  top: -19%;
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s back forwards,
    0.7s linear 3s orange alternate infinite;
}
.beaver{
 left: 65%;
  top:12%; 
  animation: 
    2s linear 1s back forwards,
    1s linear 3s blue alternate infinite;
}
.tiger{
  left: 79.5%;
  top:-17%; 
  transform-origin: left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s back forwards,
    1s linear 3s purple alternate infinite;
}
.dory {
  left: 23%;
  top:-7%; 
  transform-origin: left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s green alternate infinite;
}
.clock{
  @include loc(0%, 10%);
  animation: 
    2s linear 1s back forwards,
    0.8s linear 3s pink alternate infinite;
}
.ruler{
  @include loc(65%, 1%);
  animation: 
    2s linear 1s back forwards,
    1.1s linear 3s blue alternate infinite;
}
.note{
   @include loc(45%, 11%);
  animation: 
    2s linear 1s back forwards,
    1s linear 3s green alternate infinite;
}
.pad{
   @include loc(55%, 10%);
  transform-origin: bottom left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s back forwards,
    1s linear 3s green alternate infinite;
}
.calendar{
  @include loc(74%, -40%);
  transform-origin: bottom left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s red alternate infinite;
}
.penciljar{
  @include loc(5%, -10%);
  animation: 
    2s linear 1s back forwards,
    1s linear 3s purple alternate infinite;
}
.pizza{
  @include loc(0%, -1%);
  animation: 
    2s linear 1s back forwards,
    2s linear 3s green alternate infinite;
}
.taco{
  @include loc(55%, -18%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s back forwards,
    3s linear 3s yellow alternate infinite;
}
.pie{
  @include loc(81.5%, -10%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s purple alternate infinite;
}
.ham{
  @include loc(12%, 1%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s blue alternate infinite;
}
.burger{
  @include loc(11%, 10%);
 
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s blue alternate infinite;
}
.cheese{
  @include loc(11%, 1%);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s yellow alternate infinite;
}
.chcake{
  @include loc(25%, 3%);
 transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s yellow alternate infinite;
}
.zomb{
  @include loc(72%, 3%);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s yellow alternate infinite;
}
.ie{
  @include loc(81%, 11%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s back forwards,
    1.5s linear 3s yellow alternate infinite;
}
.frankenstein{
  @include loc(98.5%, -49%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s green alternate infinite;
}
.werewolf{
  @include loc(26%, -59%);
  animation: 
    2s linear 1s mid forwards,
    1s linear 3s pink alternate infinite;
}
.vampire{
  @include loc(0.5%, 6%);
  animation: 
    2s linear 1s mid forwards,
    1s linear 3s blue alternate infinite;
}
.mon{
  @include loc(30.5%, 13%);
  animation: 
    2s linear 1s mid forwards,
    1s linear 3s orange alternate infinite;
}
.ster{
  @include loc(36.5%, 22%);
  transform-origin: top left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s mid forwards,
    1s linear 3s orange alternate infinite;
}
.superman{
  @include loc(41%, -10%);
  transform-origin: top left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s blue alternate infinite;
}
.wolverine{
  @include loc(29%, -47%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s green alternate infinite;
}
.cap{
  @include loc(30%, -47%);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s red alternate infinite;
}
.tain{
  @include loc(40%, -45%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s red alternate infinite;
}
.am{
  @include loc(40%, -25%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s red alternate infinite;
}
.er{
  @include loc(36.5%, -5%);
  transform-origin: top left;
  transform: rotate(180deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s red alternate infinite;
}
.ica{
  @include loc(33%, -16%);
  transform-origin: top left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s red alternate infinite;
}
.iron{
  @include loc(72%, 2%);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s pink alternate infinite;
}
.man{
  @include loc(71.5%, 10%);
  transform: rotate(180deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s pink alternate infinite;
}
.green{
  @include loc(26.5%, -28%);
  transform: rotate(90deg);
  animation: 
    2s linear 1s mid forwards,
    0.5s linear 3s green alternate infinite;
}
.lantern{
  @include loc(30%, -8%);
  animation: 
    2s linear 1s mid forwards,
    0.5s linear 3s green alternate infinite;
}
.bug{
  @include loc(93.5%, 11%);
  animation: 
    2s linear 1s mid forwards,
    2.5s linear 3s red alternate infinite;
}
.cogs{
  @include loc(30%, 3%);
  animation: 
    2s linear 1s mid forwards,
    2.5s linear 3s blue alternate infinite;
}
.down{
  @include loc(55.5%, -10%);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s orange alternate infinite;
}
.load{
  @include loc(57.5%, -20%);
  transform: rotate(180deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s orange alternate infinite;
}
.appleapp{
  @include loc(81%, 0%);
  transform-origin: top left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s purple alternate infinite;
}
.storeicon{
  @include loc(81%, -71%);
  transform-origin: top left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s purple alternate infinite;
}
.elm{
  @include loc(14%, 5.5%);
  animation: 
    2s linear 1s mid forwards,
    1.5s linear 3s purple alternate infinite;
}

.graph{
  @include loc(20%, 0%);
  transform: rotate(180deg);
  animation: 
    2s linear 1s mid forwards,
    1.7s linear 3s purple alternate infinite;
}
.bar{
  @include loc(23.5%, 7.2%);
  animation: 
    2s linear 1s mid forwards,
    1.7s linear 3s purple alternate infinite;
}

.javascript{
  @include loc(83%, -105%);
  transform: rotate(90deg);
  animation: 
    2s linear 1s fore forwards,
    2.5s linear 3s yellow alternate infinite;
}
.angular{
  @include loc(41%, -26%);
  animation: 
    2s linear 1s fore forwards,
    1s linear 3s red alternate infinite;
}
.vue{
  @include loc(86%, -10%);
  animation: 
    2s linear 1s fore forwards,
    4s linear 3s pink alternate infinite;
}
.vjs{
  @include loc(89%, -7%);
  transform-origin: top left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s fore forwards,
    4s linear 3s pink alternate infinite;
}
.react{
  @include loc(69.5%, -13.6%);
  transform-origin: top left;
  transform: rotate(180deg);
  animation: 
    2s linear 1s fore forwards,
    1s linear 3s purple alternate infinite;
}
.laptop{
  @include loc(14%, 11%);
  transform-origin: top left;
  transform: rotate(180deg);
  animation: 
    2s linear 1s mid forwards,
    3.1s linear 3s red alternate infinite;
}
.cell{
  @include loc(92%, -42%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s fore forwards,
    1s linear 3s blue alternate infinite;
}
.phone{
  @include loc(89%, -52%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s fore forwards,
    1s linear 3s blue alternate infinite;
}

.keyboard{
  @include loc(89%, -132%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s fore forwards,
    1s linear 3s red alternate infinite;
}
.externalmonitor{
  @include loc(29.5%, 4%);
  transform-origin: top left;
  transform: rotate(180deg);
  animation: 
    2s linear 1s fore forwards,
    1.5s linear 3s red alternate infinite;
}
.nintendo2ds{
  @include loc(40.5%, -8%);
  animation: 
    2s linear 1s fore forwards,
    1.5s linear 3s yellow alternate infinite;
}
.cute{
  @include loc(71%, -11.5%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s fore forwards,
    2.2s linear 3s blue alternate infinite;
}
.critter{
  @include loc(68%, -11.5%);
  transform-origin: top left;
  transform: rotate(90deg);
  animation: 
    2s linear 1s fore forwards,
    2.2s linear 3s blue alternate infinite;
}
.animalmascot{
  @include loc(71%, 0%);
  animation: 
    2s linear 1s fore forwards,
    3s linear 3s yellow alternate infinite;
}
.ro{
  @include loc(84.5%, -66%);
  animation: 
    2s linear 1s fore forwards,
    1s linear 3s green alternate infinite;
}
.bot{
  @include loc(71%, 0%);
  animation: 
    2s linear 1s for forwards,
    1s linear 3s green alternate infinite;
}

.ddr{
  @include loc(0%, 2%);
  animation: 
    2s linear 1s fore forwards,
    3s linear 3s green alternate infinite;
}
.pinata{
  @include loc(54%, 2.5%);
  transform: rotate(180deg);
  animation: 
    2s linear 1s fore forwards,
    2s linear 3s pink alternate infinite;
}
.craft{
  @include loc(45.5%, 14%);
 
  animation: 
    2s linear 1s fore forwards,
    2s linear 3s blue alternate infinite;
}
.beer{
  @include loc(46.5%, 2.5%);
  transform: rotate(180deg);
  animation: 
    2s linear 1s fore forwards,
    2s linear 3s blue alternate infinite;
}

.cake{
  @include loc(96%, 30%);
 transform-origin: top left;
  transform: rotate(-90deg);
  animation: 
    2s linear 1s fore forwards,
    2s linear 3s blue alternate infinite;
}
.partycity{
  @include loc(27%, 17%);
  animation: 
    2s linear 1s fore forwards,
    1.3s linear 3s purple alternate infinite;
}
.startupmascot{
  @include loc(1%, 17%);
  animation: 
    2s linear 1s fore forwards,
    3s linear 3s pink alternate infinite;
}
.space{
  @include loc(56%, 15%);
  animation: 
    2s linear 1s fore forwards,
    3s linear 3s red alternate infinite;
}
.mascot{
  @include loc(67%, 15%);
  animation: 
    2s linear 1s fore forwards,
    3s linear 3s red alternate infinite;
}
.iht{
  @include loc(79%, 15%);
  opacity: 0;
  font-weight: bold;
  animation: 
    10s linear 3s iht forwards;
}


.frame {
  @include wh(133%, 130%);
  background: none;
  left: -16.5%;
  top: -10%;
  border: 100px solid $black;
  z-index: 6;
}