body  {
  background-color: #888888;
  font-family: Arial, "Open Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

.picture {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.counter {
  text-align: center;
  padding-top: 8vh;
  font-size: 16vh;
  color: #EEEEEECC;
}

.time {
  text-align: center;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: #AAAAAACC;
  font-size: 5vh
}

.pause_corner {
  text-align: center;
  position: absolute;
  top: 70%;
  left: 5%;
  font-size: 10vh;
  color: #44444488;
  width: 1em;
}

.fullscreen {
  text-align: center;
  position: absolute;
  top: 1%;
  left: 1%;
}

.fullscreenPicture {
  width: 1em;
}

.warning {
  color: #ff8c0088;
}

.alert {
  color: #99000088;
}

.button {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0%;
  text-align: center;
  padding: 80% 0% 0% 0%;
  font-size: 5vw;
  color: #444444CC;
}

.pause {
  background-image: url("resources/braun93681A.png");
  background-color: #93681A;
}
    
.ready {
  background-image: url("resources/schwarz666666.png");
  background-color: #666666;
}
    
.short {
  background-image: url("resources/violettE8DBF8.png");
  background-color: #E8DBF8;
}

.long {
  background-image: url("resources/gruenDAF6CE.png");
  background-color: #DAF6CE;
}

.veryshort {
  background-image: url("resources/rosaF4C1D4.png");
  background-color: #F4C1D4;
}

.verylong {
  background-image: url("resources/gelbEFE6A3.png");
  background-color: #EFE6A3;
}

.medium {
  background-image: url("resources/blauB4DCF0.png");
  background-color: #B4DCF0;
}

.tile {
  background-color: #28739b;
  margin: 2%;
  padding: 0%;
  float: left;
  width: 29%;
  height: 50%;
}

a:link, a:visited {
  text-decoration: none;
  color: #992726;
}

/* Use a media query to add a break point at 600px: */
@media screen and (max-width:1000px) {
  .tile {
    width:46%; /* The width is 46%, when the viewport is 1000px or smaller */
  }
  .button {
    font-size: 7vw;
  }

@media screen and (max-width:500px) {
  .tile {
    width:96%; /* The width is 96%, when the viewport is 500px or smaller */
  }
  .button {
    font-size: 13vw;
  }
}