/*  <div class="augeL"> <div class="pupilleL"></div> </div>  */

:root{
  --dunkel:   #009aa5;
  --hell:     #12edff;
}


@font-face {
    font-family: 'RobotCrush';   
    src: url('RobotCrush.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



html, body {
  background-color: #000;
  color: var(--hell);
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'RobotCrush', sans-serif;
  font-size: calc(30vw + 3vh);
  text-align: center;
  -webkit-text-stroke-color: var(--dunkel);
  -webkit-text-stroke-width:1.1vw;
	word-wrap: break-word;
	overflow: hidden;
	line-height: 1;
	letter-spacing: 0;
}

#uhrid {
  z-index: 2; 
  display: flex;
  position: fixed;   
  word-wrap: break-word;
  line-height: 1;
  letter-spacing: 0;
  top: 45%;
  left: 50%;
  font-size: calc(31.7vw + 3vh);
  transform: translate(-50%, -45%);
  justify-content: center; 
  align-items: center;
  max-width: 100%;
  opacity: 100%;
}

#hours, #minut, #dopelpunkt {position: relative; padding:0; margin:0; }




.augen{
  z-index: 1; 
  padding: 0;
  margin: 0;
  display: flex;
  position: fixed; 
  width: calc(9vh + 45vw);
  top: 48%;
  left: 50%;
  transform: translate(-50%, -48%);
  justify-content: center;   /* horizontal zentrieren */
  align-items: center;       /* vertikal zentrieren */
  opacity: 100%;
}


.augeL{
  background-color: var(--dunkel);
  width: calc(3vh + 20vw);
  height: calc(3vh + 21vw);
  max-height: 3000px;
  border-radius: calc(2vh + 3vw);
  display: inline-block;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: calc(6.5vw + 2vh);
}

.pupilleL{
  background-color: var(--hell);
  width: 90%;
  height: 90%;
  border-radius: calc(2vh + 3vw);
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 49%;
  box-shadow: 0px 0px 7px 3px #12edff;
}



.augeR{
  background-color: var(--dunkel);
  width: calc(3vh + 20vw);
  height: calc(3vh + 21vw);
  max-height: 3000px;
  border-radius: calc(2vh + 3vw);
  display: inline-block;
  padding: 0;
  margin: 0;
}

.pupilleR{
  background-color: var(--hell);
  width: 90%;
  height: 90%;
  border-radius: calc(2vh + 3vw);
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 5%;
  box-shadow: 0px 0px 7px 3px #12edff;
}