make it responsive

1 files changed, 148 insertions, 119 deletions

diff --git a/styles/main.css b/styles/main.css
index d2f0344..017154f 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,186 +1,215 @@
 *{
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
-::-webkit-scrollbar-track
-{
-    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	
-	background-color: #555;
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  background-color: #555;
 }
 
-::-webkit-scrollbar
-{
-	width: 12px;
-	background-color: #555;
+::-webkit-scrollbar {
+  width: 12px;
+  background-color: #555;
 }
 
-::-webkit-scrollbar-thumb
-{
+::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-	background-color: rgb(129, 129, 129);
+  background-color: rgb(129, 129, 129);
 }
-.white{
-  color:rgb(238, 238, 238);
+
+.white {
+  color: rgb(238, 238, 238);
 }
-.blue{
-  color:#9CEAF3;
+
+.blue {
+  color: #9CEAF3;
 }
-a{
+
+a {
   text-decoration: none;
   color: rgb(238, 238, 238);
 }
-body{
-  background-color:#393A59;
 
+body {
+  background-color: #393A59;
   height: 100vh;
   font-family: 'Fira Code', monospace;
-  display:flex;
+  display: flex;
   align-items: center;
   justify-content: center;
 }
-.container{
-  display:flex;
+
+.container {
+  display: flex;
   flex-direction: column;
-  width:100%;
-  max-width:800px;
-  height:900px;
+  width: 100%;
+  max-width: 800px;
+  height: 100vh;
   overflow: hidden;
   border-radius: 6px;
   border: 1px solid gray;
-  margin:20px;
+  margin: 20px;
   cursor: text;
 }
-.menu{
-  display:flex;
-  align-items: center;
 
+.menu {
+  display: flex;
+  align-items: center;
   text-align: center;
   flex-direction: row;
   width: 100%;
   height: 24px;
   background-color: #424040;
   padding: 0 8px;
-  cursor:default;
-}
-.menu .button{
-  width:12px;
-  height:12px;
-  border-radius:50%;
-  margin-right:8px;
-  cursor:pointer;
-}
-.red{background-color:#F5544D;}
-.yellow{background-color:#FABD2F;}
-.green{background-color:#47D043;}
-div.title{
-  flex:1;
-  text-align:center;
-}
-.menu h1{
-  font-size:13px;
-  color:#9c9c9c;
-
-}
-.buttons-flex{
-  position: absolute;
-  display:flex;
+  cursor: default;
+}
+
+.menu .button {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.red {
+  background-color: #F5544D;
+}
+
+.yellow {
+  background-color: #FABD2F;
+}
+
+.green {
+  background-color: #47D043;
+}
+
+div.title {
+  flex: 1;
+  text-align: center;
+}
+
+.menu h1 {
+  font-size: 13px;
+  color: #9c9c9c;
+}
+
+.buttons-flex {
+  display: flex;
   flex-direction: row;
 }
-@media (max-width:500px){
-  .buttons-flex{
-    position: unset;
-    display:flex;
-    flex-direction: row;
+
+@media (max-width: 800px) {
+  .container {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+}
+
+@media (max-width: 500px) {
+  .buttons-flex {
+    display: block;
+    margin: 10px auto;
+  }
+
+  .menu h1 {
+    font-size: 10px;
   }
 }
-@media (max-width:330px){
-  .menu h1{
-    display:none;
+
+@media (max-width: 330px) {
+  .menu h1 {
+    display: none;
   }
 }
-#app{
-  display:flex;
+
+#app {
+  display: flex;
   flex-direction: column;
-  background-color:#282A35;
-  width:100%;
-  height:100%;
-  padding:8px;
+  background-color: #282A35;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
   overflow: auto;
 }
-p{
-  font-size:16px;
-  color:rgb(238, 238, 238);
-  padding:8px 0;
+
+p {
+  font-size: 16px;
+  color: rgb(238, 238, 238);
+  padding: 8px 0;
 }
-h2{
-  font-size:16px;
-  color:rgb(238, 238, 238);
+
+h2 {
+  font-size: 16px;
+  color: rgb(238, 238, 238);
 }
-p.code a{
-  color:#66C2CD;
-  margin-left:8px;
+
+p.code a {
+  color: #66C2CD;
+  margin-left: 8px;
 }
-span.text{
-  margin-left:16px;
-  color:white;
+
+span.text {
+  margin-left: 16px;
+  color: white;
 }
-p.path{
-  color:#F7FCA0;
+
+p.path {
+  color: #F7FCA0;
   padding-bottom: 0;
 }
-p.path span{
-  color:#9CEAF3;
+
+p.path span {
+  color: #9CEAF3;
 }
-{{/* p.path span + span{
-  color:#9CEAF3;
-} */}}
 
-.sucess{
-  color:#5AD786;
+.sucess {
+  color: #5AD786;
 }
-.error{
-  color:#F78F85;
+
+.error {
+  color: #F78F85;
 }
-p.response{
-  color:rgb(238, 238, 238);
+
+p.response {
+  color: rgb(238, 238, 238);
 }
 
-input{
-  border:none;
+input {
+  border: none;
   background-color: unset;
-  color:rgb(238, 238, 238);
-  width:100%;
-  font-size:16px;
+  color: rgb(238, 238, 238);
+  width: 100%;
+  font-size: 16px;
   font-family: 'Fira Code', monospace;
 }
-input:focus{
-  border:none;
+
+input:focus {
+  border: none;
   outline: none;
   box-shadow: none;
   background-color: unset;
-  
 }
-.type{
-  display:flex;
+
+.type, .type2 {
+  display: flex;
   align-items: center;
-  padding-top: 0;
-  padding-bottom: 8px;
+  padding-top: 2px;
+  padding-bottom: 0px;
 }
-.type2{
-  display:flex;
-  align-items: center;
-  padding: 0;
+
+.icone {
+  color: #5AD786;
+  padding-right: 8px;
 }
-.icone{
-  color:#5AD786;
-  padding-right:8px;
+
+.icone.error {
+  color: #F78F85;
 }
 
-.icone.error{
-  color:#F78F85;
+.type2 h2 {
+  min-height: 21px;
 }
\ No newline at end of file