body {background-color: #27221c;}

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #C19861;
}

#timer-container {
    background-color: #2C733B;
    height: 60vh;
    width: 25vw;
    margin: 16px;
    border-radius: 8px;
    box-shadow: 0 0 16px 2px tomato;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 2fr 3fr 2fr 1fr;
    grid-template-areas: 
        "title title title title" 
        "work-setting work-setting break-setting break-setting" 
        "clock-header clock-header clock clock"
        "play pause stop reset";
    justify-items: center;
    align-items: center;
}

#title {
    grid-area: title;
    color: tomato;
    margin: 0;
    font-size: 4vh;
}

#work-setting, #break-setting {    
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    justify-items: center;
    align-items: center;

    font-size: 3vh;
}

#work-setting {
    grid-area: work-setting;
    grid-template-areas: 
        ". work-up" 
        "work-header work-value" 
        ". work-down";
}

#break-setting {
    grid-area: break-setting;
    grid-template-areas: 
        ". break-up" 
        "break-header break-value" 
        ". break-down";
}

#work-value, #break-value {
    font-size: 4vh;
    color: white;
}

#work-header {grid-area: work-header;}
#work-value {grid-area: work-value;}
#work-up {grid-area: work-up;}
#work-down {grid-area: work-down;}
#break-header {grid-area: break-header;}
#break-value {grid-area: break-value;}
#break-up {grid-area: break-up;}
#break-down {grid-area: break-down;}

#play {grid-area: play;}
#pause {grid-area: pause;}
#stop {grid-area: stop;}
#reset {grid-area: reset;}
#play, #pause, #stop, #reset {font-family: Arial, Helvetica, sans-serif;}

#clock-header {
    grid-area: clock-header;
    font-size: 4vh;
}

#clock {
    grid-area: clock;
    font-size: 5vh;
    color: white;
}

button {
    background-color: transparent;
    border: 0px solid tomato;
    border-radius: 4px;
    outline-width: 0;
    padding: 0.5vh 2vw 0.5vh 2vw;

    font-size: 3vh;
    color: tomato;
}

button:hover {
    border-width: 2px;
}

button:active {
    background-color: tomato;
    color: #2C733B;
}

#tomato-collection {width: 25vw;}


 /* Demo Switch */
 
#demo-switch {
    width: 25vw;
    display:flex;
    align-items:center;
}

#demo-switch #text {
    color: white;
    padding-left: 10px;
}

/* The switch - the box around the slider */
.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 {
    background-color: tomato;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px tomato;
  }
  
  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%;
  }

  @media (max-width: 1050px) {
    #timer-container {
        height:75vh;
        width: 95vw;
    }
    #title {font-size: 4.5vw;}
    #work-header, #break-header {font-size: 3vw;}
    #work-value, #break-value {font-size: 4.5vw;}
    button {
        padding: 0.75vh 3vw 0.75vh 3vw;    
        font-size: 3vw;
    }
    button:hover {border-width: 0px;}
    #clock-header {font-size: 4.5vw;}    
    #clock {font-size: 6vw;}
    #tomato-collection {width: 95vw;}
    #demo-switch {width: 95vw;}
}