@keyframes movementTitle{0%{transform:translateX(-500px)}to{transform:translateX(0)}}#text{font-weight:700;color:grey;font-size:30px}#divTitle{animation:movementTitle 2s}:root{--my-primary-color:#cfd6e6}@keyframes animatorColor{0%{transform:translateX(500px)}to{transform:translateX(0)}}.fontTitle{font-size:20px}#card{box-shadow:0 0 0 0 grey;padding:30px;background-color:var(--my-primary-color);display:flex;animation:animatorColor 2s forwards;align-items:center;border-radius:10px;transition-property:background-color,color,box-shadow;transition-duration:.5s;transition-timing-function:linear;font-weight:700;color:#000}#card:hover{background-color:#335c67;color:#fff;box-shadow:0 0 20px 5px #6c757d}@media (max-width:600px){#card{padding:30px;background-color:var(--my-primary-color);display:flex;animation:animatorColor 2s forwards;width:80vw;align-items:center;border-radius:10px}}