body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    background-color: #343a40;
    color: white;
    padding: 20px 0;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
    margin: 0;
}

.date-moon-phase {
    margin: 20px 0;
    font-size: 1.2rem;
}

footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
    bottom: 0;
}

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

.card {
    margin: 20px 0;
}

.card-title {
    font-size: 1.5rem;
}

.card-body {
    font-size: 1rem;
}

.moon-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    padding: 1.5rem 1.5rem;
    margin: 2rem auto;
    max-width: 500px;
    border: none;
    /* Remove borda vermelha */
    color: #222;
    font-size: 1.5rem;
    transition: box-shadow 0.3s;
}

.moon-card .moon-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.current-date{
font-size: 1.2rem;
}

   body {
       font-family: 'Montserrat', Arial, sans-serif;
       background: linear-gradient(135deg, #232526 0%, #414345 100%);
       min-height: 100vh;
       color: #fff;
       display: flex;
       flex-direction: column;
   }

   .moon-card {
       background: rgba(255, 255, 255, 0.10);
       border-radius: 22px;
       box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
       backdrop-filter: blur(6px);
       border: 1px solid rgba(255, 255, 255, 0.18);
       padding: 2.5rem 2rem 2rem 2rem;
       margin: 2rem auto;
       max-width: 420px;
       color: #fff;
       position: relative;
       overflow: hidden;
       transition: box-shadow 0.3s;
   }

   .moon-card .moon-icon {
       font-size: 4.5rem;
       margin-bottom: 1rem;
       display: block;
       animation: moon-fadein 1.2s;
   }

   @keyframes moon-fadein {
       from {
           opacity: 0;
           transform: scale(0.8);
       }

       to {
           opacity: 1;
           transform: scale(1);
       }
   }

   .moon-svg-bg {
       position: absolute;
       top: -40px;
       right: -40px;
       width: 140px;
       opacity: 0.12;
       z-index: 0;
   }

   .moon-card>*:not(.moon-svg-bg) {
       position: relative;
       z-index: 1;
   }

   .share-btn {
       margin-top: 1.5rem;
       background: #007bff;
       color: #fff;
       border: none;
       border-radius: 30px;
       padding: 0.6rem 1.5rem;
       font-size: 1rem;
       font-weight: 700;
       cursor: pointer;
       transition: background 0.2s;
   }

   .share-btn:hover {
       background: #0056b3;
   }

   footer {
       background: #232526;
       color: #bbb;
       flex-shrink: 0;
       width: 100%;
       margin-top: auto;
   }

   @media (max-width: 600px) {
       .moon-card {
           padding: 1.2rem 0.5rem;
           max-width: 98vw;
       }

       h1.display-4 {
           font-size: 2rem;
       }
   }