body {
     margin: 0;
     background: linear-gradient(rgb(255 255 255 / 70%), rgba(0, 0, 0, 0.7)), url(wallpaper.webp);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-color: #000000;
     font-family: sans-serif;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     flex-direction: column;
     gap: 2rem;
 }

 .botoes-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem;
     padding: 1rem;
 }

 .botao-imagem {
     cursor: pointer;
     transition: transform 0.1s ease, box-shadow 0.1s ease;
     width: 22vw;
     max-width: 200px;
     height: auto;
     object-fit: cover;
     border-radius: 50%;
     transition: transform 0.6s ease;
 }

 .girar {
     animation: girar360 0.15s ease;
 }

 @keyframes girar360 {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(720deg);
     }
 }

 .botao-imagem:active {
     transform: scale(0.96) translateY(2px);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .resultado-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem;
     background-color: rgba(0, 0, 0, 0.6);
 }

 .resultado-container img {
     max-width: 200px;
     height: auto;
 }

 @media (max-width: 480px) {
     .botao-imagem {
         width: 30vw;
     }
 }

 .versao {
     position: fixed;
     top: 10px;
     left: 10px;
     background-color: rgba(0, 0, 0, 0.6);
     color: white;
     padding: 6px 12px;
     font-size: 14px;
     border-radius: 8px;
     z-index: 1000;
     font-weight: bold;
 }

 a {
     all: unset;
     cursor: pointer;
 }

 a {
     text-decoration: none;
     color: inherit;
     background: none;
     border: none;
     padding: 0;
     margin: 0;
     font: inherit;
     cursor: pointer;
 }