html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

#app {
  width: 100%;
  height: 100%;
  background: rgb(18, 18, 18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flip-clock-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* font-family: "Segoe UI", "Open Sans", "Helvetica Neue", sans-serif; */
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 12vw; /* Relative to viewport width */
  line-height: 0;
}

.flip-clock-container * {
  user-select: none;
  cursor: default;
}

.flip-clock {
  display: flex;
  margin: 1vw; /* Relative to viewport width */
  perspective: 1000px;
}

.digit {
  position: relative;
  width: 10vw; /* Relative to viewport width */
  height: 12vw; /* Relative to viewport width */
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
}

.digit-left {
  margin-right: 1px;
}

.digit-right {
  margin-left: 1px;
}

.digit::before,
.digit::after {
  position: absolute;
  z-index: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.digit::before {
  content: attr(data-digit-before);
  bottom: 0;
  align-items: flex-start;
}

.digit::after {
  content: attr(data-digit-after);
  top: 0;
  align-items: flex-end;
}

.card {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 50%;
  transform-style: preserve-3d;
  transform-origin: bottom;
  transform: rotateX(0);
  transition: transform 0.7s ease-in-out;
}

.card.flipped {
  transform: rotateX(-180deg);
}

.card-face {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
}

.card-face-front {
  align-items: flex-end;
}

.card-face-back {
  align-items: flex-start;
  transform: rotateX(-180deg);
}

.digit::before,
.digit::after,
.card-face-front,
.card-face-back {
  background: rgb(16, 16, 16);
  color: rgb(255, 255, 255);
}

.digit,
.digit::before,
.digit::after,
.card,
.card-face {
  border-radius: 4px;
}

.digit::before,
.card-face-back {
  background: #292929;
  color: #d0d0d0;
  border-top: 1px solid black;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.digit::after,
.card-face-front {
  background: #292929;
  color: #d0d0d0;
  border-bottom: 1px solid black;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.digit-left,
.digit-left::before,
.digit-left::after,
.digit-left .card,
.digit-left .card-face {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.digit-right,
.digit-right::before,
.digit-right::after,
.digit-right .card,
.digit-right .card-face {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Media Queries */
@media (max-width: 600px) {
  /* For iPhone screens */
  .flip-clock-container {
    flex-direction: column;
    align-items: center;
    font-size: 18vw; /* Increase size */
  }

  .flip-clock {
    margin: 2vw 0; /* Add vertical gap */
  }

  .digit {
    width: 28vw; /* Increase width */
    height: 35vw; /* Increase height */
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  /* For iPad screens */
  .flip-clock-container {
    font-size: 6vw; /* Smaller size compared to normal screen */
  }

  .flip-clock {
    margin: 1.5vw; /* Add a bit more space between elements */
  }

  .digit {
    width: 12vw;
    height: 14vw;
  }

  html, body {
    margin: 0;
    height: 100%;
}

}