Update styling

web/static/styles.css

@@ -1,15 +1,11 @@
 body {
   font-family: 'Helvetica';
-  margin-top: 100px;
-  margin-left: 100px;
-  margin-right: 100px;
+  margin: 100px 100px 0;
   padding: 0;
 }
 
 .header {
-  margin-top: 40px;
-  margin-bottom: 20px;
-  color: #000000;
+  color: #000;
   position: absolute;
   text-align: center;
   top: 40px;
@@ -19,35 +15,31 @@ body {
 
 .container {
   margin-top: 120px;
-  height: auto;
-  top: 100px;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   padding: 20px;
-  position: relative;
   align-items: stretch;
 }
 
+.left-container, .right-container, .dropzone {
+  padding: 20px;
+  box-sizing: border-box; /* Include padding and border in the element's total width and height */
+}
+
 .left-container {
   width: 52%;
-  padding: 20px;
   text-align: center;
-  align-items: center;
-  align-content: center;
 }
 
 .right-container {
-  margin-left:-2px;
   width: 48%;
-  padding: 20px;
-  border: 2px solid #000000;
-  text-align: left;
+  border: 2px solid #000;
 }
 
 .dropzone {
   width: 52%;
   min-height: 500px;
-  border: 2px solid #000000;
+  border: 2px solid #000;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -58,10 +50,9 @@ body {
   max-width: 100%;
   max-height: 200px;
   display: none;
-  align-items: center;
 }
 
-.github-container {
+.github-container, .feature-select {
   display: flex;
   justify-content: center;
   margin-top: 100px;
@@ -69,98 +60,58 @@ body {
 
 .github-container a {
   display: flex;
-  color:#000000;
-  align-items: center;
+  color: #000;
 }
 
-.feature-select {
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-}
-
-/* The container for the predicted images */
 #predicted-images {
   display: grid;
-  row-gap: 1%;
-  column-gap: 1%;
-  width: 100%;
+  gap: 1%;
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, fr);
-  position: relative; /* Set the container as a relative positioning context */
 }
 
-/* The predicted image */
 #predicted-images img {
   width: 100%; 
-  height: auto;
-  display: block; 
-  align-items: center;
+  transition: all 0.3s ease-in-out;
+}
+
+#predicted-images img:hover {
+  filter: brightness(70%);
+  transform: scale(1.07);
 }
 
-/* The tooltip */
 .image-tooltip {
   position: absolute;
-  bottom: 100%; /* Position the tooltip above the image */
-  left: 50%; /* Center the tooltip horizontally */
-  transform: translate(0%, -60%); /* Center both horizontally and vertically */
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -60%);
   background-color: rgba(0, 0, 0, 0.6);
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 10px;
-  padding-bottom: 20px;
+  padding: 10px;
   color: white;
   font-size: 12px;
   pointer-events: none;
-  opacity: 0; /* Initially set the tooltip to be transparent */
-}
-
-/* Apply the hover effect */
-#predicted-images img {
-  /* Set initial transition properties */
-  transition: all 0.3s ease-in-out;
-  transform: scale(1); /* Set the initial scale to 1 (normal size) */
-}
-
-#predicted-images img:hover {
-  filter: brightness(70%);
-  transform: scale(1.07); /* Scale the image up to 1.1 times its original size on hover */
+  opacity: 0;
 }
 
-/* Show the tooltip on image hover */
 #predicted-images .image-container:hover .image-tooltip {
-opacity: 1; /* Make the tooltip visible on image hover */
-visibility: visible; /* Show the tooltip on image hover */
+  opacity: 1;
+  visibility: visible;
 }
 
-/* The caption */
 .image-caption {
   bottom: 0;
   left: 0;
-  width: auto;
-  gap: 0%;
   padding: 10px;
-  align-items: center;
-  text-decoration: none; 
-  font-size: 14px;
   text-align: center;
-  font-weight: normal;
-  pointer-events: none; /* Prevent caption from blocking clicks */
-}
-
-.image-species {
-  opacity: 0;
+  font-size: 14px;
+  pointer-events: none;
 }
 
 #predicted-images a {
   color: #4e4e4e;
-  text-decoration: none; 
-  font-weight: normal;
+  text-decoration: none;
 }
 
-#predicted-images > div > a:hover .image-caption{
-  color: #000000;
-  font-size:  14px;
+#predicted-images > div > a:hover .image-caption {
+  color: #000;
   transition: 0.5s;
 }
-