/* From uiverse.io by @Tiagoadag */ .card { width: 190px; height: 254px; background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%); border-radius: 20px; transition: all .3s; margin: 5px; } .card-selected { width: 190px; height: 254px; background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%); border-radius: 20px; transition: all .3s; margin: 5px; box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30); } .card2 { width: 190px; height: 254px; background-color: #ccffe2; border: 2px solid #7df5d7; border-radius: 20px; transition: all .2s; text-align: center; } .card2-selected { width: 190px; height: 254px; background-color: #ccffe2; border-radius: 20px; transition: all .2s; text-align: center; transform: scale(0.98); border: 0; } .card2 p { line-height: 254px; margin: 0; padding: 0; } .card2:hover { transform: scale(0.98); border-radius: 20px; border: 0; } .card:hover { box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30); }