fixes

Author: Anas-025

static/result.css

@@ -11,14 +11,14 @@ body {
   background: #222;
   text-align: center;
   font-family: "Roboto Mono";
-  padding: 1em;
 }
 
 h1 {
   font-size: 2.2em;
+  text-align: center;
 }
-.results{
-    margin-block: 4rem;
+.results {
+  margin-block: 4rem;
 }
 .flip {
   position: relative;
@@ -35,13 +35,13 @@ h1 {
   position: relative;
 }
 
-.flip > .front ::after{
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-color: rgba(0,0,0,0.3);
-    z-index: -1;
-    border-radius: 10px;
+.flip > .front ::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: -1;
+  border-radius: 10px;
 }
 .flip > .back {
   position: absolute;
@@ -65,20 +65,18 @@ h1 {
   display: inline-block;
   margin-right: 2px;
   margin-bottom: 1em;
-  width: 400px;
+  width: min(95%, 400px);
 }
 .flip > .front,
 .flip > .back {
   display: block;
   color: white;
-  width: inherit;
   background-size: cover !important;
   background-position: center !important;
   height: 220px;
-  padding: 1em 2em;
   background: #313131;
   border-radius: 10px;
-  display: flex!important;
+  display: flex !important;
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -93,16 +91,18 @@ h1 {
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
 }
+.flip > .back p{
+  padding-inline: 1rem;
+}
 
-.back>a{
-    color: rgb(198, 198, 198);
-    margin-top: 1.5rem;
+.back > a {
+  color: rgb(198, 198, 198);
+  margin-top: 1.5rem;
 }
-.back>a:hover{
-    color: rgb(240, 240, 240);
+.back > a:hover {
+  color: rgb(240, 240, 240);
 }
 
-
 .text-shadow {
   text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04),
     3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04),
@@ -116,23 +116,24 @@ h1 {
     19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
 }
 
-
-.grid-container{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    margin-inline: 5%;
-    gap: 1rem;
-    place-items: center;
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+  place-items: center;
 }
 
-@media only screen and (max-width: 1500px){
-  .grid-container{
+@media only screen and (max-width: 1500px) {
+  .grid-container {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@media only screen and (max-width: 930px){
-  .grid-container{
-    grid-template-columns: 1fr!important;
+@media only screen and (max-width: 930px) {
+  .grid-container {
+    grid-template-columns: 1fr !important;
   }
-}
+  .flip > .front> h1{
+    font-size: 1.8rem;
+  }
+}