body{
  background-image: url('./splash.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Global overrides */
:root {
  /* Increase the logo width */
  --logo-width: 540px;
  /* Nudge logo to the right */
  --logo-left: 80px;
}

/* Logo positioning */
.site-logo {
  position: fixed;
  /* Adjust these to place the logo */
  top: var(--logo-top, 20px);
  left: var(--logo-left, 20px);
  width: var(--logo-width, 180px);
  height: auto;
  z-index: 10;
}

/* SVG FIRE */


.mo-fire {
  height: auto;
  position: fixed;
  left: 96px;
  right: 0;
  width: auto;
  bottom: -50px;
  z-index: 4;
}

#svg-view {
	width: 252px;
	height: 125px;
	left: 0px;
}

.mo-fire svg {
  width: 100%;
  height: 30vh;
  position: relative;
  right: 0;
  display: block;
  overflow: visible;
}
.flame {
  animation-name: flameDisappear;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.7;
  transform-origin: 45% 45% 0;
}
.flame.one {
  animation-delay: 0.3s;
  animation-duration: 5s;
}
.flame.two{
  animation-duration: 6s;
  animation-delay: 0.6s;
}


.flame-main {
  animation-name: flameMovement;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.flame-main.one {
  animation-duration: 1.1s;
  animation-delay: 0.5s;
}
.flame-main.two {
  animation-duration: 1s;
  animation-delay: 0.5s;
}
.flame-main.three {
  animation-duration: 1.05s;
  animation-delay: 1.5s;
}
.flame-main.four {
  animation-duration: 1.6s;
  animation-delay: 2s;
}
.flame-main.five {
  animation-duration: 1.25s;
  animation-delay: 2.5s;
}
@keyframes flameMovement {
  50% {
    transform: scale(0.98,1.0) translate(0, 2px) rotate(-1deg);
  }
}
@keyframes flameDisappear {
  0%{
    transform: translate(0) rotate(180deg);
  }
  50% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translate(-10px, -200vh) rotate(180deg);
    opacity: 0;
  }
}