fruitvote

1 files changed, 97 insertions, 0 deletions

diff --git a/html/public/css/style.css b/html/public/css/style.css
index a4f243f..95829c3 100644
--- a/html/public/css/style.css
+++ b/html/public/css/style.css
@@ -75,3 +75,100 @@ p {
 li {
   margin-left: 20px;
 }
+
+.fruitvote {
+  display: flex;
+  flex-direction: row;
+  margin-top: 20px;
+  gap: 2rem;
+  max-width: 800px;
+}
+
+.contestant {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  border: 2px solid #ff69b4;
+  border-radius: 10px;
+  padding: 0.5rem;
+}
+
+.contestant div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 10px;
+  height: 100%;
+  transition: background-color 0.3s ease;
+  padding: 1rem;
+}
+
+.contestant > input {
+  visibility: hidden;
+  position: absolute;
+}
+
+.contestant div:hover {
+  background-color: #ff69b4;
+  color: #2a2a2a;
+
+  cursor: pointer;
+}
+
+.contestant > input:checked + div {
+  background-color: #ff69b4;
+  color: #2a2a2a;
+
+  cursor: pointer;
+}
+
+.contestant div img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+
+  border-radius: 10px;
+}
+
+.versus {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+table {
+  width: auto; /* Adjust based on content, not full width */
+  border-collapse: collapse;
+  background-color: #383838; /* Darker background for contrast */
+}
+
+th,
+td {
+  padding: 12px 20px; /* Good padding for readability */
+  border: 1px solid #f4c2c2; /* Soft pink borders */
+  color: #f4c2c2; /* Soft pink text */
+  text-align: left;
+}
+
+thead th {
+  background-color: #ff69b4; /* Brighter pink for header */
+  color: white; /* White text for contrast */
+  font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #2f2f2f; /* Slightly lighter background for every other row for readability */
+}
+
+tbody tr {
+  transition: background-color 0.3s ease;
+}
+
+tbody tr:hover {
+  background-color: #ff47da; /* Change to a lighter pink on hover for interactivity */
+  color: #2a2a2a; /* Dark text for contrast */
+}