From 4467babc3a8adc2631e5b6d3796ca704f5cb9e1b Mon Sep 17 00:00:00 2001
From: madarsbiss <madars.biss@gmail.com>
Date: Sat, 17 Jul 2021 12:51:01 +0300
Subject: [PATCH] add glassmorph

---
 pages/index.js         |  2 +-
 styles/Home.module.css | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 8e949b4..1d56ea9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -37,7 +37,7 @@ export default function Home() {
           <h1 className={styles.mainTemp}>
             {Math.round(weatherData.main.temp)}°
           </h1>
-          <p>Feels like {weatherData.main.feels_like}°</p>
+          <p>Feels like {Math.round(weatherData.main.feels_like)}°</p>
         </>
       )}
       <input
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 6590ae0..a5664c7 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,9 +1,15 @@
 .wrapper {
-  max-width: 1200px;
-  margin: 0 auto;
+  max-width: 800px;
+  margin: 30px auto;
   /* border: 1px solid grey; */
   text-align: center;
   padding: 30px;
+  background: rgba(255, 255, 255, 0.25);
+  box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
 
 .mainTemp {
@@ -14,7 +20,7 @@
   margin-top: 300px;
   height: 40px;
   width: 300px;
-  border-radius: 5px;
+  border-radius: 25px;
   border: 1px solid rgb(209, 209, 252);
 
   color: rgb(224, 237, 241);