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

/******************************************
/* BASE STYLES
/*******************************************/

body {
     display: flex;
     height: 100vh;
     justify-content: center;
     align-items: center;
     text-align: center;
     background: rgb(29, 29, 29);
     color: white;
     font-family: 'Inconsolata', monospace;
}

h1 {
     font-size: 3rem;
     font-weight: 600;
}

.time {
     display: flex;
     flex-direction: column;
}

.time-form {
     display: flex;
     align-items: center;
     justify-content: start;

}

.timeInputs {
     display: inherit;
}

.itime {
     font-size: 20px;
     width: 50px;
     margin: 5px;
     text-align: center;
}

input {
     background-color: white;
     border-radius: 5px;
}

button {
     margin: 5px;
     padding: 5px 10px;
}

#start {
     cursor: pointer;
     padding: 9px;
}

#pause {
     cursor: pointer;
     padding: 9px;
}

#reset {
     cursor: pointer;
     padding: 9px;
}


.hide-reset {
     display: none;
}

.p-hidden {
     display: none;
}

.s-hidden {
     display: none;
}

.second-field {
     display: flex;
     flex-direction: column;
     justify-content: center;
}

.msg {
     margin: 5px;
     padding: 5px 10px;
}

@media all and (max-width: 800px) {
     main {
          width: 80%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;

     }

     .time {
          flex-direction: column;
     }

}