app.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');

html {
    height: 100%;
    /*width: 100vw;*/
}

body{
  position:absolute; 
  top:0; 
  bottom:0; 
  right:0; 
  left:0;
}

#container {
  position: relative;
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

#counterr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /*font-color: '#ffffff';*/
  font-weight: 800;
  font-size: 120px;
  /*color: #F7958E;*/
  color: #ccc;
  -webkit-transition: color 1s;
    -moz-transition:    color 1s;
    -ms-transition:     color 1s;
    -o-transition:      color 1s;
    transition:         color 1s;
}

#minutes {
  font-size: 32px;
  font-weight: 400;
}

#status{
  height: 10vh;
  font-size: 16px;
  font-weight: 400;
  color: #9298A1;
}

#tess {
  color: #F9F9FA;
}

.clear:after, ul li:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
    line-height: 0;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    height: auto;
    width: auto;
    font-family: 'Open Sans';
    color: #F9F9FA;
    background: #354051;
}

#button_block{
  position: relative;
  top: 3vh;
}

.button1 input {
  position: relative;
  padding: 16px 24px 16px 24px;
  border-radius: 37px;
  border: none;
  background-color: #1ECB8D;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  -webkit-transition: .4s;
  transition: .4s;
}

/*
#switch_block{
    position: relative;
  display: inline-block;
    width: 100px;
  height: 70px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}*/

/* Hide default HTML checkbox *//*
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}*/

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}


input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Style the header with a grey background and some padding */
.header {
  min-height: 10%;
  overflow: hidden;
  background-color: transparent;
  padding: 10px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 5px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

.header img {
  width: auto;
  height: 12vw;
  max-height: 100px;
}