.card { text-align: center; border-radius: 10px; /* background: linear-gradient( 90deg, rgba(77, 241, 241, 1) 0%, rgba(82, 124, 230, 1) 43%, rgba(219, 0, 132, 1) 100% ); */ margin-top: 15%; margin-bottom: 5%; padding-top: 15%; padding-bottom: 5%; justify-content: center; } .card:hover { transform: scale(1.1); } .card_text { text-align: center; color: white; } .label { padding: 1%; font-weight: bold; } .demo_card { text-align: center; border-radius: 10px; background: rgb(53, 145, 53); margin-top: 11%; margin-bottom: 5%; margin-right: 40%; padding-top: 5%; padding-bottom: 5%; font-weight: bold; font-size: 80%; color: white; justify-content: center; } .demo_card:hover { transform: scale(1.1); } .rank { border-style: solid; border-width: 2px; border-radius: 5px; border-color: #0c0c0e; padding: 1%; font-weight: bold; } .header { margin-bottom: 5%; } .text { display: inline; } .text p:empty { display: inline; line-height: 2; } .text_mark { background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%); color: white; padding: 0.5%; border-radius: 5px; text-align: center; display: inline-flex; font-weight: bold; } .text_mark:hover { transform: scale(1.1); } .text_mark:before { content: attr(data-text); position: absolute; width: 200%; /* position tooltip correctly */ left: 100%; margin-left: 5px; /* vertically center */ top: 50%; transform: translateY(-50%); padding: 5%; border-radius: 5px; background: rgb(35, 34, 36); text-align: center; font-weight: normal; font-size: 65%; display: none; } .text_mark:hover:before { display: block; } .answer_container { font-weight: bold; margin-top: 5%; } .answer { background-color: rgb(38, 38, 44); color: white; padding: 0.5%; border-radius: 5px; text-align: center; display: inline-flex; margin: 1.5%; font-weight: bold; } .answer:hover { transform: scale(1.05); } .answer_mark { background-color: rgb(38, 38, 44); color: white; padding: 1.5%; border-radius: 5px; display: inline; text-align: center; font-weight: bold; }