Ajuste le responsive design

jitsi-meet/css/custom.css

@@ -15,11 +15,7 @@ body {
 }
 
 .welcome {
-    background-color: #7f9cf5;
+    background: #7f9cf5;
-    background-image: url(images/illustration-visio.png);
-    background-repeat: no-repeat;
-    background-position: bottom right;
-    background-size: 30% auto;
 }
 
 .welcome .welcome-watermark .watermark.leftwatermark {
@@ -27,17 +23,18 @@ body {
     height: 87px;
     max-width: none !important;
     max-height: none !important;
+    top: 20px
 }
 
 .welcome .header {
     background: none;
     align-items: start;
-    padding: 6rem 15rem;
+    padding: 4rem 2rem;
 }
 
 .welcome .welcome-page-settings .jitsi-icon svg {
     border-radius: 3px;
-    padding: 3px;
+    padding: 0.5rem;
     background: #4fd1c5
 }
 
@@ -53,11 +50,13 @@ body {
 
 .welcome .header .header-text {
     width: 100%;
+    max-width: 100%;
+    margin: 6rem 0 2rem 0;
 }
 
 .welcome .header .header-text-title {
     text-align: left;
-    font-size: 2rem;
+    font-size: 1.6rem;
 }
 
 .welcome .header .header-text-subtitle {
@@ -69,10 +68,13 @@ body {
     text-align: left;
     font-size: 1.5rem;
     line-height: 38px;
+    display: none
 }
 
 .welcome .header #enter_room {
-    width: 30%;
+    display: block;
+    width: 100%;
+    max-width: calc(100% - 60px);
     border-radius: 3px;
     background: #e6fffa;
     align-items: end;
@@ -83,6 +85,7 @@ body {
 }
 
 .welcome .header #enter_room .enter-room-input-container .enter-room-title {
+    font-size: 1.2rem;
     margin-bottom: 1rem;
 }
 
@@ -91,14 +94,30 @@ body {
     padding: 1rem
 }
 
+.meetings-list .button {
+    background: transparent;
+    text-decoration: underline;
+}
+
+.meetings-list .button:hover {
+    color: #B2F5EA;
+}
+
 .welcome .welcome-page-button {
     background: #4c51bf;
     border-radius: 9999px;
     padding: 0.5rem 1.3rem;
     text-transform: uppercase;
+    margin-top: 1rem
+}
+
+.welcome .welcome-page-button:hover {
+    background: #5a67d8;
 }
 
 .welcome .header .tab-container {
+    width: 100%;
+    max-width: 710px;
     background-color: transparent;
 }
 
@@ -114,6 +133,19 @@ body {
     padding: 0
 }
 
+.welcome .header .tab-container .tab-buttons .tab {
+    border-radius: 999px;
+    height: 45px;
+    line-height: 45px;
+    margin: 0 1rem;
+    background: #4c51bf;
+}
+
+.welcome .header .tab-container .tab-buttons .tab:hover,
+.welcome .header .tab-container .tab-buttons .tab.selected {
+    background: #5a67d8;
+}
+
 .welcome .welcome-footer {
     padding-left: 200px;
     background: #e6fffa;
@@ -135,12 +167,30 @@ body {
 
 
 @media (min-width: 768px) {
+    .welcome .header .header-text-title {
+        text-align: left;
+        font-size: 2rem;
+    }
+
     .welcome .header .header-text {
         max-width: 730px;
     }
+
+    .welcome .header .header-text-description {
+        display: block
+    }
+
+
 }
 
 @media (min-width: 992px) {
+    .welcome {
+        background-image: url(../images/illustration-visio.png);
+        background-repeat: no-repeat;
+        background-position: bottom right;
+        background-size: 50% auto;
+    }
+
     .welcome .header .header-text {
         max-width: 880px;
     }
@@ -148,25 +198,50 @@ body {
     .welcome .header .header-text-title {
         font-size: 3rem;
     }
+
+    .welcome .header #enter_room {
+        width: 60%;
+        max-width: 650px;
+        display: flex;
+    }
+
+    .welcome .header .tab-container {
+        width: calc(60% + 60px)
+    }
+
+
 }
 
 @media (min-width: 1200px) {
+
+
     .welcome .header .header-text {
         max-width: 1080px;
     }
 
     .welcome .header .header-text-title {
-        font-size: 3.3rem;
+        font-size: 3.2rem;
         max-width: 60rem;
     }
+
+    .welcome .header #enter_room .enter-room-input-container .enter-room-title {
+        font-size: 1.3rem;
+    }
+
 }
 
 @media (min-width: 1400px) {
+
     .welcome {
         background-size: 45% auto;
     }
+
+    .welcome .header {
+        padding: 6rem 15rem;
+    }
+
     .welcome .header .header-text {
         max-width: 1350px;
     }
-    
+
 }