make index.php & score.php more responsive

public_html/css/style.css

@@ -3,10 +3,6 @@
   margin: 0;
 }
 
-body{
-  overflow: hidden;
-}
-
 body{
   background-color: rgb(37, 37, 37);
 }
@@ -16,6 +12,13 @@ body{
 
 }
 
+.ButtonDayNight{
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  width: 100px;
+}
+
 
 
 @media only screen and ( orientation: portrait ) {
@@ -44,6 +47,13 @@ body{
       padding: 7%;
       text-decoration: none;
     }
+
+    .ButtonDayNight{
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 15%;
+  }
 }
 
 @media only screen and ( orientation: landscape) {

public_html/css/style_score.css

@@ -1,3 +1,7 @@
+body{
+    overflow: hidden;
+}
+
 #main_container{
     display: flex;
     overflow: hidden;
@@ -6,7 +10,7 @@
 #content{
     float: right;
     width: 74%;
-    height: 100%;
+    height: fit-content;
     overflow: hidden;
 }
 
@@ -32,13 +36,6 @@
     align-self: center;
 }
 
-.ButtonDayNight{
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    width: 100px;
-}
-
 #phase p{
     width: 50%;
 }
@@ -61,6 +58,7 @@ hr{
 /* BRACKET section --------------------------------------------------------------------------------------------------------- */
 
 #bracket{
+    height: max-content;
     display: flex;
     flex-direction: row;
     padding: 20px 0 0 0;
@@ -179,6 +177,10 @@ hr{
     display:none;
 }
 
+.no-margin{
+    margin-bottom: 15px !important;
+}
+
 /* POULES SECTION ------------------------------------------------------------------------------------------------ */
 
 #poules{
@@ -190,7 +192,7 @@ hr{
 
 table{
     color: white;
-    font-size: 20px;
+    font-size: 1vw;
 }
 
 table th, table td{
@@ -200,7 +202,7 @@ table th, table td{
     text-align: center;
 }
 
-@media (max-width: 1525px) {
+@media (max-width: 1250px) {
     #bracket {
       overflow-x: scroll;
       justify-content:flex-start;
@@ -225,7 +227,7 @@ table th, table td{
         width: 15%;
     }
 
-    @media (max-height: 725px) {
+    @media (max-height: 775px) {
         body {
           overflow-y: scroll;
         }
@@ -241,18 +243,6 @@ table th, table td{
     }
 }
 
-@media (max-width: 1200px) {
-    table {
-        font-size: 15px;
-    }
-}
-
-@media (max-width: 700px) {
-    table {
-        font-size: 10px;
-    }
-}
-
 @media (max-width: 600px) {
     table th, table td{
         min-width: 35px;

score.php

@@ -106,7 +106,11 @@
 
                         <?php
                             for($i = 0; $i < 4; $i++){
-                                echo "<div class=\"match\">";
+                                echo "<div class=\"match";
+                                if($i == 3){
+                                    echo " no-margin";
+                                }
+                                echo "\">";
                                 if(sizeof($matchs_quarters) >= $i + 1){
                                     $team1;
                                     $team2;
@@ -161,7 +165,7 @@
 
                     <div class="braces">
                         <img src="public_html/img/brace.png" alt="Brace" class="brace quarters-brace">
-                        <img src="public_html/img/brace.png" alt="Brace" class="brace quarters-brace">
+                        <img src="public_html/img/brace.png" alt="Brace" class="brace quarters-brace no-margin">
                     </div>
 
                     <?php } ?>
@@ -171,7 +175,11 @@
                         
                         <?php
                             for($i = 0; $i < 2; $i++){
-                                echo "<div class=\"match\">";
+                                echo "<div class=\"match";
+                                if($i == 1){
+                                    echo " no-margin";
+                                }
+                                echo "\">";
                                 if(sizeof($matchs_semis) >= $i + 1){
                                     $team1;
                                     $team2;