Changed around line 1
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Arial', sans-serif;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+
+ .container {
+ text-align: center;
+ width: 90%;
+ max-width: 600px;
+ }
+
+ .proxy-form {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ align-items: center;
+ }
+
+ .rounded-input {
+ width: 100%;
+ padding: 10px;
+ border: 2px solid #ccc;
+ border-radius: 25px;
+ font-size: 16px;
+ outline: none;
+ transition: border-color 0.3s ease;
+ }
+
+ .rounded-input:focus {
+ border-color: #007bff;
+ }
+
+ #access-button {
+ background-color: #007bff;
+ border: none;
+ border-radius: 50%;
+ width: 60px;
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ #access-button:hover {
+ background-color: #0056b3;
+ }
+
+ #access-button svg {
+ width: 30px;
+ height: 30px;
+ }
+
+ #proxy-frame {
+ width: 100%;
+ height: 80vh;
+ border: none;
+ margin-top: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ @media (max-width: 768px) {
+ .rounded-input {
+ font-size: 14px;
+ }
+
+ #access-button {
+ width: 50px;
+ height: 50px;
+ }
+
+ #access-button svg {
+ width: 25px;
+ height: 25px;
+ }
+ }