.container {
  /* Existing styles for .container */
  max-height: 11%;
  position: relative;
  text-align: center;
  display: flex;
  gap: 1%;
  align-items: center;
  width: 80%;
  max-width: 600px;
  margin-top: 5%; /* Default margin-top for larger screens */
  border-radius: 20px;
  background: #e0e0e0;
  padding: 10px;
  box-sizing: border-box;
}

/* Media query for screens up to 768px wide (typical for tablets and phones) */
@media (max-width: 768px) {
  .container {
    margin-top: 10%; /* Different margin-top for smaller screens */
  }
}

/* You could also target even smaller screens, like typical phone widths */
@media (max-width: 480px) {
  .container {
    margin-top: 20%; /* Even larger margin-top for very small screens */
  }
}

 .nums {
   box-shadow:
     8px 8px 15px rgba(42, 42, 42, 0.2),
     -8px -8px 15px rgba(255, 255, 255, 0.5);
   display: inline-block;
   height: 100%;
   perspective: 1000px;
   position: relative;
   width: 8%;
   max-width: 140px;
   border-radius: 20px 20px 20px 20px;
   background: #e0e0e0;
 }

 .nums:before {
   border-bottom: 1px solid #00000087;
   content: "";
   height: 1px;
   left: 0;
   position: absolute;
   transform: translate3d(0, -1px, 0);
   top: 50%;
   width: 100%;
   z-index: 1000;
 }


 .num {
   font-size: 100%;

   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   border-radius: 20px;
   height: 100%;
   left: 0;
   position: absolute;
   transform-style: preserve-3d;
   top: 0;
   width: 100%;
   transform: rotateX(0);
   transition: 0.6s;

 }

 .num:before,
 .num:after {
   backface-visibility: hidden;
   color: #333;
   display: block;
   height: 50%;
   left: 0;
   /*overflow: hidden;*/
   position: absolute;
   text-align: center;
   text-shadow:
     0 1px 1px rgba(0, 0, 0, 0.05),
     0 2px 4px rgba(0, 0, 0, 0.08);
   width: 100%;
 }

 .num:before {
   display: flex;
   justify-content: center;
   align-items: center;
   background: #e0e0e0;
   border-radius: 20px 20px 0 0;
   content: attr(data-num);
   height: 50%;
   top: 0;
   z-index: 1;
   color: #333;

 }



 .num:after {
   background: #e0e0e0;
   border-bottom: 1px solid #d2d2d2;
   border-radius: 0 0 20px 20px;
   content: attr(data-num);
   height: calc(50% - 1px);
   line-height: 0;
   top: 0;
   transform: rotateX(180deg);
 }

 @keyframes flip {
   0% {
     transform: rotateX(0);
     z-index: 50;
   }

   50% {
     transform: rotateX(-90deg);
     z-index: 1
   }

   100% {
     transform: rotateX(-180deg);
   }
 }

 /* Stile per i due punti */
 .colon {


   font-weight: bold;
   color: #555;
   user-select: none;
 }

 .total_days {
    margin-top: 1%;
    font-size: 100%;
    font-weight: 600;
    text-align: center;
    color: #ffccd5;
    text-shadow: 0 0 8px rgba(255, 150, 170, 0.6);
}
/* Media query for screens up to 768px wide (typical for tablets and phones) */
@media (max-width: 768px) {
  .total_days {
    font-size: 100%;
    margin-top: 5%;
    font-weight: 600;
    text-align: center;
    color: #ffccd5;
    text-shadow: 0 0 8px rgba(255, 150, 170, 0.6);
}
}

/* You could also target even smaller screens, like typical phone widths */
@media (max-width: 480px) {
  .total_days {
    font-size: 100%;
    margin-top: 5%;
    font-weight: 600;
    text-align: center;
    color: #ffccd5;
    text-shadow: 0 0 8px rgba(255, 150, 170, 0.6);
}
}