Quiz/game.css at master · maulikaluthra/Quiz · 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
.choice-container {
	display: flex;
	margin: 0 auto;
	margin-bottom: 0.8rem;
	width: 75%;
	font-size: 1.8rem;
	border: 0.1rem solid #cecece;
	/*background-color: #40E0D0;*/
}

.choice-container:hover {
	cursor: pointer;
	box-shadow: 0 0.4rem 0.4rem 0 rgba(189, 245, 239, 0.5);
	transform: translateX(0.1rem);
	transition: transform 150ms;
}

.choice-prefix{
	padding: 1.5rem 2.5rem;
	background-color: #40E0D0;
	color: #fff;
}

.choice-text{
	padding: 1.5rem;
	width:  100%;
}

.question {
	padding: 0 12.5%;
}

.correct {
	background-color: #28a745;
}

.incorrect {
	background-color: #dc3545;
}

/*HUD*/

#hud {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 5rem;
	}

.hud-prefix {
	text-align: center;
	font-size: 2rem;
}

.hud-main-text {
	text-align: center;
}

#progress-bar {
	width : 15rem;
	height : 3rem;
	border : 0.3rem solid #40E0D0;
}

#progress-bar-full  {
	height: 2.4rem;
	background-color: #40E0D0;
	width : 0%;
}

#loader {
	border :  0.8rem solid white;
	border-radius: 50%;
	border-top : 0.8rem solid #40E0D0;
	width : 9rem;
	height :  9rem;
	animation: spin 2s linear infinite;
}

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

@media (max-width: 500px) {
	.question {
		font-size: 15px;
	}

	.choice-container {
		height : 3.5rem; }
}