dice_rolling/index.css at main · Arindom-Das/dice_rolling · GitHub

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
/* Reset default margin and padding for all elements */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* Set background color and text color for the entire page */
body {
   background-color: #f0f0f0;
   color: #333;
   font-family: Arial, Helvetica, sans-serif;
}

/* Center the game container */
#container {

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   height: 100vh;
   color: rgb(239, 140, 227);
}

/* Styling for loading animation */
#loading {
   display: block;

   margin: 100px;
   width: 110px;
   height: 110px;

   border: 12px solid rgb(239, 140, 227);
   border-bottom-color: transparent;
   border-radius: 99%;
   display: none; /* Initially hidden */
   animation: rotation 1s linear infinite;
}

@keyframes rotation {
   0% {

       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

/* Styling for the dice and number */
#dice {
   box-shadow: rgba(0, 0, 0, 0.15) 14px 10px 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 30vh;
   border-radius: 2mm;
   height: 10cm;
   background-color:rgb(9, 63, 210);
   margin-top: 20px;
}

#number {
   font-size: 5cm;
   font-family: Arial, Helvetica, sans-serif;
}

/* Styling for the buttons */
#buttons {
   display: fixed;
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
}

button {
   font-family:'Courier New', Courier, monospace;
   font-size: 1.5rem;
   padding: 10px 20px;
   border-radius: 2mm;
   color: rgba(172, 17, 17, 0.906);
   box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 6px;
   border: none;
   cursor: pointer;
}

button#rollButton {
   background-color: #2ecc71;
   color: white;
}

button#rollButton:hover {
   background-color: white;
   color: #2ecc71;
   box-shadow: rgba(0, 0, 0, 0.377) 0px 3px 6px;
}

button#resetButton {
   background-color: #e74c3c;
   color: white;
}

button#resetButton:hover {
   background-color: white;
   color: #e74c3c;
   box-shadow: rgba(0, 0, 0, 0.377) 0px 3px 6px;
}