body {
    margin        : 0;
    font-family   : Arial, sans-serif;
    height        : 100vh;
    display       : flex;
    flex-direction: column;
}

form {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

header {
  display         : flex;
  background-color: aquamarine;
  min-height      : 10vh;
  justify-content : flex-end;
  align-items     : flex-end;
  padding         : 0 10px;
}

header img 
{
  position: absolute;
  top     : 0;
  left    : 0;
  margin  : 10px;
}

main {
    display: flex;
    height : 90%;
}

.left {
  width           : 20%;
  padding         : 30px 10px;
  box-sizing      : border-box;
  overflow-y      : auto;
}

.right {
  width           : 20%;
  padding         : 30px 10px;
  box-sizing      : border-box;
  overflow-x      : auto;
  overflow-y      : auto;
  font-size       : 0.6em;
}

.right h3{
  font-weight: bold;
}

.right h4{
  color      :red;
  font-weight: bold;
}

.center {
  width     : 60%;
  padding   : 30px 10px;
  overflow-y: auto;
}

.execTimes {
  text-align : center;
  font-size  :20px;
  color      :green;
}

#counter {
  color: green !important;
  font-size: 40px !important;
}

.timerDisp {
  display            : flex;
  justify-content    : center;
  align-items        : center;
}

.timerDisp .timeClass {
  display         : inline-block;
  text-align      : center;
  background-color: aquamarine; 
  padding         : 2px;
  box-sizing      : border-box;
}

.timerDisp .timeClass .baseTime {
  display         : inline-block;
  text-align      : center;
  background-color: azure;
  margin: 1px;
  padding: 2px;
  box-sizing: border-box;
  width:200px;
}

.timerDisp .timeClass .interValTime {
  display         : inline-block;
  text-align      : center;
  background-color: linen;
  margin          : 1px;
  padding         : 2px;
  box-sizing      : border-box;
  width:200px;
}

.timerDisp .timeClass .breakTime {
  display         : inline-block;
  text-align      : center;
  background-color: linen;
  margin          : 1px;
  padding         : 2px;
  box-sizing      : border-box;
  width:200px;
}

#timer {
  text-align:center;
  font-size:100px;
  color:green;
}

.buttonClass {
  text-align:center;
}

footer {
  background-color: aquamarine;
  height          : 30px;
  width           : 100%;
  text-align      : right;
  font-size       : 0.8em;
  display         : flex;
  align-items     : center;
  justify-content : flex-end;
  padding         : 0px;
  padding-right   : 10px;
  position        : fixed;
  bottom          : 0;
  line-height     : 30px;
  font-size       : 1em;
  flex-shrink     : 0;
}

footer a {
  color           : darkgreen;
  text-decoration : none;
}

footer a:hover {
  text-decoration : underline;
}
