1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
/* Basic Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #2a2a2a; /* Dark background */
color: #f4c2c2; /* Soft pink text, typical of a girly 90s vibe */
font-family: "Comic Sans MS", "Chalkboard SE", sans-serif; /* Retro, playful font */
padding: 20px;
}
a {
color: #ff47da; /* Bright pink for links */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button,
input[type="submit"],
input[type="button"] {
background-color: #ff69b4; /* Bright pink for buttons */
border: none;
color: white;
padding: 10px 20px;
text-transform: uppercase;
font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
background-color: #ff1493; /* Darker pink on hover */
}
input[type="text"],
input[type="password"],
textarea {
background-color: #333; /* Darker elements for inputs */
border: 1px solid #f4c2c2; /* Soft pink border */
color: #f4c2c2; /* Soft pink text */
padding: 10px;
}
/* Example of styling a specific component differently */
.special-button {
background-color: #ff47da; /* A different shade of pink */
border-radius: 20px; /* Rounded edges for a more playful look */
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #ff69b4;
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
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 */
}
|
