* {
   margin: 0;
   padding: 0;
}

body {
   font-family: Arial, sans-serif;
   background:
     linear-gradient(rgba(7, 0, 28, 0.78), rgba(7, 0, 28, 0.78)),
     url('./public/background.png') no-repeat center center fixed;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 15rem;
   min-height: 100vh;
   color: #fff;
}

audio {
   display: none;
}

.container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
}

img {
   width: 100%;
   height: auto;
}

button {
   padding: 0.5rem 1rem;
   font-size: 1rem;
   cursor: pointer;
   background-color: #666;
   color: #fff;
   border: none;
   border-radius: 5px;
}

button:hover {
   background-color: #333;
}

a {
   color: #fff;
}

#cat-container img {
   margin-top: 1rem;
   border-radius: 10px;
}

#status {
   margin: 1rem 0;
}

@media (max-width: 600px) {
   body {
     padding: 5rem 1rem;  /* Ajustado para evitar sobrecarga em telas pequenas */
   }

   .titulo {
     font-size: 1.2rem;
     text-align: center;
   }

   .container {
     padding: 0.5rem;
   }

   img {
     width: 100%;
     height: auto;
   }
}