* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   min-height: 100vh;
   background: linear-gradient(135deg, #ff9800 30%, #0ec235 40%, #1682a3 100%);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   color: aliceblue;
   display: flex;
   flex-direction: column;
   align-items: center;
}

main {
   width: 90%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap; /* faz os cards quebrarem linha conforme o tamanho da tela */
   gap: 20px;
   margin: 40px 0;
}

#a, #b, #c {
   flex: 1 1 300px; 
   max-width: 400px;
   background-color: rgb(43, 189, 226);
   padding: 2%;
   border-radius: 20px;
   border: solid rgb(0, 0, 0);
   box-shadow: 3px 3px 15px rgb(0, 153, 255);
   transition: 0.3s, box-shadow 0.3s;
   display: flex;
   flex-direction: column;
   justify-content: space-between; 
   color: #fff;
   overflow: visible; 
}


#a {
   background-color: rgb(230, 76, 4);
   box-shadow: 3px 3px 15px rgb(255, 115, 0);
}
#b {
   background-color: rgb(7, 184, 30);
   box-shadow: 3px 3px 15px rgb(81, 255, 0);
}

#a:hover, #b:hover, #c:hover {
   transform: translateY(-8px);
   box-shadow: 3px 6px 25px rgba(0,0,0,0.4);
}

img {
   width: 100%;
   border-radius: 10px;
   margin-top: 10px;
   box-shadow: 3px 3px 15px rgb(0, 0, 0);
}

h2 {
   text-align: center;
   margin-bottom: 15px;
}
h4 {
   margin-top: 10px;
}
p {
   font-size: 15px;
   color: #000;
}

.pokebola {
   width: 60%;
   padding: 10px;
   margin: 15px auto 0 auto;
   border-radius: 50px;
   text-align: center;
   border: 2px solid beige;
   background: transparent;
   cursor: pointer;
   transition: 0.3s;
}
.pokebola:hover {
   background: beige;
   color: black;
}

a {
   text-decoration: none;
   color: #000;
   font-size: medium;
}


@media (max-width: 1024px) {
   main {
      width: 95%;
   }
   .pokebola {
      width: 70%;
   }
}

@media (max-width: 768px) {
   main {
      flex-direction: column;
      align-items: center;
   }
   #a, #b, #c {
      width: 90%;
      max-width: 500px;
   }
}

@media (max-width: 400px) {
   p {
      font-size: 14px;
   }
   .pokebola {
      width: 80%;
   }
}