.cardOrders { width: 100%; border-radius: 18px; padding: 1rem 4rem 0.5rem 4rem; box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px; margin-top: 0.5rem; margin-bottom: 1rem; position: relative; } .cardOrders01 { width: 100%; border-radius: 18px; padding: 1rem 4rem 0.5rem 4rem; box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px; margin-top: 0.5rem; margin-bottom: 1rem; position: relative; background-color: #FFFFFF; background-image: linear-gradient(to bottom, #91d737, rgba(145, 215, 55, 0.5)); z-index: 10; } .cardOrders02 { width: 100%; border-radius: 18px; padding: 1rem 4rem 0.5rem 4rem; box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px; margin-top: 0.5rem; margin-bottom: 1rem; position: relative; background-color: #FFFFFF; background-image: linear-gradient(to bottom, #f5730f, rgba(245, 115, 15, 0.5)); z-index: 20; } .cardOrders03 { width: 100%; border-radius: 18px; padding: 1rem 4rem 0.5rem 4rem; box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px; margin-top: 0.5rem; margin-bottom: 1rem; position: relative; background-color: #FFFFFF; background-image: linear-gradient(to bottom, #23f587, rgba(35, 245, 135, 0.5)); z-index: 30; } .wRed01 { width: 95%; margin-bottom: -1.5rem; animation-name: shrink01; animation-duration: 0.6s; background-color: #696969; background-image: none; } .wRed02 { width: 90%; margin-bottom: -1.5rem; animation-name: shrink02; animation-duration: 0.6s; background-color: #333333; background-image: none; color: white; } @keyframes shrink01 { 0% { width: 100%; background-image: linear-gradient(to bottom, #91d737, rgba(145, 215, 55, 0.5)); } 99% { width: 95%; background-color: #696969; background-image: linear-gradient(to bottom, #91d737, rgba(145, 215, 55, 0.5)); } 100% { width: 95%; background-color: #696969; } } @keyframes shrink02 { from { width: 95%; background-color: #696969; } to { width: 90%; color: white; background-color: #333333; } }