Create new file

style.css

@@ -0,0 +1,140 @@
+.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-color: green;
+  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;
+}