.bg {
  width: 1484px;
  height: 1119px;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f00;
  opacity: 0.3;
  z-index: 100;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.spacer {
  height: 20px;
  flex-shrink: 0;
}

.spacersm {
  height: 10px;
  flex-shrink: 0;
}

.hspacer {
  width: 40px;
}

.hspacersm {
  width: 10px;
}

.hspacerxsm {
  width: 5px;
}

.header {
  font-size: 36px;
  margin: auto;
}

.flexv {
  display: flex;
  flex-direction: column;
}

.thing {
  height: 100%;
  /*overflow-y: scroll;*/
}

.flexh {
  display: flex;
  flex-direction: row;
}

.flex1 {
  flex: 1;
}

.flex2 {
  flex: 2;
}

.mauto {
  margin: auto;
}

.canvas-inside {
  width: 1280px;
  height: 720px;
  background-color: #271326;
  overflow: hidden;
}

.canvas-inside-v {
  display: flex;
  flex-direction: column;
}

.canvas-inside-vr {
  display: flex;
  flex-direction: column-reverse;
}

.canvas-inside-h, .canvas-inside-h2 {
  display: flex;
  flex-direction: row;
}

.canvas-inside-hr, .canvas-inside-h2r {
  display: flex;
  flex-direction: row-reverse;
}

.canvas-outside {
  /*outline: 2px dotted blue;*/
  margin: auto;
}

.blue-outline {
  outline: 10px solid blue;
}

.monster-image {
  height: 330px;
  --stroke-pos: 4px;
  --stroke-neg: -4px;
  --stroke-opacity: 100%;
  --blur: 1px;
  /*--stroke-color: #33CC66;*/
  /* filter: drop-shadow(var(--stroke-pos) 0 var(--blur) var(--stroke-color)) 
    drop-shadow(var(--stroke-neg) var(--blur) var(--stroke-color))
    drop-shadow(0 var(--stroke-pos) var(--blur) var(--stroke-color))
    drop-shadow(0 var(--stroke-neg) var(--blur) var(--stroke-color))
    drop-shadow(var(--stroke-pos) var(--stroke-pos) var(--blur) var(--stroke-color)) 
    drop-shadow(var(--stroke-pos) var(--stroke-neg) var(--blur) var(--stroke-color))
    drop-shadow(var(--stroke-neg) var(--stroke-pos) var(--blur) var(--stroke-color))
    drop-shadow(var(--stroke-neg) var(--stroke-neg) var(--blur) var(--stroke-color)); */
  filter: drop-shadow(var(--stroke-pos) 0 var(--blur) var(--stroke-color)) 
    drop-shadow(var(--stroke-neg) var(--blur) var(--stroke-color))
    drop-shadow(0 var(--stroke-pos) var(--blur) var(--stroke-color))
    drop-shadow(0 var(--stroke-neg) var(--blur) var(--stroke-color));
}

.monster-image-2-v, .monster-image-2-vr {
  padding: 0 30px;
}

.monster-image-3-v, .monster-image-3-vr {
  padding: 0 30px;
  height: 270px;
}

.monster-image-4-v, .monster-image-4-vr {
  padding: 0 20px;
  width: 250px;
  height: unset;
}

.monster-image-5-v, .monster-image-5-vr {
  padding: 0 15px;
  width: 210px;
  height: unset;
}

.monster-image-2-h, .monster-image-2-hr, .monster-image-2-h2, .monster-image-2-h2r {
  height: 270px;
  padding: 20px;
}

.monster-image-3-h, .monster-image-3-hr, .monster-image-3-h2, .monster-image-3-h2r {
  width: 210px;
  height: initial;
  padding: 15px;
}

.monster-image-4-h, .monster-image-4-hr, .monster-image-4-h2, .monster-image-4-h2r {
  width: 210px;
  height: initial;
  padding: 15px;
}

.monster-image-5-h, .monster-image-5-hr, .monster-image-5-h2, .monster-image-5-h2r {
  width: 190px;
  height: initial;
  padding: 15px;
}

.monster-image-container-2-h, .monster-image-container-2-hr, .monster-image-container-2-h2, .monster-image-container-2-h2r {
  flex: 0;
}

.monster-image-container-3-h, .monster-image-container-3-hr, .monster-image-container-3-h2, .monster-image-container-3-h2r {
  width: 500px;
  text-align: center;
}

.monster-image-container-4-h, .monster-image-container-4-hr, .monster-image-container-4-h2, .monster-image-container-4-h2r {
  width: 500px;
  text-align: center;
}

.monster-image-container-5-h, .monster-image-container-5-hr, .monster-image-container-5-h2, .monster-image-container-5-h2r {
  width: 450px;
  text-align: center;
}

.monster-image-container {
  margin: auto;
}

.info-container {
  margin: auto;
}

.info-container-v, .info-container-vr {
  display: flex;
  flex-direction: row;
}

.info-container-h, .info-container-hr, .info-container-h2, .info-container-h2r {
  display: flex;
  flex-direction: column;
}

.text-container-h2, .text-container-h2r {
  flex-direction: column;
}

.timetext {
  font-family: 'Heebo', sans-serif;
  font-size: 140.1px;
  color: white;
  -webkit-background-clip: text;
  background-clip: text;
}

.tatext {
  font-family: 'Heebo', sans-serif;
  font-size: 140px;
  color: white;
  -webkit-background-clip: text;
  background-clip: text;
}

.weapon-image {
  height: 189px;
}

.weapon-image-v, .weapon-image-vr {
  padding-right: 40px;
}

.weapon-image-v.weapon-image-3, .weapon-image-vr.weapon-image-3 {
  width: 90px;
}

.weapon-image-v.weapon-image-4, .weapon-image-vr.weapon-image-4 {
  width: 70px;
}

.weapon-image-v.weapon-image-3:nth-last-child(2),
.weapon-image-vr.weapon-image-3:nth-last-child(2),
.weapon-image-v.weapon-image-4:nth-last-child(2),
.weapon-image-vr.weapon-image-4:nth-last-child(2) {
  width: unset;
}

.weapon-image-h, .weapon-image-hr, .weapon-image-h2, .weapon-image-h2r {
  padding-bottom: 40px;
  padding-right: 40px;
  max-width: 140px;
}

.weapon-image-h:nth-last-child(2), .weapon-image-hr:nth-last-child(2), .weapon-image-h2:nth-last-child(2), .weapon-image-h2r:nth-last-child(2) {
  padding-right: 0;
}

.weapon-element-image {
  margin-left: -50px;
  width: 80px;
}

.clawtext {
  height: 0;
  font-size: 59px;
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  color: white;
  -webkit-background-clip: text;
  background-clip: text;
}

.clawtext-v, .clawtext-vr {

}

.clawtext-h, .clawtext-hr {

}

.canvas-spacer {
  flex: 2;
}

.canvas-spacer-h2, .canvas-spacer-h, .canvas-spacer-hr, .canvas-spacer-h2r {
  flex: 1;
}

.category-holder {
  align-items: center;
}

.category-holder-v, .category-holder-vr {
  padding-left: 40px;
}

.category-holder-h, .category-holder-hr {
  padding-left: 40px;
}

.category-holder-h2, .category-holder-h2r {

}

.select {

}

input {
  width: 75px;
}

input[type=file] {
  width: unset;
}

.config-row {
  margin-bottom: 3px;
}

.smallertext {
  font-size: 12px;
}

.heebo-light {
  font-family: 'Heebo', sans-serif;
  font-weight: 300;
}

.heebo {
  font-family: 'Heebo', sans-serif;
}

.heebo-bold {
  font-family: 'Heebo', sans-serif;
  font-weight: 500;
}

.heebo-cto {
  position: relative;
  bottom: 68px;
}

.oswald-light {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: 160px;
}

.oswald {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 160px;
}

.oswald-bold {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 160px;
}

.oswald-bold.clawtext, .oswald.clawtext, .oswald-light.clawtext {
  font-size: 65px;
}

.oswald-cto {
  position: relative;
  bottom: 43px;
}

.raleway-light {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
}

.raleway {
  font-family: 'Raleway', sans-serif;
}

.raleway-bold {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

.raleway-cto {
  position: relative;
  bottom: 36px;
}

.asap {
  font-family: 'Asap', sans-serif;
}

.asap-bold {
  font-family: 'Asap', sans-serif;
  font-weight: 500;
}

.asap-cto {
  position: relative;
  bottom: 33px;
}

.chenla {
  font-family: 'Chenla', sans-serif;
}

.sansita-light {
  font-family: 'Sansita Swashed', sans-serif;
  font-weight: 300;
  padding-bottom: 40px;
}

.sansita {
  font-family: 'Sansita Swashed', sans-serif;
  padding-bottom: 40px;
}

.sansita-bold {
  font-family: 'Sansita Swashed', sans-serif;
  font-weight: 700;
  padding-bottom: 40px;
}

.selima {
  font-family: 'Selima', sans-serif;
  font-size: 200px;
  padding-bottom: 0;
}

.selima-cto {
  position: relative;
  bottom: 55px;
  font-size: 70px;
  right: 20px;
}

.new {
  color: #7E7;
  font-size: 12px;
  -webkit-animation: newcolorani 1s ease 0s;
  -webkit-animation-iteration-count:infinite;
  animation: newcolorani 1s ease 0s;
  animation-iteration-count:infinite;
}

@-webkit-keyframes newcolorani {0%{color:#7E7;} 50%{color:#33D333;} 100%{color:#7e7;}}

.no-space {
  width: 0;
  height: 0;
}

#uploadPreview {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#uploadPreview img {
  min-width: 100%;
  min-height: 100%;
}

.text-shadow {
  filter: drop-shadow(0 0 4px black) drop-shadow(0 0 12px black);
}

.invisible {
  opacity: 0;
}

.category-img {
  height: 250px;
}

@font-face {
  font-family: Selima;
  font-style: normal;
  font-weight: normal;
  src: url('selima_.otf') format('opentype');
}