:root {
  --bg: #fff4d1;
  --w1: conic-gradient(from 90deg at 50% 50%, #fff491 0% 25%, #fff0 0% 100%)
    no-repeat;
  --w2: conic-gradient(from 90deg at 50% 50%, #ffdf81 0% 25%, #fff0 0% 100%)
    no-repeat;
  --w3: conic-gradient(from 90deg at 50% 50%, #ffb84f 0% 25%, #fff0 0% 100%)
    no-repeat;
  --w4: conic-gradient(from 90deg at 50% 50%, #ff926f 0% 25%, #fff0 0% 100%)
    no-repeat;
  --w5: conic-gradient(from 90deg at 50% 50%, #acb0b1 0% 25%, #fff0 0% 100%)
    no-repeat;
  --w6: conic-gradient(from 90deg at 50% 50%, #9dc8dc 0% 25%, #fff0 0% 100%)
    no-repeat;
  --w7: conic-gradient(from 90deg at 50% 50%, #577c9a 0% 25%, #fff0 0% 100%)
    no-repeat;
  --w8: conic-gradient(from 90deg at 50% 50%, #2b4e5f 0% 25%, #fff0 0% 100%)
    no-repeat;
}

* {
  transform-style: preserve-3d;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #1f1f1f;
  background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
  cursor: pointer;
}

.sky {
  background: linear-gradient(0deg, #673ab78a, #3c3c3c94);
  height: 100vh;
}

.sky:after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0vh;
  background-image: radial-gradient(2px 2px at 20px 30px, #484341, transparent),
    radial-gradient(2px 2px at 43px 75px, #735454, transparent),
    radial-gradient(2px 1px at 54px 184px, #828282, transparent),
    radial-gradient(2px 2px at 93px 47px, #654b49, transparent),
    radial-gradient(1px 1px at 148px 87px, #3a1919, transparent),
    radial-gradient(2px 2px at 193px 137px, #a26662, transparent),
    radial-gradient(1px 2px at 210px 154px, #805241, transparent),
    radial-gradient(2px 2px at 243px 102px, #866356, transparent),
    radial-gradient(2px 1px at 264px 184px, #794937, transparent),
    radial-gradient(2px 2px at 293px 44px, #735454, transparent),
    radial-gradient(1px 1px at 223px 62px, #ad968e, transparent),
    radial-gradient(2px 2px at 249px 162px, #884228, transparent),
    radial-gradient(2px 2px at 73px 99px, #442e26, transparent),
    radial-gradient(1px 1px at 163px 42px, #403433, transparent),
    linear-gradient(180deg, #fff0 10%, #000 25%, #111 50%, #222 75%, #111 100%);
  background-repeat: no-repeat, repeat;
  background-size: 333px 263px, 333px 163px, 333px 163px, 333px 163px,
    333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px,
    333px 163px, 333px 163px, 333px 163px, 333px 163px, 100% 100%;
  opacity: 0.5;
  mix-blend-mode: color-burn;
}

.moon {
  position: absolute;
  z-index: 2;
  width: 20vmin;
  height: 20vmin;
  left: 20vmin;
  top: 15vmin;
  opacity: 1;
  border-radius: 100%;
  animation: start-moon 3s ease 0s 1;
  background: radial-gradient(
      circle at 50% 50%,
      #fdfdfd 0% 7vmin,
      #ffffff00 7.25vmin 100%
    ),
    #fff;
  box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset,
    0 0 20px 5px #fdfdfd;
  mix-blend-mode: exclusion;
}

.moon:before {
  content: "";
  background: radial-gradient(
    circle at 100% 60%,
    #ffffff00 0% 60%,
    #dddddd 75% 100%
  );
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  border-radius: 100%;
}

.moon:after {
  content: "";
  background: radial-gradient(
    circle at 0% 40%,
    #efefef 0% 60%,
    #ededed 75% 100%
  );
  width: 4.5vmin;
  height: 4.5vmin;
  position: absolute;
  top: 20%;
  left: 20%;
  border-radius: 100%;
  filter: blur(2px);
}

.light {
  mix-blend-mode: soft-light;
  /* background: #fff4d2;*/
  width: 22vmin;
  height: 22vmin;
  border-radius: 100%;
  position: absolute;
  top: 14vmin;
  left: 19vmin;
  transform: rotate(-45deg);
  opacity: 0;
  animation: start 5s ease 0s 1, blink-off 0.2s ease 0s 2;
}

.light:before {
  content: "";
  position: absolute;
  border: 8vmin solid transparent;
  border-top: 150vmin solid #fff4d2;
  top: 14vmin;
  left: 0.5vmin;
  border-radius: 0.5vmin;
  opacity: 0.65;
  filter: blur(3px);
  width: 5vmin;
}

.light:after {
  content: "";
  mix-blend-mode: soft-light;
  background: #fff4d2;
  width: 22vmin;
  height: 22vmin;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-45deg);
  filter: blur(2px);
}

body:hover .light {
  animation-iteration-count: 0;
}

body:active .light {
  opacity: 1;
  animation: start 1s ease 0s 1, blink-on 0.15s ease 0s 2;
  cursor: none;
}

@keyframes blink-off {
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@keyframes blink-on {
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}

@keyframes start {
  20%,
  80% {
    opacity: 1;
  }
}

/*** 
  Batman logo by Stephen Greig:
  http://tangledindesign.com/famous-logos-in-css3-the-dark-knight/
***/
#batman-logo {
  filter: contrast(1.5) blur(0.5px);
  height: 4.35vmin;
  overflow: hidden;
  position: absolute;
  width: 16vmin;
  background: #000;
  left: 1.85vmin;
  top: 9.75vmin;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    right top,
    color-stop(0, rgb(72, 84, 92)),
    color-stop(0.63, rgb(25, 26, 26)),
    color-stop(0.86, rgb(26, 26, 26))
  );
  background-image: -moz-linear-gradient(
    /* Remember Browser specific prefixes! */ left bottom,
    /* Gradient start point (the angle) */ rgb(72, 84, 92) 0%,
    /* First colour and start point */ rgb(25, 26, 26) 63%,
    /* Second colour and start point */ rgb(26, 26, 26) 86%
  );
  background-image: -o-linear-gradient(
    left bottom,
    rgb(72, 84, 92) 0%,
    rgb(25, 26, 26) 63%,
    rgb(26, 26, 26) 86%
  );
  transform: rotateZ(48deg) rotateY(15deg) rotateX(0deg) scaleY(1.75)
    scaleX(1.25);
  box-shadow: 0 0 10vmin 2vmin #fff;
  border-radius: 5% 5% 100% 100%;
}

#batman-logo div {
  position: absolute;
}

#left-white {
  background: var(--bg);
  border-radius: 3.2vmin 5.12vmin 0.96vmin 1.16vmin / 2.56vmin 3.2vmin 1.16vmin
    1.16vmin;
  width: 7.36vmin;
  height: 2.56vmin;
  top: -0.032vmin;
  left: -5.056vmin;
}

#left-white:after {
  content: "";
  position: absolute;
  background: var(--bg);
  width: 10.656vmin;
  height: 7.04vmin;
  border-radius: 0 12.8vmin 12.8vmin 12.8vmin / 0 9.6vmin 9.6vmin 9.6vmin;
  top: 2.336vmin;
  left: 2.816vmin;
}

#right-white {
  background: var(--bg);
  border-radius: 5.12vmin 3.2vmin 1.16vmin 0.96vmin / 3.2vmin 2.56vmin 1.16vmin
    1.16vmin;
  width: 7.36vmin;
  height: 2.56vmin;
  top: -0.032vmin;
  right: -5.056vmin;
}

#right-white:after {
  content: "";
  position: absolute;
  background: var(--bg);
  width: 12.256vmin;
  height: 7.04vmin;
  border-radius: 12.8vmin 0 12.8vmin 12.8vmin / 9.6vmin 0 9.6vmin 9.6vmin;
  top: 2.336vmin;
  right: 1.216vmin;
}

#top-white {
  width: 0.384vmin;
  top: 0;
  left: 7.664vmin;
  border-left: 0.384vmin solid #fff0;
  border-right: 0.384vmin solid #fff0;
  border-top: 0.64vmin solid #fff;
}

#top-white:before {
  content: "";
  position: absolute;
  width: 2.08vmin;
  height: 2.464vmin;
  background: var(--bg);
  border-radius: 0.96vmin 0.32vmin 0.32vmin 0.96vmin / 2.56vmin 1.16vmin 1.16vmin
    1.16vmin;
  top: -2.08vmin;
  right: 0.576vmin;
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
}

#top-white:after {
  content: "";
  position: absolute;
  width: 2.08vmin;
  height: 2.464vmin;
  background: var(--bg);
  border-radius: 0.32vmin 0.96vmin 0.96vmin 0.32vmin / 1.16vmin 2.56vmin 1.16vmin
    1.16vmin;
  top: -2.08vmin;
  left: 0.576vmin;
  -moz-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
}

#lighting {
  width: 3.2vmin;
  height: 3.2vmin;
  background: var(--bg);
  border-radius: 2.4vmin;
  left: 3.2vmin;
  top: -0.32vmin;
  opacity: 0.02;
  box-shadow: #fff 0 0 2.24vmin;
  -webkit-box-shadow: #fff 0 0 2.24vmin;
  -moz-box-shadow: #fff 0 0 2.24vmin;
}
/*** END Batman logo by Stephen Greig ***/

.skyline {
  height: 65vh;
  position: absolute;
  background: linear-gradient(75deg, #09080c, #0f0323), #0f0323;
  bottom: 0;
  width: 100vw;

  background: var(--w5) 0.5% 54%, var(--w6) 2.5% 56.25%, var(--w7) 0.25% 64.85%,
    var(--w8) 0.75% 84.25%, var(--w6) 19.685% 44.2%, var(--w5) 22.35% 44.25%,
    var(--w7) 15.75% 55.25%, var(--w6) 16.6% 58.25%, var(--w8) 21.475% 54%,
    var(--w8) 23.35% 65.5%, var(--w5) 13.85% 62.25%, var(--w6) 19.35% 65.25%,
    var(--w6) 22.45% 54%, var(--w7) 22.35% 68.15%, var(--w8) 35.35% 55.25%,
    var(--w8) 34.1% 61.25%, var(--w7) 33.1% 84%, var(--w5) 32.35% 73.25%,
    var(--w6) 47.35% 71.25%, var(--w5) 51.5% 82.25%, var(--w8) 41.55% 50%,
    var(--w6) 42.5% 50%, var(--w7) 38.95% 65%, var(--w8) 44.5% 68%,
    var(--w6) 40.55% 50%, var(--w5) 44.85% 59%, var(--w7) 53.25% 66%,
    var(--w8) 49.55% 60%, var(--w6) 50.55% 70%, var(--w5) 53.75% 74%,
    var(--w5) 51.55% 70%, var(--w6) 51.55% 76%, var(--w7) 62.4% 67%,
    var(--w7) 54.75% 57%, var(--w8) 63% 55.5%, var(--w5) 70.5% 66%,
    var(--w6) 68.5% 69%, var(--w7) 70% 51%, var(--w8) 71% 51%, var(--w7) 68.5% 54%,
    var(--w6) 77% 74%, var(--w7) 72% 61%, var(--w5) 78% 55%, var(--w6) 78% 57%,
    var(--w6) 88% 66%, var(--w5) 93.35% 27.5%, var(--w5) 91% 32%,
    var(--w8) 89% 66%, var(--w8) 91% 34.5%, var(--w7) 91% 37%, var(--w7) 91% 41%,
    var(--w6) 99% 86%, var(--w6) 92% 39%, var(--w5) 92% 43%, var(--w7) 93.5% 55%,
    var(--w5) 93% 46%, linear-gradient(75deg, #150e21, #0f0323), #0f0323;

  background-size: 1vw 1vh, 1vw 1.5vh, 1vw 1vh, 1vw 1vh, 1vw 2vh, 1vw 2vh,
    1.15vw 1.25vh, 0.5vw 0.75vh, 1vw 2vh, 0.51vw 1vh, 1vw 1vh, 1vw 2vh, 1vw 1vh,
    1vw 2vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 0.5vw 1vh, 1vw 2vh, 1vw 1vh, 1vw 1.5vh,
    1vw 2vh, 0.5vw 0.5vh, 1vw 1vh, 1vw 1vh, 0.75vw 1vh, 1vw 1vh, 0.75vw 1.2vh,
    1vw 1vh, 1vw 1vh, 0.75vw 2vh, 1vw 1.25vh, 0.75vw 1vh, 0.5vw 1vh, 1vw 1vh,
    1vw 0.5vh, 1vw 1vh, 1vw 2vh, 1vw 1.25vh, 1.2vw 1.2vh, 0.75vw 1vh, 1vw 2vh,
    1vw 2vh, 1vw 1vh, 1vw 1vh, 1vw 2vh, 1vw 2vh, 1vw 1.5vh, 1vw 1vh, 1vw 2vh,
    1vw 1vh, 0.5vw 1.25vh, 1vw 1.25vh, 1vw 2vh, 1vw 1vh, 1vw 1.2vh, 100% 100%;

  clip-path: polygon(
    0% 100%,
    0% 100%,
    100% 100%,
    100% 100%,
    100% 65%,
    100% 65%,
    97% 65%,
    97% 65%,
    97% 63%,
    97% 63%,
    95% 64%,
    95% 64%,
    94% 32%,
    94% 32%,
    94% 31%,
    94% 31%,
    94% 28%,
    94% 28%,
    93% 23%,
    93% 23%,
    92% 9%,
    92% 9%,
    92% 23%,
    92% 23%,
    91% 28%,
    91% 28%,
    91% 31%,
    91% 31%,
    90% 32%,
    90% 32%,
    90% 64%,
    90% 64%,
    87% 64%,
    87% 64%,
    87% 67%,
    87% 67%,
    86% 67%,
    86% 67%,
    85% 65%,
    85% 67%,
    84% 65%,
    84% 65%,
    84% 66%,
    84% 66%,
    82% 64%,
    85% 70%,
    83% 57%,
    83% 57%,
    81% 58%,
    81% 58%,
    80% 54%,
    81% 54%,
    81% 54%,
    80% 54%,
    80% 51%,
    80% 52%,
    79% 51%,
    79% 51%,
    79% 49%,
    79% 49%,
    79% 48%,
    79% 48%,
    79% 50%,
    79% 50%,
    78% 50%,
    78% 50%,
    78% 53%,
    78% 53%,
    77% 54%,
    77% 54%,
    77% 65%,
    77% 65%,
    75% 65%,
    75% 65%,
    74% 63%,
    74% 63%,
    73% 63%,
    73% 63%,
    73% 54%,
    73% 54%,
    72% 53%,
    72% 53%,
    72% 50%,
    72% 50%,
    69% 50%,
    69% 50%,
    69% 53%,
    69% 53%,
    66% 53%,
    66% 53%,
    66% 55%,
    66% 55%,
    66% 55%,
    66% 55%,
    66% 58%,
    66% 58%,
    65% 58%,
    65% 58%,
    64% 62%,
    64% 61%,
    64% 62%,
    64% 62%,
    64% 54%,
    64% 54%,
    59% 54%,
    60% 54%,
    59% 53%,
    59% 53%,
    58% 53%,
    58% 53%,
    58% 52%,
    58% 52%,
    56% 52%,
    56% 52%,
    56% 53%,
    56% 53%,
    55% 53%,
    55% 53%,
    54% 56%,
    55% 56%,
    53% 56%,
    53% 56%,
    53% 58%,
    53% 58%,
    52% 58%,
    52% 58%,
    51% 54%,
    51% 54%,
    50% 54%,
    50% 54%,
    49% 50%,
    49% 50%,
    47% 50%,
    47% 50%,
    47% 52%,
    47% 52%,
    47% 55%,
    47% 55%,
    47% 63%,
    47% 63%,
    46% 64%,
    46% 64%,
    46% 57%,
    46% 57%,
    45% 57%,
    45% 57%,
    45% 49%,
    45% 49%,
    44% 48%,
    44% 49%,
    44% 46%,
    45% 46%,
    40% 46%,
    41% 46%,
    40% 49%,
    40% 49%,
    39% 49%,
    39% 49%,
    39% 56%,
    39% 56%,
    39% 56%,
    39% 56%,
    38% 53%,
    38% 53%,
    37% 54%,
    35% 54%,
    35% 60%,
    35% 60%,
    34% 60%,
    34% 60%,
    33% 48%,
    33% 48%,
    30% 48%,
    30% 48%,
    30% 45%,
    30% 42%,
    29% 43%,
    29% 45%,
    29% 47%,
    29% 47%,
    29% 47%,
    29% 47%,
    29% 59%,
    28% 59%,
    28% 59%,
    28% 59%,
    28% 52%,
    28% 52%,
    25% 52%,
    25.25% 52%,
    25% 38%,
    25% 38%,
    23% 40%,
    24% 40%,
    20% 40%,
    20% 40%,
    18% 38%,
    18% 38%,
    17.75% 53%,
    18% 53%,
    17% 53%,
    17% 53%,
    17% 54%,
    17% 54%,
    16% 53%,
    16% 53%,
    16% 44%,
    16% 44%,
    12% 44%,
    12% 44%,
    12% 53%,
    12% 53%,
    11% 53%,
    12% 53%,
    11% 47%,
    11% 47%,
    10% 47%,
    10% 47%,
    10% 45%,
    10% 45%,
    9% 45%,
    9% 45%,
    9% 48%,
    9% 48%,
    8% 48%,
    8% 48%,
    8% 51%,
    8% 51%,
    6% 53%,
    6% 53%,
    6% 63%,
    5% 63%,
    4% 61%,
    4% 62%,
    4% 53%,
    4% 53%,
    0% 50%,
    0% 50%,
    0% 95%,
    0% 100%
  );
}

.skyline:before {
  content: "CLICK \0026  HOLD TO CALL BATMAN";
  position: absolute;
  width: 100%;
  bottom: 2.25vmin;
  text-align: center;
  color: #292545;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  animation: call 3s ease 0s 1;
  transition: all 0.5s ease 0s;
}

body:active .skyline:before {
  opacity: 0;
  animation: call 3s ease 0s 1;
  transition: all 0.5s ease 0s;
}

.light + .skyline {
  height: 60vh;
  background: var(--w1) 10.5% 72%, var(--w2) 2.05% 69.25%, var(--w3) 3.25% 64.85%,
    var(--w4) 12.5% 61.25%, var(--w1) 10.55% 47%, var(--w2) 9.35% 50.25%,
    var(--w3) 6% 77.25%, var(--w4) 13.6% 85.25%, var(--w1) 12.475% 39%,
    var(--w2) 8.35% 65.25%, var(--w3) 9.35% 55.25%, var(--w4) 10.5% 55.25%,
    var(--w1) 11.55% 26%, var(--w2) 12.5% 35.15%, var(--w3) 7.35% 40.25%,
    var(--w4) 8.5% 32.25%, var(--w1) 20% 72%, var(--w2) 17.35% 74.25%,
    var(--w3) 17.35% 77.25%, var(--w4) 21.5% 82.25%, var(--w1) 29.55% 49%,
    var(--w1) 28% 54%, var(--w4) 27.95% 73%, var(--w3) 24.5% 78%,
    var(--w4) 30.55% 49%, var(--w3) 30.55% 63%, var(--w1) 29.25% 66%,
    var(--w2) 26.55% 60%, var(--w2) 34.55% 70%, var(--w4) 35.75% 73%,
    var(--w3) 34.55% 73%, var(--w1) 34.55% 76%, var(--w1) 47.85% 79%,
    var(--w2) 46.75% 79%, var(--w3) 41.75% 72.5%, var(--w4) 40.5% 76%,
    var(--w2) 60.5% 69%, var(--w3) 58% 54%, var(--w4) 59% 58%, var(--w1) 60.5% 49%,
    var(--w3) 73% 74%, var(--w4) 63.85% 62%, var(--w1) 65% 65%, var(--w2) 69% 75%,
    var(--w4) 92% 68%, var(--w1) 95.5% 58%, var(--w2) 94% 58%, var(--w3) 88% 75%,
    var(--w4) 81% 68.5%, var(--w2) 79.5% 55%, var(--w2) 83% 51%, var(--w1) 83% 72%,
    var(--w3) 60.15% 36%, var(--w1) 59% 40%, var(--w2) 57.75% 36%,
    var(--w1) 57% 46%, linear-gradient(20deg, #030510, #000);

  background-size: 1vw 1.2vh, 0.7vw 1vh, 0.7vw 1vh, 1vw 1.2vh, 1vw 1.2vh,
    1vw 1.2vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1.2vh, 1vw 1.2vh, 1vw 1.2vh, 1vw 1vh,
    1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 0.5vw 1vh, 0.5vw 1vh, 0.751vw 1vh,
    0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh,
    0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh,
    1vw 1.2vh, 1vw 1.2vh, 1vw 2vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh,
    1vw 2vh, 0.7vw 1vh, 0.7vw 1vh, 0.8vw 1.2vh, 1vw 1.2vh, 0.8vw 1vh, 0.81vw 1vh,
    1vw 1vh, 1vw 1.3vh, 1vw 1.3vh, 1vw 1.3vh, 1vw 1.3vh, 1vw 1vh, 1vw 1vh, 1vw 1vh,
    1vw 1vh, 100% 100%;

  clip-path: polygon(
    100% 99%,
    100% 86%,
    98% 87%,
    98% 81%,
    97% 81%,
    97% 52%,
    95% 53%,
    95% 42%,
    94% 42%,
    94% 54%,
    91% 54%,
    92% 66%,
    91% 66%,
    91% 81%,
    90% 81%,
    90% 90%,
    89% 90%,
    89% 73%,
    87% 68%,
    86% 68%,
    85% 70%,
    84% 41%,
    83% 41%,
    79% 53%,
    78% 52%,
    78% 78%,
    76% 77%,
    76% 64%,
    75% 64%,
    75% 67%,
    72% 66%,
    72% 80%,
    71% 80%,
    71% 83%,
    71% 83%,
    70% 76%,
    70% 76%,
    70% 71%,
    66% 72%,
    66% 59%,
    65% 56%,
    65% 53%,
    64% 54%,
    63% 59%,
    63% 73%,
    62% 73%,
    62% 32%,
    55% 32%,
    56% 76%,
    55% 77%,
    55% 80%,
    53% 80%,
    52% 88%,
    51% 88%,
    51% 85%,
    50% 84%,
    50% 75%,
    49% 75%,
    48% 72%,
    47% 72%,
    47% 75%,
    45% 75%,
    45% 85%,
    44% 84%,
    44% 80%,
    43% 79%,
    43% 71%,
    42% 68%,
    39% 68%,
    37% 80%,
    37% 68%,
    34% 68%,
    34% 80%,
    34% 81%,
    34% 84%,
    33% 84%,
    33% 77%,
    32% 77%,
    32% 63%,
    32% 63%,
    32% 48%,
    31% 46%,
    30% 40%,
    29% 36%,
    29% 32%,
    29% 25%,
    28% 32%,
    28% 36%,
    28% 40%,
    27% 46%,
    26% 48%,
    26% 62%,
    26% 63%,
    26% 75%,
    24% 76%,
    24% 82%,
    23% 82%,
    23% 80%,
    22% 80%,
    22% 72%,
    21% 69%,
    20% 69%,
    19% 72%,
    17% 72%,
    17% 82%,
    17% 86%,
    15% 86%,
    15% 75%,
    14% 75%,
    15% 42%,
    14% 42%,
    14% 34%,
    13% 34%,
    13% 25%,
    12% 25%,
    12% 23%,
    11% 23%,
    11% 17%,
    10% 17%,
    10% 0%,
    10% 16%,
    9% 17%,
    9% 24%,
    8% 26%,
    9% 26%,
    8% 26%,
    8% 35%,
    7% 35%,
    7% 42%,
    7% 42%,
    7% 75%,
    6% 75%,
    6% 88%,
    5% 88%,
    5% 85%,
    4% 84%,
    5% 63%,
    2% 63%,
    2% 85%,
    1% 86%,
    1% 80%,
    1% 80%,
    1% 71%,
    0% 69%,
    0% 100%
  );
}

@keyframes call {
  0%,
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (orientation: portrait) {
  .light {
    transform: rotate(-15deg);
  }
  #batman-logo {
    transform: scale(1.15) rotate(17deg);
    left: 2.5vmin;
  }
  .light:before {
    border-top: 250vmin solid #fff4d2;
  }
}

/*** BATMAN ***/

.batman {
  position: absolute;
  background-size: cover;
  width: 45vmin;
  height: 33vmin;
  z-index: 333;
  top: 0vh;
  right: 3vmin;
  transform: scale(0.5);
  transform-origin: right bottom;
}

/*
body:active .batman {
  transform: scale(0.75);
  transition: 1s ease 0.25s;
}
*/

.batman * {
  position: absolute;
}

.head {
  background: #000;
  width: 4.5vmin;
  height: 5vmin;
  top: 2%;
  transform: rotate(-55deg);
  border-radius: 63% 39% 63% 10%;
  transform-origin: center bottom;
  left: 13%;
  transition: 1s ease 0.25s;
}

body:active .batman .head {
  transform: rotate(-15deg);
  transition: 1s ease 0.25s;
}

.head:before {
  content: "";
  background: #000;
  width: 2vmin;
  height: 2vmin;
  position: absolute;
  left: 41%;
  top: 67%;
  transform: rotate(22deg);
}

.head:after {
  content: "";
  background: #000;
  width: 2vmin;
  height: 2vmin;
  position: absolute;
  left: 65%;
  top: 6%;
  transform: rotate(17deg);
  border-radius: 10% 50% 0 0;
}

.ears {
  width: 2vmin;
  height: 2vmin;
  top: -17%;
  left: 71%;
}

.ears span {
  border: 1vmin solid transparent;
  border-right-color: #000;
  left: -20%;
  top: 6%;
}

.ears span + span {
  left: -38%;
  border-width: 0.75vmin;
  transform: rotate(-9deg);
}

.nose {
  border: 1.25vmin solid transparent;
  border-bottom-color: #000;
  transform: rotate(3deg);
  left: -5px;
  border-radius: 0.25vmin;
}

.mouth {
  background: #000;
  width: 1vmin;
  height: 0.5vmin;
  border-radius: 100%;
  left: -2%;
  top: 55%;
}

.body {
  width: 8vmin;
  height: 14vmin;
  left: 11%;
  top: 13%;
}

.body span:nth-child(1):before {
  content: "";
  width: 2.5vmin;
  height: 3vmin;
  background: #000;
  position: absolute;
  border-radius: 100%;
  transform: rotate(-20deg);
  left: 11%;
  top: -3%;
}

.body span {
  width: 5vmin;
  height: 7vmin;
  background: #000;
  border-radius: 100%;
  left: 12%;
  top: 4%;
  transform: rotate(32deg);
}

.body span + span {
  height: 8vmin;
  border-radius: 46%;
  left: 8%;
  top: 25%;
  transform: rotate(-5deg);
}

.body span + span + span {
  height: 3vmin;
  left: 10%;
  top: 67%;
}

.leg {
  width: 12vmin;
  height: 17vmin;
  top: 49%;
  left: 6%;
}

.leg span {
  background: #000;
  width: 3.5vmin;
  height: 7vmin;
  top: 1%;
  left: 22%;
  transform: rotate(8deg);
  border-radius: 20%;
}

.leg span + span {
  height: 2.75vmin;
  top: 32%;
  left: 18%;
  border-radius: 100%;
  transform: rotate(-28deg);
}

.leg span + span + span {
  width: 2.75vmin;
  height: 5vmin;
  top: 43%;
  left: 20%;
  border-radius: 5% 5% 35% 30%;
  transform: rotate(1deg);
  background: #000;
}

.leg span + span + span + span {
  width: 2.25vmin;
  height: 6vmin;
  top: 65%;
  left: 17%;
  border-radius: 0 0 40% 0;
  transform: rotate(10deg);
}

.leg + .leg {
  left: 9%;
  transform: rotate(-8deg);
  transform-origin: center top;
}

.leg + .leg span:nth-child(4) {
  transform: rotate(-14deg);
  left: 29%;
}

.foot {
  background: #000;
  width: 4.5vmin;
  height: 2vmin;
  border-radius: 100% 30% 10% 10%;
  top: 97%;
  left: 5%;
}

.foot + .foot {
  left: 18%;
  transform: rotate(-8deg);
}

.cape {
  width: 34.5vmin;
  height: 25vmin;
  top: 14%;
  left: 20%;
  overflow: hidden;
  transform: rotate(-2deg);
  transform-origin: left top;
  animation: up-down 5s ease-in-out 0s infinite alternate;
}

@keyframes up-down {
  30% {
    transform: rotate(2deg);
  }
  65% {
    transform: rotate(17deg);
  }
}

.cape-shape {
  background: #000;
  width: 36vmin;
  height: 26.5vmin;
  top: -0.75vmin;
  left: -0.5vmin;
  clip-path: polygon(
    0% 2%,
    2% 2%,
    4% 4%,
    7% 8%,
    11% 12%,
    19% 18%,
    25% 21%,
    35% 25%,
    45% 27%,
    54% 30%,
    59% 28%,
    65% 27%,
    68% 26%,
    72% 28%,
    75% 29%,
    79% 34%,
    82% 37%,
    87% 39%,
    91% 43%,
    95% 47%,
    97% 50%,
    88% 46%,
    83% 45%,
    79% 46%,
    77% 48%,
    76% 50%,
    76% 52%,
    77% 52%,
    79% 54%,
    82% 56%,
    85% 59%,
    79% 58%,
    75% 58%,
    72% 59%,
    71% 60%,
    71% 61%,
    70% 63%,
    71% 67%,
    72% 70%,
    74% 76%,
    76% 81%,
    79% 86%,
    81% 88%,
    84% 91%,
    87% 95%,
    79% 92%,
    69% 89%,
    63% 84%,
    58% 81%,
    55% 78%,
    54% 78%,
    54% 79%,
    55% 81%,
    61% 96%,
    57% 94%,
    52% 89%,
    48% 86%,
    45% 85%,
    43% 84%,
    42% 85%,
    40% 86%,
    38% 85%,
    36% 83%,
    33% 80%,
    31% 78%,
    29% 78%,
    27% 78%,
    26% 79%,
    26% 82%,
    26% 85%,
    28% 88%,
    30% 94%,
    26% 91%,
    24% 88%,
    22% 87%,
    21% 88%,
    21% 90%,
    21% 95%,
    21% 97%,
    22% 98%,
    18% 97%,
    16% 94%,
    13% 84%,
    10% 72%,
    6% 66%,
    3% 63%,
    0% 58%
  );
  transform: rotate(0deg);
  transition: 2s ease 0s;
  animation: wind 5s ease 0s infinite, rota 0.43s ease 0s infinite alternate;
}

@keyframes rota {
  50% {
    transform: rotate(0.75deg);
  }
}

@keyframes wind {
  50% {
    clip-path: polygon(
      0% 1%,
      1% 1%,
      3% 3%,
      7% 5%,
      11% 8%,
      19% 9%,
      25% 11%,
      35% 11%,
      45% 10%,
      54% 9%,
      59% 8%,
      65% 10%,
      68% 14%,
      72% 18%,
      75% 22%,
      79% 28%,
      82% 34%,
      87% 39%,
      91% 43%,
      92% 47%,
      95% 50%,
      88% 46%,
      83% 45%,
      79% 46%,
      77% 48%,
      76% 50%,
      76% 52%,
      77% 52%,
      79% 54%,
      82% 55%,
      85% 57%,
      79% 58%,
      75% 59%,
      72% 62%,
      71% 63%,
      71% 65%,
      70% 66%,
      71% 67%,
      72% 70%,
      74% 76%,
      76% 81%,
      79% 86%,
      81% 87%,
      84% 92%,
      85% 100%,
      79% 95%,
      69% 89%,
      63% 84%,
      58% 81%,
      45% 58%,
      54% 78%,
      54% 79%,
      55% 81%,
      61% 96%,
      52% 88%,
      52% 89%,
      48% 86%,
      45% 85%,
      43% 84%,
      42% 89%,
      40% 86%,
      38% 85%,
      36% 83%,
      33% 80%,
      33% 81%,
      29% 78%,
      27% 78%,
      22% 72%,
      26% 82%,
      26% 85%,
      28% 88%,
      30% 94%,
      26% 91%,
      24% 88%,
      22% 87%,
      21% 88%,
      21% 90%,
      21% 95%,
      21% 98%,
      22% 100%,
      19% 95%,
      17% 91%,
      13% 84%,
      8% 75%,
      6% 66%,
      3% 63%,
      0% 58%
    );
  }
}

.watchtower {
  width: 44vmin;
  height: 25%;
  background: #000;
  bottom: -9vmin;
  transform: rotate(0deg);
  right: -6vmin;
}

.watchtower:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: -8vmin;
  top: 0vmin;
  border: 4vmin solid #fff0;
  border-color: #000 #000 #fff0 #fff0;
}

.watchtower:after {
  content: "";
  position: absolute;
  width: 30%;
  height: 200%;
  background: #000;
  top: -2vmin;
  border-radius: 5% 0 0 150%;
  right: 0;
}

.watchtower span {
  background: black;
  width: 3vmin;
  height: 1vmin;
  top: 31%;
  left: -6vmin;
  box-shadow: 3vmin 3vmin 0 0vmin;
}

.watchtower span + span {
  background: black;
  left: 13vmin;
  position: absolute;
  top: 14vmin;
  box-shadow: none;
  width: 100%;
  transform: rotate(34deg);
  height: 2vmin;
}

.watchtower span + span:before {
  content: "";
  background: black;
  width: 2vmin;
  height: 3vmin;
  position: absolute;
  right: 20vmin;
  top: -3vmin;
}