.react-app {
  background-image: url('../images/fon2.png');
  height: 640px;
  width: 900px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  padding-left: 30px;
  padding-right: 30px;
}

.react-app-1280-720 {
  background-image: url('../../fon1280.png');
  height: 720px;
  width: 1200px;
  box-sizing: border-box;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  padding-left: 30px;
  padding-right: 30px;

  position: relative;
}

.react-app-responsive {
  width: 99vw;
  height: 49.5vw;
  min-width: 900px;
  min-height: 450px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  position: relative;
  background-image: url('../images/fon2.png');
  background-repeat: no-repeat;
  background-size: cover;
}

h1 {
  margin: 0.5em;
  margin-top: 0;
  text-align: center;
  color: #CF6BAE;
}

h2 {
  margin: 0.5em;
  font: 20px "Century Gothic" ;
  margin-top: 0;
  text-align: center;
  color: #CC0000;
}

input:not([type='radio']):not([type='checkbox']) {
  width: 70px;
}

.steam-body {
  position: absolute;
}

#fire-red {
  position: absolute;
  top: 170px;
  left: 5px;
  width: 80px;
  z-index: 2;
  opacity: 50%;
}

.fire {
  position: absolute;
  left: 0px;
  width: 100px;
  visibility: hidden;
  z-index: 3;
}

.fire1 {
  top: 0px;
  animation: firing 0.5s ease infinite;
}

.fire2 {
  top: 50px;
  animation: firing 0.5s ease 0.0625s infinite;
}

.fire3 {
  top: 10px;
  animation: firing 0.5s ease 0.125s infinite;
}

.fire4 {
  top: 40px;
  animation: firing 0.5s ease 0.1875s infinite;
}

.fire5 {
  top: 20px;
  animation: firing 0.5s ease 0.25s infinite;
}

.fire6 {
  top: 20px;
  animation: firing 0.5s ease 0.3125s infinite;
}

.fire7 {
  top: 0px;
  animation: firing 0.5s ease 0.375s infinite;
}

.fire8 {
  top: 0px;
  animation: firing 0.5s ease 0.4375s infinite;
}

@keyframes firing {
  0% {visibility: visible}
  12.5% {visibility: hidden}
  100% {visibility: hidden}
}

#ch-down {
  position: absolute;
  top: 160px;
  left: -40px;
  width: 175px;
}

#ch-up {
  position: absolute;
  top: 175px;
  left: -40px;
  width: 175px;
  z-index: 4;
}

.fire-kub {
  position: absolute;
  top: 163px;
  left: -12px;
  width: 97px;
}

.drag-item:hover {
  cursor: pointer;
}

.time-button {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 0.5em; 
}

.time-button:hover {
  cursor: pointer;
}

.thermometer {
  position: absolute;
  height: 450px;
  width: 90.906px;
}

.thermometer-body {
  position: absolute;
  height: 450px;
}

.thermometer-redspirt {
  position: absolute;
  left: 25px;
  width: 10px;
  opacity: 45%;
}

.thermometer-temperature {
  position: absolute;
  top: 397px;
  left: 6px;
  color: #9F0A32;
  font-size: 20px;
  white-space: nowrap;
}

.thermometer100F, .thermometer1000 {
  position: absolute;
  height: 490px;
  width: 169.672px;
}

.thermometer100F-body, .thermometer1000-body {
  position: absolute;
  height: 490px;
}

.thermometer100F-redspirt, .thermometer1000-redspirt {
  position: absolute;
  left: 77px;
  width: 12px;
  opacity: 45%;
}

.thermometer100F-temperature, .thermometer1000-temperature {
  position: absolute;
  top: 434px;
  left: 44px;
  color: #9F0A32;
  font-size: 20px;
  white-space: nowrap;
}

.micrometer {
  position: relative;
}

.micrometer-body {
  position: absolute;
  width: 100%;
  height: 100%;
}

.micrometer-arrow {
  position: absolute;
  width: 70%;
  top: 53.9%;
  left: 21.8%;
}

.sosud3l, .sosud3l-body {
  position: absolute;
  width: 160px;
  height: 216.5px;
}

.sosud3l-body {
  z-index: 2;
}

.sosud3l-water,
.sosud3l-water-under-top,
.sosud3l-blik1,
.sosud3l-blik2,
.sosud3l-dno {
  position: absolute;
  width: 160px;
}

.sosud3l-water-under-top {
  height: 15px;
}

.sosud3l-dno {
  z-index: 3;
  top: 164px;
  opacity: 25%;
  height: 28px;
}

.sosud3l-water-top {
  position: absolute;
  opacity: 0.8;
}

.sosud5l, .sosud5l-body {
  position: absolute;
  width: 209px;
  height: 409.5px;
}

.sosud5l-body {
  z-index: 2;
}

.sosud5l-water,
.sosud5l-blik1,
.sosud5l-blik2,
.sosud5l-dno {
  position: absolute;
  width: 160px;
}

.sosud5l-dno {
  z-index: 3;
  top: 345px;
  opacity: 25%;
  height: 36px;
}

.scales {
  position: absolute;
  width: 209px;
  height: 100px;
}

.scales-body {
  position: absolute;
  width: 100%;
  height: 100%;
}

.scales-display {
  position: absolute;
  top: 63px;
  left: 90px;
  color: white;
  font-weight: 500;
  font-size: 18px;
  z-index: 2;
}