styling for screensaver div

static/style.css

@@ -1468,3 +1468,88 @@ input[type=checkbox]:hover {
   }
 }
 
+
+
+#screensaver-div {
+        width: 500px;
+        height: 430px;
+        border-radius:20px;
+/*        background-color: #282828;*/
+        background-color: rgba(5,5,5,0.7);
+        backdrop-filter: blur(6px);
+        border-color: #5D5D5D;
+        border-style: solid;
+        border-width: thin;
+
+        position: fixed; /*Can also be `fixed`*/
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
+        max-width: 100%;
+        max-height: 100%;
+        overflow: auto;
+        z-index:98;
+}
+
+#screensaver-close-btn {
+  background-color: transparent;
+  border: none;
+  color: white;
+  text-decoration: underline;
+  margin-left:42%;
+
+}
+
+#screensaver-close-btn:hover {
+  background-color: transparent;
+  border: none;
+  color: darkgray;
+  text-decoration: underline;
+}
+
+#screensaver-close-btn:active {
+  background-color: transparent;
+  border: none;
+  color: #4B4B4B;
+  text-decoration: underline;
+}
+
+#screensaver-p {
+  font-size:20px;
+  display: inline;
+}
+
+#clock1-p {
+  margin-top: 5%;
+  margin-bottom: 2%;
+}
+
+#clock2-p {
+  margin-top:6%;
+  margin-bottom:2%;
+}
+
+#worldclock-p {
+  margin-top:6%;
+  margin-bottom:2%;
+}
+
+#screensaver-top {
+  margin-top:3%;
+  padding: 5%;
+  padding-top: 1%;
+}
+
+#inside-screensaver-div {
+  margin-left: 5%;
+}
+
+.screensaver-hour-select {
+  display: inline;
+  zoom:1.2;
+}
+
+