@charset "utf-8";
/* CSS Document */

/* variables to set behavior */

div.imposcales {
	/* SETTING TO 1 TO AVOID DIVIDE BY ZERO - FAKE #'s AT FIRST */
	--save: 193;
	--kill: 219;
	
	--saveper: calc(var(--save) / (var(--save) + var(--kill)));
	--killper: calc(var(--kill) / (var(--save) + var(--kill)));
	
	--maxdeg: 25;
	--rotation: calc((((var(--save) - var(--kill)) / (var(--save) + var(--kill)))*var(--maxdeg)*1deg));
	
	--boxmax: 80px;
	--boxmin: 30px;
	
	--savebox: calc(var(--saveper)*100);
	--killbox: calc(var(--killper)*100);
		
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
	display: block;
	text-align: center;
	margin: 0 auto;
}

div.impocontainer {
	margin-top: 150px;
	margin-bottom: 50px;
}

/* ~25deg max rotation default */

/* ((SAVE - KILL) / (SAVE + KILL)) * MAXDEG = degree rotation  */

#scale-top {
  height: 40px;
  width: 400px;
  background: none;
  background-image: url("../image/imposfate.png");
  position: absolute;
  left: -200px;
  bottom: 75px;
  transform: rotate(0deg);
  z-index: 1;
    animation: scale-top 5s infinite alternate-reverse;
}
@keyframes scale-top{
  from {transform: rotate(calc(var(--rotation) - 3deg));}
  to{transform: rotate(calc(var(--rotation) + 3deg));}
}

#triangle {
  position: absolute;
  bottom: -80px;
  left: -90px;
  z-index: -1;
  /* filter: hue-rotate(160deg) saturate(3); */
}

#impobase {
}

.box {
  position: absolute;
  bottom: 40px;
  border-radius: 8px;
	border: 1px solid black;
	box-shadow: rgba(50, 50, 93, 0.8) 0px 50px 100px -20px, rgba(0, 0, 0, 0.8) 0px 30px 60px -30px, rgba(10, 37, 64, 0.9) 0px -2px 6px 2px inset;
}

/* SAVE */
#right-box {
  background: blue;
	background-image: url("../image/ripple.gif");
	background-position: center;
  height: clamp(var(--boxmin), var(--savebox)*1px, var(--boxmax));
  width: clamp(var(--boxmin), var(--savebox)*1px, var(--boxmax));
  left: 340px;
  font-size: 26px;
  font-weight: 700;
  line-height: clamp(var(--boxmin), var(--savebox)*1px, var(--boxmax));
  text-align: center;
  color: #fff;
}

#right-box:after {
	counter-reset: save var(--save);
	content: counter(save);
	display: inline-block;
}

/* KILL */
#left-box {
  background: red;
  background-image: url("../image/fire.gif");
  background-position: center;
  height: clamp(var(--boxmin), var(--killbox)*1px, var(--boxmax));;
  width: clamp(var(--boxmin), var(--killbox)*1px, var(--boxmax));;
  left: 20px;
  font-size: 26px;
  font-weight: 700;
  line-height: clamp(var(--boxmin), var(--killbox)*1px, var(--boxmax));;
  text-align: center;
  color: #fff;
}

#left-box:after {
	counter-reset: kill var(--kill);
	content: counter(kill);
	display: inline-block;
}