-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
157 lines (138 loc) · 5.46 KB
/
style.css
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
body {
font-family: Helvetica;
margin: 0 auto;
width: 90%;
font-size: 16px;
}
.background {
background-color: #639;
background-image: linear-gradient(45deg, #000, #000 0.5%, #ffd700 0.5%, #ffd700 7.6%, #000 7.6%, #000 8.642857143%, #ff8c00 8.642857143%, #ff8c00 15.64285714%, #000 15.64285714%, #000 16.88571429%, #dc143c 16.88571429%, #dc143c 23.84285714%, #000 23.84285714%, #000 25%, transparent 25%), linear-gradient(-45deg, #000, #000 0.5%, #ffd700 0.5%, #ffd700 7.6%, #000 7.6%, #000 8.642857143%, #ff8c00 8.642857143%, #ff8c00 15.64285714%, #000 15.64285714%, #000 16.88571429%, #dc143c 16.88571429%, #dc143c 23.84285714%, #000 23.84285714%, #000 25%, transparent 25%), linear-gradient(45deg, transparent 73.85714286%, #000 73.85714286%, #000 75%, transparent 75%), linear-gradient(-45deg, transparent 73.85714286%, #000 73.85714286%, #000 75%, transparent 75%), linear-gradient(45deg, transparent 66.85714286%, #dc143c 66.85714286%, #dc143c 73.85714286%, transparent 73.85714286%), linear-gradient(-45deg, transparent 66.85714286%, #dc143c 66.85714286%, #dc143c 73.85714286%, transparent 73.85714286%), linear-gradient(45deg, transparent 65.71428571%, #000 65.71428571%, #000 66.85714286%, transparent 66.85714286%), linear-gradient(-45deg, transparent 65.71428571%, #000 65.71428571%, #000 66.85714286%, transparent 66.85714286%), linear-gradient(45deg, transparent 58.71428571%, #ff8c00 58.71428571%, #ff8c00 65.71428571%, transparent 65.71428571%), linear-gradient(-45deg, transparent 58.71428571%, #ff8c00 58.71428571%, #ff8c00 65.71428571%, transparent 65.71428571%), linear-gradient(45deg, transparent 57.57142857%, #000 57.57142857%, #000 58.71428571%, transparent 58.71428571%), linear-gradient(-45deg, transparent 57.57142857%, #000 57.57142857%, #000 58.71428571%, transparent 58.71428571%), linear-gradient(45deg, transparent 50.57142857%, #ffd700 50.57142857%, #ffd700 57.57142857%, transparent 57.57142857%), linear-gradient(-45deg, transparent 50.57142857%, #ffd700 50.57142857%, #ffd700 57.57142857%, transparent 57.57142857%), linear-gradient(45deg, transparent 49.42857143%, #000 49.42857143%, #000 50.57142857%, transparent 50.57142857%), linear-gradient(-45deg, transparent 49.42857143%, #000 49.42857143%, #000 50.57142857%, transparent 50.57142857%), linear-gradient(45deg, transparent 42.42857143%, #228b22 42.42857143%, #228b22 49.42857143%, transparent 49.42857143%), linear-gradient(-45deg, transparent 42.42857143%, #228b22 42.42857143%, #228b22 49.42857143%, transparent 49.42857143%), linear-gradient(45deg, transparent 41.28571429%, #000 41.28571429%, #000 42.42857143%, transparent 42.42857143%), linear-gradient(-45deg, transparent 41.28571429%, #000 41.28571429%, #000 42.42857143%, transparent 42.42857143%), linear-gradient(45deg, transparent 34.28571429%, #4169e1 34.28571429%, #4169e1 41.28571429%, transparent 41.28571429%), linear-gradient(-45deg, transparent 34.28571429%, #4169e1 34.28571429%, #4169e1 41.28571429%, transparent 41.28571429%), linear-gradient(45deg, transparent 33.142857143%, #000 33.142857143%, #000 34.28571429%, transparent 34.28571429%), linear-gradient(-45deg, transparent 33.142857143%, #000 33.142857143%, #000 34.28571429%, transparent 34.28571429%);
background-size: 100px 100px;
background-position: 0 0;
}
.content {
border-radius: 5px;
background-color: rgb(255, 255, 255);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
margin: 5% 0;
padding: 5%;
}
.h1 {
margin: 0 10px;
text-align: center;
font-size: 3rem;
}
.h2 {
margin-top: 0;
text-align: center;
font-size: 1.5rem;
}
.subheader {
font-weight: normal;
font-size: 1.5rem;
}
.bingo-field {
width: 100%;
height: 60vh;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.bingo-row {
display: flex;
flex-grow: 1;
}
.bingo-cell {
width: 100%;
margin: 8px;
padding: 10px;
display: flex;
align-items:center;
justify-content: center;
line-height: 1.3;
text-align: center;
border: 1px solid black;
border-radius: 0px;
background-color: rgb(247, 247, 247);
transition: all 0.2s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
cursor: pointer;
}
.bingo-cell:hover {
background-color: rgb(233, 232, 232);
}
.bingo-cell.bingod {
color: white;
background-color: rgb(235, 97, 35);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0, 0.85);
top: 0;
left: 0;
right: 0;
border: 0;
display: flex;
align-items: center;
justify-content: center;
}
.overlay--hidden {
display: none;
}
.overlay-content {
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
}
.overlay-content p {
color: #eb6123;
margin: 10px 10px;
}
.overlay-image {
display: block;
border: 15px solid white;
}
.button {
background-color: #FFF;
font-size: 18px;
font-weight: bold;
margin-top: 20px;
padding: 18px 24px;
border: none;
cursor: pointer;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.button:hover{
color: #FFF;
text-shadow: 1px 1px 1px black;
background-image: linear-gradient(
to right,
#E7484F,
#E7484F 16.65%,
#F68B1D 16.65%,
#F68B1D 33.3%,
#FCED00 33.3%,
#FCED00 49.95%,
#009E4F 49.95%,
#009E4F 66.6%,
#00AAC3 66.6%,
#00AAC3 83.25%,
#732982 83.25%,
#732982 100%,
#E7484F 100%
);
animation: slidebg 30s linear infinite;
}
.footer {
text-align: center;
padding-top: 2%;
font-size: 0.7rem;
}
@keyframes slidebg {
to {
background-position: 300vw;
}
}