fix box

Author: PhantomGamingdevelopment

style.css

@@ -122,3 +122,131 @@ button:hover {
 }
 
 
+/*make site responsive for mobile u 600px*/
+
+
+@media screen and (max-width: 600px) {
+    body {
+
+
+      body{
+        background-color: #121212;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-family: 'Open sans';
+    }
+    
+    .title{
+        display: flex;
+        flex-direction: row;
+    }
+
+    .container{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 60%;
+        width: 60%;
+        background-color: #1F1B24;
+        border-radius: 4vw;
+        padding: 4vw;
+        margin: 8px;
+    }
+    
+    #link{
+        background-color: #211b24;
+        border: 1px solid gray;
+        border-radius: 8px;
+        color: white;
+        padding: 8vw;
+        margin: 8px;
+        width: 60%;
+        text-align: center;
+        font-size: 4vw;
+    }
+    
+    #qualityselector{
+        display: none;
+    }
+    
+    #download-btn{
+        background-color: #211b24;
+        border-radius: 8px;
+        color: white;
+        padding: 8vw;
+        margin: 8px;
+        width: 60%;
+        text-align: center;
+        font-size: 4vw;
+    }
+    
+    #error-message{
+        background-color: #f54242;
+        border-radius: 8px;
+        color: black;
+        padding: 3vw;
+        margin: 8px;
+        width: 60%;
+        text-align: center;
+        font-size: 4vw;
+    }
+    
+    input[type="text"] {
+        width: 80%;
+        padding: 2vw;
+        margin-bottom: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+    }
+    
+    button {
+        padding: 10px 20px;
+        background-color: #6c5ce7;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+    
+    button:hover {
+        background-color: #a296fc;
+    }
+    
+    #message {
+        margin-top: 10px;
+    }
+    
+    #progress {
+        width: 80%;
+        margin: 20px auto;
+        padding: 5vw;
+        background-color: #f3f3f3;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        position: relative;
+        height: 20px;
+    }
+    
+    #progress-bar {
+        height: 100%;
+        width: 0;
+        background-color: #00ff26;
+        border-radius: 5px;
+        transition: width 0.2s;
+    }
+
+
+
+    @font-face {
+        font-family: 'Open sans';
+        src: url('fonts/Open\ sans/OpenSans-Regular.ttf');
+    }
+
+    }
+  }
+
+