From 2178fffda6d313ac0e84d91c3eebb9bc6f91db20 Mon Sep 17 00:00:00 2001
From: Francisco P <franpessano1@gmail.com>
Date: Sun, 23 May 2021 20:33:34 -0300
Subject: [PATCH] Responsive Design aplicado

---
 style.css  | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 visits.txt |  2 +-
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index d048421..952d12f 100644
--- a/style.css
+++ b/style.css
@@ -57,6 +57,7 @@ h2 {
 
 .visits {
     padding-top: 40px;
+    font-size: 18pt;
 }
 
 .amount {
@@ -70,6 +71,45 @@ h2 {
     color: #ff5555;
 }
 
+
+@media (min-width: 0) and (max-width: 1758px) {
+    .blue-circle {
+        /* */
+        position: relative;
+        top: 50%;
+        left: 50%;
+        margin: -125px 0 0 -125px; /* Half of the width*/
+        /* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
+        /* */
+
+        width: 250px;
+        height: 250px;
+    }
+
+    .gray-rectangle {
+        width: 40%;
+        height: 40%;
+        background-color: #C4C4C4;
+    }
+
+    .visits {
+        padding-top: 20px;
+        font-size: 9pt;
+    }
+
+    .amount {
+        padding-top: 10px;
+        font-size: 12pt;
+    }
+    
+    .alert {
+        padding-top: 10px;
+        font-size: 17pt;
+        color: #ff5555;
+    }
+}
+
+
 a {
     text-decoration: none;
     color: inherit;
@@ -134,4 +174,46 @@ button:active {
     -moz-transition: none;
     -ms-transition: none;
     -o-transition: none;
+}
+
+@media (min-width: 0) and (max-width: 1758px) {
+    a {
+        display: flex;
+        position: relative;
+        top: -13%;
+        justify-content: center;
+    }
+
+    button {
+        position: initial;
+        top: 0;
+        left: 0;
+        margin: 0;
+        box-shadow: none;
+        background-color: white;
+        color: #286cff;
+    }
+    button:hover {
+        background-color: none;
+        color: none;
+        box-shadow: none;
+        transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
+        -webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
+        -moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
+        -ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
+        -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
+    }
+    
+    button:active {
+        transition: none;
+        transform: translate(0px, 5px);
+        -webkit-transform: translate(0px, 5px);
+        -moz-transform: translate(0px, 5px);
+        -ms-transform: translate(0px, 5px);
+        -o-transform: translate(0px, 5px);
+        -webkit-transition: none;
+        -moz-transition: none;
+        -ms-transition: none;
+        -o-transition: none;
+}
 }
\ No newline at end of file
diff --git a/visits.txt b/visits.txt
index 3b7560b..99f9f07 100644
--- a/visits.txt
+++ b/visits.txt
@@ -1 +1 @@
-445
\ No newline at end of file
+502
\ No newline at end of file