@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap);
*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto', sans-serif;font-size:62.5%;text-align:center}h1{font-size:4.2rem}h2{font-size:2.8rem;color:gray}h3{font-size:2.4rem;text-transform:uppercase}p{font-size:1.4rem}header{width:100%;height:250px;padding:30px;display:flex;flex-direction:column;justify-content:space-around}@media screen and (min-width: 403px){header{height:200px}}@media screen and (min-width: 620px){header{height:150px}}.abilityContainer{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around}.ability{font-size:2rem}.ability::first-letter{text-transform:uppercase}.cardContainer{display:flex;flex-direction:column;justify-content:space-around;flex-flow:wrap}.card{width:90%;min-height:300px;min-width:200px;background:#fff;border-radius:25px;margin-bottom:50px;transition:0.3s}.card:hover{transform:scale(1.02);box-shadow:0 0 20px -10px rgba(0,0,0,0.5)}@media screen and (min-width: 620px){.card{width:45%}}@media screen and (min-width: 1000px){.card{width:30%}}.cardHeader{height:120px;padding:50px 10px;background:linear-gradient(333deg, #ff416c 0%, #ff4b2b 100%);color:#fff;border-radius:25px 25px 0 0}.cardBody{padding:30px 20px;text-align:center;font-size:1.8rem}.data{width:100%;height:80px}.cardBody .btn{display:block;color:#fff;text-align:center;background:linear-gradient(to right, #ff416c, #ff4b2b);margin-top:30px;text-decoration:none;padding:10px 5px;border:none;border-radius:10px;cursor:pointer}footer{color:white;display:inline-block;width:100%;height:50px;background:linear-gradient(333deg, #ff416c 0%, #ff4b2b 100%);margin:0 auto}footer>p{margin-top:15px}footer>p>a{font-size:1.4rem;text-decoration:none;color:#f5f5dc}