adjust color and transition speed

ippisite/ippidb/static/css/main.css

@@ -358,7 +358,7 @@ div.hidden {
 
 .compound_choices {
     position: relative;
-    background: #e3e9eb url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    background: #E3E9EB url(/static/images/Other/cross.png) 50px 100px no-repeat;
     text-align: center;
     height: fit-content;
     box-shadow:  0 3px 11px 0 rgb(0 0 0 / 20%);
@@ -366,30 +366,30 @@ div.hidden {
 
 .compound_background {
     position: relative;
-    background: #e3e9eb url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    background: #E3E9EB url(/static/images/Other/cross.png) 50px 100px no-repeat;
     text-align: center;
     height: fit-content;
 }
 
 .compound_choices:hover{
-    background: #b1b6b8 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    background: #D1DBDE url(/static/images/Other/cross.png) 50px 100px no-repeat;
 }
 
 .pocket_choices {
     position: relative;
-    background: #DCECF2 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    background: #AABDC3 url(/static/images/Other/cross.png) 50px 100px no-repeat;
     text-align: center;
     height: fit-content;
     box-shadow:  0 3px 11px 0 rgb(0 0 0 / 20%);
 }
 
 .pocket_choices:hover {
-    background: #cae6f0 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    background: #97ADB5 url(/static/images/Other/cross.png) 50px 100px no-repeat;
 }
 
 .pocket_background {
     position: relative;
-    background: #DCECF2 url(/static/images/Other/cross.png) 50px 100px no-repeat;
+    background: #AABDC3 url(/static/images/Other/cross.png) 50px 100px no-repeat;
     text-align: center;
     height: fit-content;
 }
@@ -1307,3 +1307,7 @@ div.hidden {
     font-family: "PlayfairDisplayReg";
     font-size: 2em;
 }
+
+.fade {
+    transition: opacity 1s linear;
+  }
\ No newline at end of file