diff --git a/github-profiles/style.css b/github-profiles/style.css
index b648f88..be962d7 100644
--- a/github-profiles/style.css
+++ b/github-profiles/style.css
@@ -1,113 +1,142 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
 
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 body {
-  background-color: #2a2a72;
-  color: #fff;
-  font-family: 'Poppins', sans-serif;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  overflow: hidden;
-  margin: 0;
+    background-color: rgb(13, 17, 23);
+    color: #fff;
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    overflow: hidden;
+    margin: 0;
 }
-
-.user-form {
-  width: 100%;
-  max-width: 700px;
+.container {
+    padding: 0 10px;
 }
-
 .user-form input {
-  width: 100%;
-  display: block;
-  background-color: #4c2885;
-  border: none;
-  border-radius: 10px;
-  color: #fff;
-  padding: 1rem;
-  margin-bottom: 2rem;
-  font-family: inherit;
-  font-size: 1rem;
-  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
-    0 15px 40px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    display: block;
+    background: #161b22;
+    border: 1px solid rgb(48, 54, 61);
+    border-radius: 10px;
+    color: #fff;
+    padding: 1rem;
+    margin-bottom: 2rem;
+    font-family: inherit;
+    font-size: 1rem;
+    box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
+        0 15px 40px rgba(0, 0, 0, 0.1);
 }
-
 .user-form input::placeholder {
-  color: #bbb;
+    color: #bbb;
 }
 
 .user-form input:focus {
-  outline: none;
+    outline: none;
 }
 
 .card {
-  max-width: 800px;
-  background-color: #4c2885;
-  border-radius: 20px;
-  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
-    0 15px 40px rgba(0, 0, 0, 0.1);
-  display: flex;
-  padding: 3rem;
-  margin: 0 1.5rem;
+    background-color: #161b22;
+    border: 1px solid rgb(48, 54, 61);
+    border-radius: 20px;
+    box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+    padding: 3rem;
 }
 
 .avatar {
-  border-radius: 50%;
-  border: 10px solid #2a2a72;
-  height: 150px;
-  width: 150px;
+    border-radius: 50%;
+    height: 150px;
+    border: 10px solid #7b7b7b59;
 }
 
 .user-info {
-  color: #eee;
-  margin-left: 2rem;
+    color: #eee;
+    margin-left: 2rem;
 }
 
 .user-info h2 {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 .user-info ul {
-  list-style-type: none;
-  display: flex;
-  justify-content: space-between;
-  padding: 0;
-  max-width: 400px;
+    list-style-type: none;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    width: 100%;
 }
 
 .user-info ul li {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
 }
 
 .user-info ul li strong {
-  font-size: 0.9rem;
-  margin-left: 0.5rem;
+    font-size: 0.9rem;
+    margin-left: 0.5rem;
 }
 
 .repo {
-  text-decoration: none;
-  color: #fff;
-  background-color: #212a72;
-  font-size: 0.7rem;
-  padding: 0.25rem 0.5rem;
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
-  display: inline-block;
+    text-decoration: none;
+    color: #fff;
+    background-color: rgb(13,17,23);
+    font-size: 16px;
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    display: inline-block;
 }
-
-@media (max-width: 500px) {
-  .card {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .user-form {
-    max-width: 400px;
-  }
+@media (max-width: 576px) {
+    .container {
+        width: 100%;
+    }
+    .card , .user-form {
+        min-width: 322px;
+    }
+}
+@media (min-width: 576px) {
+    .container {
+        width: 540px;
+    }
+}
+@media (max-width: 768px) {
+    .card {
+        flex-direction: column;
+        align-items: center;
+    }
+    .user-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 0;
+    }
+}
+@media (min-width: 768px) {
+    .container {
+        width: 720px;
+    }
+}
+@media (min-width: 992px) {
+    .container {
+        width: 960px;
+    }
+}
+@media (min-width: 1200px) {
+    .container {
+        width: 1140px;
+    }
+}
+@media (min-width: 1400px) {
+    .container {
+        width: 1320px;
+    }
 }