improved design and made responsive

src/styles/main.scss

@@ -34,9 +34,9 @@ main {
   flex-direction: column;
   position: relative;
   align-self: center;
-  background-color: $highlight-primary;
+  background-color: $highlight;
   border-radius: 25px;
-  border: 1px solid lighten($highlight-primary, 12%);
+  border: 1px solid lighten($highlight, 12%);
   box-shadow: 0px 4px 4px 0px #00000040;
   padding: 2vw;
   width: 65vw;
@@ -84,10 +84,6 @@ a {
     mask: $external_svg no-repeat center;
     background-color: $link; // This will color the SVG
   }
-  &.social::after {
-    content: none;
-    display: unset;
-  }
 }
 
 figure {
@@ -120,13 +116,15 @@ figure {
       }
     }
   }
-  position: relative;
-  overflow: scroll;
-  display: grid;
-  margin: 0;
-  max-width: 50vw;
-  background-color: #282a36;
-  border-radius: 20px;
+  & {
+    position: relative;
+    overflow: scroll;
+    display: grid;
+    margin: 0;
+    max-width: 50vw;
+    background-color: #282a36;
+    border-radius: 20px;
+  }
   .frame.is-terminal .header::before {
     background-color: gray !important;
   }
@@ -161,8 +159,7 @@ button {
   $button-color: #42b971;
   padding-block: 10px;
   padding-inline: 20px;
-  margin: 10px;
-  border-radius: 25px;
+  border-radius: 50px;
   font-family: "Satoshi-Bold";
   background-color: $button-color;
   border: 1px solid lighten($button-color, 12%);
@@ -179,4 +176,10 @@ button {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+@media (max-width: $responsive-width) {
+  .content{
+    min-width: 65vw !important;
+  }
 }