style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Akatab:wght@400;500;600;700&family=Poppins:wght@100;200;300&display=swap");

:root {
  --secondry-color: #fff;
  --mainFont: "Poppins", sans-serif;
  --secondFont: "Akatab", sans-serif;
  --gradient: linear-gradient(-45deg, #19d6fc, #19fc5d);
}

#body {
  background: var(--gradient);
  transition-duration: 0.3s;
  height: 100vh;
}

.darkmode-section {
  display: flex;
  justify-content: right;
  height: 50px;
}

#darkmode-img {
  width: 40px;
  height: 40px;
  background-position: center;
  background-color: transparent;
  transition-duration: 0.3s;
}

#darkmode-img:hover {
  rotate: -20deg;
}

.text {
  color: var(--secondry-color);
}

#title {
  font-family: var(--mainFont);
  font-weight: 200;
  font-size: 5vw;
  text-align: center;
  margin-bottom: 10px;
}

#mottoText {
  font-family: var(--mainFont);
  font-weight: 300;
  text-align: center;
}

.time {
  margin: 10px;
  font-size: 15vw;
  display: inline-block;
  font-family: var(--secondFont);
  font-weight: 400;
  font-weight: bold;
}

#timeDisplay {
  text-align: center;
}

.btn-section {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.btn {
  background-color: transparent;
  width: 100px;
  height: auto;
  padding: 10px 5px;
  text-align: center;
  border: 3px solid var(--secondry-color);
  border-radius: 10px;
  font-size: 16px;
  margin: 5px 10px;
  font-family: var(--mainFont);
  font-weight: bold;
  font-size: 120%;
  transition-duration: 0.3s;
}

.btn:hover {
  font-size: 100%;
}