body {	background-color:  #3498db ;
		background: canvas(#943126 );
	}

#text_kalt1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200%;
  color: #3498db;
}

#text_warm1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200%;
  color:  black ;
}

#text_heiss1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200%;
  color:  black ;
}

#text_kalt2 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120%;
  color: #3498db;
}

#text_warm2 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120%;
  color:  black ;
}

#text_heiss2 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120%;
  color:  #943126 ;
}

#kreis_kalt1 {
    background-color: #d6eaf8;
    position: absolute;
    width: 250px;
    height: 250px;
    top: 100px;
    left: 15%;
    border: 0px solid black;
    text-align: center;
    border-radius: 150px;
}

#kreis_warm1 {
	background-color:  #f5cba7;
    position: absolute;
    width: 250px;
	vertical-align: middle;
    height: 250px;
    top: 100px;
    left: 15%;
    border: 0px solid black;
    text-align: middle;
    border-radius: 150px;
}

#kreis_heiss1 {
    background-color:  #fa797f ;
    position: absolute;
    width: 250px;
    height: 250px;
    top: 100px;
    left: 15%;
    border: 0px solid black;
    text-align: center;
    border-radius: 150px;
}

#kreis_kalt2 {
    background-color: #d6eaf8;
    position: absolute;
    width: 250px;
    height: 250px;
    top: 100px;
    right: 15%;
    border: 0px solid black;
    text-align: center;
    border-radius: 1125px;
}

#kreis_warm2 {
    background-color:  #f5cba7;
	color: white;
    position: absolute;
    width: 250px;
	vertical-align: middle;
    height: 250px;
    top: 100px;
    right: 15%;
    border: 0px solid black;
    text-align: middle;
    border-radius: 150px;
}

#kreis_heiss2 {
    background-color:   #fa797f ;
    position: absolute;
    width: 250px;
    height: 250px;
    top: 100px;
    right: 15%;
    border: 0px solid black;
    text-align: center;
    border-radius: 150px;
}

#untertitel {
  top: 95%;
  left: 40%;
  position: absolute;
  text-align: center;
  font-size: 100%;
  color: black;
}

#diagram_left {
  top: 80%;
  left: 10%;
  position: absolute;
  #text-align: right;
  #font-size: 130%;
  #color: black;
}

#update {
  top: 80%;
  right: 2%;
  position: absolute;
  text-align: right;
  font-size: 100%;
  color: black;
}