html {
	background-image: url("images/citybg.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

footer {
	background-color: black;
}

a:link {
	color: white;
	text-decoration: none;
}

a:visited {
  color: #8B0000;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: none;
}

a:active {
  color: white;
  text-decoration: none;
}

h1 {
	padding-left:42%;
	color: cyan;
	webkit-text-stroke: 1.5px #00FFFF;
    text-shadow: 1.5px #00FFFF;
    text-shadow:
		-2px -2px 0px rgba(0, 0, 0, 0.8),
		2px -2px 0px rgba(0, 0, 0, 0.8),
		-2px 2px 0px rgba(0, 0, 0, 0.8),
		2px 2px 0px rgba(0, 0, 0, 0.8),
		-3px 0px 0px rgba(0, 0, 0, 0.7),
		3px 0px 0px rgba(0, 0, 0, 0.7),
		0px -3px 0px rgba(0, 0, 0, 0.7),
		0px 3px 0px rgba(0, 0, 0, 0.7),
		0px 0px 15px rgba(0, 255, 250, 0.8),
		0px 0px 25px rgba(0, 255, 255, 0.5);

}

body {
  background: transparent;
}

#goji {
  cursor: grab;
}

.berry {
  background: transparent;
  margin-left: auto;
  margin-top: 25px;
  width: 100%;
  max-height: 300px;
  transition: all 0.25s ease-in-out;
}

.fire {
  --firelength: 220;
  fill: none;
  stroke: #fff;
  opacity: 0;
  display: none;
  position: absolute;
  top: 0;
  stroke-dasharray: var(--firelength);
  stroke-dashoffset: 0;
}
.fire.atomic {
  display: block;
  animation: fire 1.75s cubic-bezier(0, 1.01, 1, 1) 1;
}

.blink #eyelid1 {
  transform: translate(0, 14px);
}
.blink #eyelid2 {
  transform: translate(0, 10px);
}

#throat,
#throat2,
.one,
.two,
.three {
  transition: all 1.5s ease-in-out;
  transform-origin: top left;
}

#breath_1 {
  transition: all 2s ease-in-out;
  transform-origin: center;
}

.breath #throat {
  transform: rotate(-5deg) translate(-6px, 15px);
}
.breath #breath_1 {
  transform: scaleX(1.02) scaleY(1.05) translate(5px, -8px) rotate(6deg);
}
.breath #throat2 {
  transform: rotate(-8deg) translate(-17px, 13px);
}
.breath .one {
  transform: skew(3deg, 2deg) translate(-3px, -3px);
}
.breath .two {
  transform: translate(1.25px, 0px);
}
.breath .three {
  transform: translate(1.75px, 1.75px);
}

#nose {
  transform-origin: center;
}

.angerery #nose {
  transform: translate(-14px, 9px) scale(1.15);
}
.angerery #jaw {
  transition: all 0.15s;
  animation: grind 0.3s infinite alternate;
}
.angerery #brows {
  transform: translate(0px, 2px);
}

#snort path {
  --length: 50;
  opacity: 0;
}
#snort.snort path {
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.8) translate(-6px, 10px);
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
  animation: snort 1s linear 1;
}

#head {
  transform-origin: center;
}
#head #jaw {
  transform-origin: center;
}
#head.tilt {
  transform: rotate(-25deg) translate(18px, 26px);
}
#head.tilt #jaw {
  transform: rotate(15deg) translate(-14px, -14px) scaleX(0.98);
}

.active .spine {
  animation: active 2s linear 1;
}

@keyframes active {
  0% {
    fill: #d4d4d4;
  }
  50% {
    fill: #0ff;
  }
  1000% {
    fill: #d4d4d4;
  }
}
@keyframes snort {
  0% {
    stroke-dashoffset: var(--length);
    opacity: 0;
    transform: scale(0.8) translate(-6px, 10px);
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
  100% {
    stroke-dashoffset: var(--length);
    opacity: 0;
    transform: scale(1) translate(12px, 25px);
  }
}
@keyframes idling {
  0% {
    filter: url("#idling");
  }
  25% {
    filter: url("#idling2");
  }
  50% {
    filter: url("#idling3");
  }
  75% {
    filter: url("#idling4");
  }
  100% {
    filter: url("#idling5");
  }
}
@keyframes grind {
  0% {
    transform: translate(-0.5px, 0px);
  }
  100% {
    transform: translate(0.5px, 0px);
  }
}
@keyframes fire {
  0% {
    stroke-dashoffset: var(--firelength);
    opacity: 0;
    transform: scale(0.8) translate(-50px, 20px);
    stroke-width: 16;
    stroke: #fff;
  }
  25% {
    stroke: #fff;
  }
  50% {
    opacity: 1;
  }
  75% {
    stroke: #0ff;
  }
  100% {
    stroke-width: 1;
    stroke-dashoffset: 0;
    opacity: 0;
    transform: scale(1) translate(0, -20px);
  }
}
svg {
  background: transparent;
}

.a {
  fill: #a3a3a3;
}

.b {
  fill: #0c0c0c;
}

.c {
  fill: #353535;
}

.d {
  fill: #fff;
}

.e {
  fill: #0c0c0c;
}

.f {
  fill: #222;
}

.g {
  fill: #d4d4d4;
}

.h {
  fill: none;
  stroke: #fff;
}