body {
       font-family: 'Inter', sans-serif;
       background-color: #f4f4f4;
       margin: 0;
       padding: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       background-image: linear-gradient(to right,
               rgba(26, 188, 156, 0.9),
               rgba(17, 69, 105, 0.9)),

           url('https://images.unsplash.com/photo-1546453667-8a8d2d07bc20?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');
   }

   .log {
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;

   }

   .instr {
       font-size: 16px;
       text-align: center;
       color: #fff;
       line-height: 1.5;
   }

   form {
       background: #fff;
       padding: 20px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       width: 300px;
   }

   label {
       display: block;
       margin-bottom: 10px;
   }

   input[type="text"],
   input[type="password"],
   input[type="submit"] {
       width: 100%;
       padding: 8px;
       box-sizing: border-box;
       margin-bottom: 20px;
       border: 1px solid #ccc;
       border-radius: 4px;
   }

   input[type="submit"] {
       background-color: #196f7c;
       color: #fff;
       cursor: pointer;
   }

   input[type="submit"]:hover {
       background-color: #199488;
   }