.chronos {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
      grid-template-areas: "clock czas";
  height: 100%;
  font-size: 1.4rem;
  width: 100%;
}

.clock {
  overflow-y: auto;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: clock;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.czas {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: czas;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.time-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.time-buttons div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 2rem;
  width: 100px;
  height: 100px;
  border: solid 3px black;
  border-radius: 50%;
  margin: 3px;
}

.time-question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 2.5rem;
  width: 100%;
  height: 60px;
  margin-top: 10px;
}

.set-hour, .set-minute, .set-secund {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.col-czas {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: czas;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  justify-self: center;
  padding: 5px;
}

.digit-drop-box-clock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.digit-drop-box-clock .drop-tys, .digit-drop-box-clock .drop-sto, .digit-drop-box-clock .drop-dzi, .digit-drop-box-clock .drop-jed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 70px;
  width: 75px;
  border: 1px solid black;
  color: blue;
  font-size: 4rem;
}

.time-words {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[2];
  -ms-grid-columns: (1fr)[3];
      grid-template: repeat(2, 1fr)/repeat(3, 1fr);
  -ms-grid-row-align: center;
      align-self: center;
  grid-gap: 5px;
  max-width: 295px;
}

.wyraz {
  width: 100px;
  height: 60px;
  border: 1px solid black;
  background: white;
  font-size: 1.5rem;
  text-align: center;
}

.to-past {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 70px;
  width: 115px;
  border: 1px solid black;
  color: blue;
  font-size: 2rem;
}
/*# sourceMappingURL=main_clock.css.map */