|
@@ -0,0 +1,88 @@
|
|
1
|
+body,html,.row{
|
|
2
|
+ width: 100%;
|
|
3
|
+ height: 80%;
|
|
4
|
+}
|
|
5
|
+
|
|
6
|
+.slider {
|
|
7
|
+ -webkit-appearance: none;
|
|
8
|
+ width: 50%;
|
|
9
|
+ height: 10px;
|
|
10
|
+ outline: none;
|
|
11
|
+ opacity: 0.7;
|
|
12
|
+ -webkit-transition: .2s;
|
|
13
|
+ transition: opacity .2s;
|
|
14
|
+}
|
|
15
|
+
|
|
16
|
+#radio-form{
|
|
17
|
+ height: 0px;
|
|
18
|
+ margin-top: 10%;
|
|
19
|
+}
|
|
20
|
+
|
|
21
|
+.canvas{
|
|
22
|
+ display: flex;
|
|
23
|
+ justify-content: center;
|
|
24
|
+ background-color: black;
|
|
25
|
+ height: 100%;
|
|
26
|
+ margin-top: 1.7%;
|
|
27
|
+}
|
|
28
|
+
|
|
29
|
+.slider:hover {
|
|
30
|
+ opacity: 1;
|
|
31
|
+}
|
|
32
|
+
|
|
33
|
+.radius-span{
|
|
34
|
+ margin-left: 17%;
|
|
35
|
+}
|
|
36
|
+
|
|
37
|
+#radius-paragraph{
|
|
38
|
+ text-align: center;
|
|
39
|
+}
|
|
40
|
+
|
|
41
|
+#clear{
|
|
42
|
+ margin-top: 10%;
|
|
43
|
+ margin-left: 20%;
|
|
44
|
+ width: 50%;
|
|
45
|
+}
|
|
46
|
+
|
|
47
|
+.sidenav {
|
|
48
|
+ height: 100%;
|
|
49
|
+ width: 0px;
|
|
50
|
+ position: fixed;
|
|
51
|
+ z-index: 1;
|
|
52
|
+ /*top: 0;*/
|
|
53
|
+ left: 0;
|
|
54
|
+ background-color: #212529;
|
|
55
|
+ overflow-x: hidden;
|
|
56
|
+ padding-top: 20px;
|
|
57
|
+ transition: 0.5s;
|
|
58
|
+}
|
|
59
|
+
|
|
60
|
+.sidenav a {
|
|
61
|
+ padding: 6px 6px 6px 32px;
|
|
62
|
+ text-decoration: none;
|
|
63
|
+ font-size: 25px;
|
|
64
|
+ color: #818181;
|
|
65
|
+ display: block;
|
|
66
|
+
|
|
67
|
+}
|
|
68
|
+
|
|
69
|
+.sidenav a:hover {
|
|
70
|
+ color: #f1f1f1;
|
|
71
|
+}
|
|
72
|
+
|
|
73
|
+.sidenav .closebtn {
|
|
74
|
+ position: absolute;
|
|
75
|
+ top: 0;
|
|
76
|
+ right: 25px;
|
|
77
|
+ font-size: 36px;
|
|
78
|
+ margin-left: 50px;
|
|
79
|
+}
|
|
80
|
+
|
|
81
|
+.main {
|
|
82
|
+ margin-left: 200px; /* Same as the width of the sidenav */
|
|
83
|
+}
|
|
84
|
+
|
|
85
|
+@media screen and (max-height: 450px) {
|
|
86
|
+ .sidenav {padding-top: 15px;}
|
|
87
|
+ .sidenav a {font-size: 18px;}
|
|
88
|
+}
|