1. html {
2.   font-family: Arial, Helvetica, sans-serif;
3.   display: inline-block;
4.   text-align: center;
5. }
6.  
7. h1 {
8.   font-size: 1.8rem;
9.   color: white;
10. }
11.  
12. p {
13.   font-size: 1.4rem;
14. }
15.  
16. .topnav {
17.   overflow: hidden;
18.   background-color: #0A1128;
19. }
20.  
21. body {  
22.   margin: 0;
23. }
24.  
25. .content {
26.   padding: 5%;
27. }
28.  
29. .card-grid {
30.   max-width: 800px;
31.   margin: 0 auto;
32.   display: grid;
33.   grid-gap: 2rem;
34.   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
35. }
36.  
37. .card {
38.   background-color: white;
39.   box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
40. }
41.  
42. .card-title {
43.   font-size: 1.2rem;
44.   font-weight: bold;
45.   color: #034078
46. }
47.  
48. .switch {
49.   position: relative;
50.   display: inline-block;
51.   width: 120px;
52.   height: 68px
53. }
54. .switch input {
55.   display: none
56. }
57. .slider {
58.   position: absolute;
59.   top: 0;
60.   left: 0;
61.   right: 0;
62.   bottom: 0;
63.   background-color: #ccc;
64.   border-radius: 6px
65. }
66. .slider:before {
67.   position: absolute;
68.   content: "";
69.   height: 52px;
70.   width: 52px;
71.   left: 8px;
72.   bottom: 8px;
73.   background-color: #fff;
74.   -webkit-transition: .4s;
75.   transition: .4s;
76.   border-radius: 3px
77. }
78. input:checked+.slider {
79.   background-color: #b30000
80. }
81. input:checked+.slider:before {
82.   -webkit-transform: translateX(52px);
83.   -ms-transform: translateX(52px);
84.   transform: translateX(52px)
85. }
86. input[type=submit] {
87.   border: none;
88.   color: #FEFCFB;
89.   background-color: #034078;
90.   padding: 15px 15px;
91.   text-align: center;
92.   text-decoration: none;
93.   display: inline-block;
94.   font-size: 16px;
95.   width: 100px;
96.   margin-right: 10px;
97.   border-radius: 4px;
98.   transition-duration: 0.4s;
99.   }
100.  
101. input[type=submit]:hover {
102.   background-color: #1282A2;
103. }
104.  
105. input[type=text], input[type=number], select {
106.   width: 50%;
107.   padding: 12px 20px;
108.   margin: 18px;
109.   display: inline-block;
110.   border: 1px solid #ccc;
111.   border-radius: 4px;
112.   box-sizing: border-box;
113. }
114.  
115. label {
116.   font-size: 1.2rem;
117. }
118. .value{
119.   font-size: 1.2rem;
120.   color: #1282A2;  
121. }
122. .state {
123.   font-size: 1.2rem;
124.   color: #1282A2;
125. }
126. button {
127.   border: none;
128.   color: #FEFCFB;
129.   padding: 15px 32px;
130.   text-align: center;
131.   font-size: 16px;
132.   width: 100px;
133.   border-radius: 4px;
134.   transition-duration: 0.4s;
135. }
136. .button-on {
137.   background-color: #034078;
138. }
139. .button-on:hover {
140.   background-color: #1282A2;
141. }
142. .button-off {
143.   background-color: #858585;
144. }
145. .button-off:hover {
146.   background-color: #252524;
147. }
148.