body {
   background-size: cover;
   background-position: center;
   background-color: black !important;
}

i {
   cursor: pointer;
}

.top-right {
   margin-top: 2em;
   padding: 3px;
   color: whitesmoke;
   /* text-align: right; */
}

.clockCard,
.weather__card {
   background-color: rgba(238, 238, 238, 0.251);
   backdrop-filter: blur(2px);
   border-radius: 20px;
   color: whitesmoke;
}

.table {
   color: rgb(255 255 255 / 78%) !important;
}
.table>:not(caption)>*>* {
    max-width: 230px;
    overflow: hidden;
}
a {
   color: rgb(128 163 255) !important;
}

.clockCard h3 {
   color: rgb(60, 64, 72);
}

.weather__card h3 {
   /* line-height: .2; */
   color: rgb(60, 64, 72);
}

.clockCard h5 {

   color: rgb(60, 64, 72);
}

.weather__card .weather__description {
   background-color: rgb(255, 255, 255);
   border-radius: 20px;
   padding: .3em .6em;
   /*y,x*/
   border: 0;
   outline: none;
   color: rgb(127, 132, 135);
   font-size: .9rem;
   /* font-weight: 400; */
}



@media (max-width: 768px) {
   .weather{
      /* border: 2px solid red; */
      padding-top: 1rem;
   }
}

/* footer */

footer {
   background-color: #333;
   color: whitesmoke;
   padding: 30px 0;
   font-size: 14px;
}

.footer-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

.footer-section {
   margin-bottom: 20px;
}

.footer-section h5 {
   font-size: 18px;
   margin-bottom: 15px;
}

.footer-section p {
   margin: 0 0 10px;
   font-size: 14px;
}

.social-icons {
   display: flex;
   gap: 10px;
}

.social-icons a {
   color: whitesmoke;
   font-size: 18px;
   transition: color 0.3s ease;
}

.social-icons a:hover {
   color: #007bff;
}

.copyright {
   margin-top: 20px;
}

@media (max-width: 768px) {
   .footer-section {
      text-align: center;
   }

   .social-icons {
      justify-content: center;
   }
}

@media (max-width: 576px) {
   .footer-section {
      margin-bottom: 30px;
   }

   .footer-section h5 {
      font-size: 16px;
   }
}