-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
125 lines (107 loc) · 5.66 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
body{
/* background-color: white; */
/* background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1463%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='url(%23SvgjsLinearGradient1464)'%3e%3c/rect%3e%3cpath d='M438.27 327.21 a93.08 93.08 0 1 0 186.16 0 a93.08 93.08 0 1 0 -186.16 0z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M1287.38 871.99L1332.33 871.99L1332.33 916.94L1287.38 916.94z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M961.49 462.39 a27.84 27.84 0 1 0 55.68 0 a27.84 27.84 0 1 0 -55.68 0z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M247.95 470.83L352.64 470.83L352.64 575.52L247.95 575.52z' fill='%23e73635'%3e%3c/path%3e%3cpath d='M72.23 39.01 a60.36 60.36 0 1 0 120.72 0 a60.36 60.36 0 1 0 -120.72 0z' stroke='%23037b0b'%3e%3c/path%3e%3cpath d='M246.9 1024.31 a94.08 94.08 0 1 0 188.16 0 a94.08 94.08 0 1 0 -188.16 0z' stroke='%23e73635'%3e%3c/path%3e%3cpath d='M1245.97 716.89a2.25 2.25 0 1 0-4.34-1.16z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M1169.53 7.8 a89.32 89.32 0 1 0 178.64 0 a89.32 89.32 0 1 0 -178.64 0z' stroke='%23e73635'%3e%3c/path%3e%3cpath d='M820.44 390.5 a100.35 100.35 0 1 0 200.7 0 a100.35 100.35 0 1 0 -200.7 0z' fill='%23e73635'%3e%3c/path%3e%3cpath d='M115.58 1078.26L161.06 1078.26L161.06 1080.62L115.58 1080.62z' stroke='%23037b0b'%3e%3c/path%3e%3cpath d='M1546.73 532.74L1634.35 532.74L1634.35 620.36L1546.73 620.36z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M806.83 1019.03L880.69 1019.03L880.69 1092.89L806.83 1092.89z' fill='%23e73635'%3e%3c/path%3e%3cpath d='M233.56 890.08a95.97 95.97 0 1 0 16.21 191.25z' stroke='%23037b0b'%3e%3c/path%3e%3cpath d='M1070.73 335.37 a96.94 96.94 0 1 0 193.88 0 a96.94 96.94 0 1 0 -193.88 0z' stroke='%23e73635'%3e%3c/path%3e%3cpath d='M605.26 130.24L708.03 130.24L708.03 233.01L605.26 233.01z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M974.67 326.05a25.09 25.09 0 1 0-46.47-18.95z' stroke='%23d3b714'%3e%3c/path%3e%3cpath d='M1346.37 71.63a19.7 19.7 0 1 0-6.53 38.86z' stroke='%23e73635'%3e%3c/path%3e%3cpath d='M1112.65 919.19a104.25 104.25 0 1 0 135.88-158.14z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M1306.16 783.39a21.28 21.28 0 1 0-21.91-36.48z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M559.73 752a4.96 4.96 0 1 0 9.16-3.8z' fill='%23d3b714'%3e%3c/path%3e%3cpath d='M1618.17 583.38L1714.86 583.38L1714.86 629.75L1618.17 629.75z' fill='%23e73635'%3e%3c/path%3e%3cpath d='M422.92 276.72L488.22 276.72L488.22 302.8L422.92 302.8z' fill='%23037b0b'%3e%3c/path%3e%3cpath d='M1889.54 652.35L1995.81 652.35L1995.81 678.07L1889.54 678.07z' fill='%23e73635'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1463'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='10.94%25' y1='-19.44%25' x2='89.06%25' y2='119.44%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1464'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 64%2c 158%2c 0.86)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
font-family: 'Lobster', cursive;
/* display: flex;
justify-content: center;/*left & right
align-items: center; top and down */
}
h1{
text-align: center;
color: rgb(255, 204, 204);
}
/*winner message*/
.winner {
display: hidden;
}
.game-container{
/*display: flex;
justify-content: center;/*left & right*/
/*align-items: center; /*top and down*/
/*font-weight: 30px;*/
display: grid;
grid-template-columns: 75px 75px 75px;
gap: 20px;
justify-content: center;
}
.box{
/*background-color: aqua;*/
text-align: center;
width: 75px;
height: 75px;
font-size: 45px;
box-shadow: 5px 5px 5px black;
cursor: pointer;
animation: col 10s infinite alternate-reverse;
}
.x{
background-color: blue;
text-align: center;
width: 75px;
height: 75px;
font-size: 45px;
box-shadow: 5px 5px 5px black;
cursor: pointer;
}
.o{
background-color: yellow;
text-align: center;
width: 75px;
height: 75px;
font-size: 45px;
box-shadow: 5px 5px 5px black;
cursor: pointer;
}
/*animation*/
@keyframes col {
0% {background-color:red}
50% {background-color:green}
100% {background-color:blue}
}
/*centering the button*/
.button-container{
display: flex;
justify-content: center;
}
/*styling button*/
.button{
cursor: pointer;
visibility: hidden;
}
.input {
padding: 10px 20px;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.input:focus {
outline: none;
}
.round {
transition: 0.3s ease;
border: none;
border-radius: 30px;
}
.roundC {
background-color: rgb(255, 50, 50);
box-shadow: inset 0 0 30px gray;
font-family: 'Lobster', cursive;
}
.roundC:hover {
box-shadow: inset 0 0 10px rgb(128, 128, 128);
color: rgb(0, 0, 0);
background-color: rgb(255, 204, 204);
}
footer{
/* background: url(https://uploads-ssl.webflow.com/5eb2f56932c3562feab232e3/5f73550d00249e7e96c9f3de_Logo.png); */
text-align: center;
color: aliceblue;
position:absolute;
bottom:0;
/* width:100%; */
height:60px; /* Height of the footer */
/* background: rgb(32,35,40);
background: linear-gradient(107deg, rgba(32,35,40,1) 0%, rgba(6,6,6,0.861782212885154) 100%); */
}