@import url("https://fonts.googleapis.com/css2?family=Secular+One&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #011627;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Secular One", sans-serif;
}

.body.lightTheme {
  background-color: #F1FAEE;
}

.clock {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 700px;
  height: 250px;
  border: 1px solid gray;
  box-shadow: 0 0 5px blue, 0 0 25px #4b4bdd;
  color: #F71735;
  position: relative;
}
.clock .def {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 0;
  justify-content: space-between;
  text-align: center;
}
.clock .def span {
  width: 200px;
  color: #FDFFFC;
  font-size: 24px;
  text-shadow: 0 2px 5px gray;
}
.clock .box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 175px;
  background-color: #41ead40c;
}
.clock .box span {
  font-size: 130px;
}
.clock .colon {
  color: #F71735;
  font-size: 62px;
}

.clock.lightTheme {
  color: #1D3557;
  box-shadow: 0 0 5px rgba(51, 51, 51, 0.651), 0 0 25px rgba(28, 28, 28, 0.582);
}
.clock.lightTheme .box.lightTheme {
  background-color: #a8dadc5b;
}
.clock.lightTheme .def.lightTheme span {
  color: #457B9D;
}

.themeToggle {
  display: flex;
  align-items: center;
  margin-top: 50px;
  width: 100px;
  height: 65px;
  border: 2px solid rgba(38, 38, 38, 0.788);
  border-radius: 50px;
  background-color: #30302c;
  cursor: pointer;
  position: relative;
  transition: background-color 1s;
}
.themeToggle .onOff {
  display: flex;
  position: absolute;
  height: 90%;
  width: 55px;
  margin-left: 2px;
  border-radius: 50%;
  background-image: linear-gradient(-100deg, #757070, black);
  transition: 0.5s ease-in-out;
  box-shadow: 0 1px 3px rgba(255, 0, 0, 0.432);
}

.themeToggle.active {
  background-color: #e5defc;
  border: 2px solid rgba(59, 59, 59, 0.123);
}
.themeToggle.active .onOff.active {
  background-image: linear-gradient(90deg, #0e0e10, #d4d3d3);
  transform: translateX(38px);
}

@media (max-width: 720px) {
  .clock {
    flex-direction: column;
    height: 550px;
    width: 250px;
    position: relative;
    border: none;
  }

  .def {
    position: absolute;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    align-items: right;
  }
  .def span {
    height: 180px;
  }

  .colon {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */