body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  margin: 0
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

@font-face {
  font-family: Tim Kid;
  src: url(../media/TimKid.8d31aefa05ec90584804.ttf)
}

body {
  font-family: Tim Kid !important;
  overflow: hidden
}

button.nobg:disabled {
  cursor: default !important;
  scale: 1 !important
}

.generator-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-top: 2vw
}

.header {
  margin-bottom: 30px
}

.leper-desc {
  color: #fff;
  font-size: 2vw
}

.leper-desc,
.leper-head {
  font-family: Tim Kid, sans-serif;
  font-weight: 400;
  margin: 0;
  text-align: center;
  text-shadow: 4px 0 #000, -4px 0 #000, 0 4px #000, 0 -4px #000, 3px 3px #000, -3px -3px #000, 3px -3px #000, -3px 3px #000;
  width: 100%
}

.leper-head {
  color: #ffad02;
  font-size: 4vw;
  line-height: 3.8vw;
  text-transform: uppercase
}

.main-cc {
  background-image: url(../media/colo-bg.b45f16f13341f80ec0dd.webp);
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  min-height: 100vh
}

.left-locker {
  align-items: center;
  bottom: 0;
  display: flex;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0
}

.left-locker img,
.right-locker img {
  width: 30vw
}

.right-locker {
  align-items: center;
  bottom: 0;
  display: flex;
  margin: auto;
  top: 0
}

.abs-ch,
.right-locker {
  position: absolute;
  right: 0
}

.abs-ch {
  bottom: -2vw;
  z-index: 9999
}

.abs-ch img {
  width: 25vw
}

.flex-btns {
  width: 20vw
}

.character-preview {
  background-color: #f4f4f4;
  border: 2px solid #000;
  border-radius: 10px !important
}

.character-background {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.background-image {
  height: 100%;
  object-fit: cover;
  width: 100%
}

.character-asset {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.base-image,
.body-image,
.eyes-image,
.head-image,
.mouth-image {
  max-height: 100%;
  max-width: 100%;
  position: absolute
}

.nobg img {
  width: 100%
}

.nobg {
  background-color: initial;
  border: none;
  cursor: pointer;
  outline: none
}

.flex-btns {
  align-items: center;
  display: flex;
  margin-top: 20px
}

.back-home img {
  width: 200px
}

.back-home {
  left: 20px;
  position: absolute;
  top: 20px;
  z-index: 9
}

.shake,
.shake:hover {
  transition: all .3s ease-in-out
}

.shake:hover {
  scale: 1.1 !important
}

.isloading.loaded {
  clip-path: circle(80% at 50%);
  pointer-events: auto
}

.loaded {
  align-items: center;
  background: #277f3d;
  clip-path: circle(0 at 50%);
  display: flex;
  justify-content: center;
  position: absolute;
  -webkit-transition: -webkit-clip-path .6s ease-in-out;
  transition: clip-path .6s ease-in-out;
  z-index: 9
}

@keyframes expandCircle {
  0% {
    clip-path: circle(10% at 50%)
  }

  50% {
    clip-path: circle(50% at 50%)
  }

  to {
    clip-path: circle(80% at 50%)
  }
}

@media (max-width:1000px) {

  .left-locker img,
  .right-locker img {
    width: 300px
  }

  .leper-head {
    font-size: 50px;
    line-height: normal
  }

  .leper-desc {
    font-size: 30px;
    line-height: normal
  }

  .flex-btns {
    position: relative;
    width: 300px;
    z-index: 99
  }
}

@media (max-width:800px) {
  .abs-ch {
    display: none
  }

  .back-home img {
    width: 150px
  }

  .left-locker,
  .right-locker {
    display: none
  }

  .generator-container {
    align-items: center;
    justify-content: center
  }
}

@media (max-width:400px) {
  .back-home img {
    width: 100px
  }

  .leper-head {
    font-size: 43px
  }

  .leper-desc {
    font-size: 23px
  }

  .flex-btns {
    width: 90%
  }
}

@media (min-width:2200px) {

  .left-locker img,
  .right-locker img {
    width: 37vw
  }
}

/*# sourceMappingURL=main.08c34a63.css.map*/