@import url("https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic");

@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic");

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;

   font-family: "Poppins";
}

body {
   height: 60vh;
   display: grid;
   place-items: center;

   background-color: #3a7583;
}

h1 {
   color: #fafafa;
   font-family: "IBM Plex Mono";
}

.align-container {
   height: 50vh;
   width: 60vw;

   margin-top: 4rem;

   display: flex; 
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}

.stopwatch {
   color: #fafafa;
   font-size: 5rem;
   font-weight: 700;
   
   /*padding: 30px;*/
   width: 29rem;
   height: 10.5rem;
   border: solid 5px#d8d8d8;

   display: flex;
   justify-content: center;
   align-items: center;
}

.stopwatch-miliseconds {
   font-size: 2rem;
   margin-top: 3.5rem;
}

.stopwatch-miliseconds-margin-reduced {
   margin-top: 2rem;
}

.stopwatch-button-container {
   width: 90%;
   max-width: 420px;
   min-width: 400px;

   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 1rem;
   place-items: center;
}

.stopwatch-button {
   height: 6vh;
   width: 100%;
   max-width: 18vw;

   color: #1e1e1e;
   font-family: "IBM Plex Mono";
   font-size: 1rem;
   border: none;
   border-radius: 10px;
   box-shadow: 4px 4px #2f2f2f;

   cursor: pointer;
   transition: 100ms;
}

.stopwatch-button:hover, .disabled {
   transform: translate(2px, 2px);
   box-shadow: 2px 2px #000;
}

.stopwatch-button:active, .reset-button-active {
   transform: translate(2px, 2px);
   box-shadow: 2px 2px #000;
   filter: brightness(70%);
}

.disabled {
   filter: brightness(70%) !important;
   cursor:default;
   pointer-events: none;
}



/** Unused CSS */
/*.stopwatch-button::before {
   content: "";
   height: inherit;
   width: min(18vw, 130px );
   
   border-radius: 10px;
   background-color: rgb(41, 41, 41);
   
   position: absolute;
   top: 0;
      left: 0;
      transform: translate(-10%, -10%);
   transition: .4s;
   z-index: -50;
}



.stopwatch-button:hover {
   transform: translateY(-10px);
   z-index: 100;
}

.stopwatch-button:hover::before {
   transform: translate(-50%, -50%);
}*/