body {
    background-color:#1D1D1D;
    padding:0px;
    margin:0px;
    font-family:sans-serif;
  }

  
p {
   color:white;
   text-align:center;
   font-weight:300;
}

  
#dmin {
   color:white;
   text-align:center;
   color:white;
   font-size:110px;
   font-weight:700;
}

#dsec {
   color:white;
   text-align:center;
   color:white;
   font-size:55px;
   font-weight:100;
}

#untertitel {
   color:white;
   text-align:center;
   color:white;
   font-size:15px;
   font-weight:100;
}

h1 {
   color:white;
   text-align:center;
   font-size:32px;
   font-weight:100;  
  }   

h2 {
    color:#2A9AC9;
   text-align:center;
   font-size:28px;
   font-weight:100;  
  }   

h3 {
   color:white;
   font-size:24px;
   line-height:0.7;
  }   
  
.klein {
   color:white;
   text-align:center;
   font-size:16px;
   font-weight:light;  
   text-transform:uppercase;
  }    
  
.kleinblau {
   color:#2A9AC9;
   text-align:center;
   font-size:14px;
   text-transform:uppercase;
   font-weight:light;  
  }   
  
#leisteoben {
    width:100%;
    height:100px;
    position:0 0 fixed;
    padding-top:3px;
    line-height:0.9;
   color:white;
   text-align:center;
   background-color:#103D50;
}  
  
#sess, #break {
   font-size:20px;
   line-height:0.7;
    cursor:pointer;
    font-style:bold;
    color:#ffffff;
  }   
  
  .intro{
   
  text-align:center;
   
  }
      
      #break,#sess{
  display:inline-block;
  }
  #break{
    margin-left:50px;
  }
  .controls{
    
  margin-top:320px;
  
  }
  
  #butt{
  margin: 0 auto;
  width: 200px;
    
  }
  #cont{
   margin: 0 auto;
  
    width: 300px;
  }
  
  
  #bot{
    
    background-color:red;
    width:300px;
    height:300px;
    border-radius:50%;
    position:absolute;
  }  
  
   .display{
     border:1px solid grey;
     position:absolute;
     width:300px;
     height:300px;
     border-radius:50%;
     z-index:10;
}
      
  button {
    background-color:#103D50;
    border:1px solid white;
    height:40px;
    margin:2;
    width:100%;
    color:white;
    cursor:pointer;
    z-index:10;
  }
  
  button:hover {
    border:1px solid #2A9AC9;
    color: #2A9AC9;
    z-index:1;
  }
  
  #dis{
   margin-top:40%;
  }
  
  #mid{
    width:300px;
    height:300px;
    background-color:#1D1D1D;
    position:absolute;
    z-index:2;
  }
  
  .x{
    animation-name:loadbar;
    
    animation-timing-function: linear;
    animation-play-state:paused;
     
  }
  .y{
     animation-play-state:running;
  }
  
  .green{
     animation-name:loadbar;
      animation-duration: 300s;
    animation-timing-function: linear;
    animation-play-state:paused;
    
  }
  
  #sminutes {
      font-size: 32px;
      font-weight: 900;
  }
  
  #bminutes {
      font-size: 32px;
      font-weight: 900;
  }
  
  .ibutts{
    cursor:pointer;
    font-style:normal;
    font-size:18px;
    color:#2A9AC9;
    font-family:Monospace;
  }
  .ibutts:hover{
    color:#ffff00;
  }
  .controls:hover{
    color:#2A9AC9;
  }
  
  
  
  .z{
  animation-play-state :initial;
  
  
  }
  
  #pause{
    
  }
  
  @keyframes loadbar{
    from {height:300px;}
    to   {height:0px;}
  }