/* Add CSS styles here */
  body { font-family: Arial, sans-serif; 
    color: white; font-size: 16px; 
    align-items: center; text-align: center; 
    background: radial-gradient(circle at center, #1e3c72, #2a5298);

  }

    .container {
      padding-top: 100px;
      width: 20%;
      margin: auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    .company_logo{
      float: center;
      margin-top: 10px;
    }
    .company_logo img {
    max-width: 50%;
    max-height: 50%;
    border-radius: 15px;
  }

    input[type=text], input[type=password] {
      width: 100px;
      padding: 10px;
      margin: 5px 0;
      border: none;
      border-radius: 5px;
      background-color: #f2f2f2;
      font-family: sans-serif;
    }
    h2{
        color: lightblue;
    }
    .btn{
      width: 15%;
    }
    .btn{
      width: 30%;
      height: 50px;
      font-size: 20px;
      color:black;
      border-radius: 20px 8px 20px 8px;
      cursor: pointer;
      border: none;
      box-shadow: 0.3px 0.3px 0.3px;
      transition-duration: 0.3s;
      transition-delay: 0.3s;
    }
    .btn:hover{
      width: 30.2%;
      height: 50px;
      color:darkgrey;
      font-size: 20px;
      border-radius: 8px 20px 8px 20px;
      cursor: pointer;
      box-shadow: 0.3px 0.3px 0.3px;
      transition-duration: 0.3s;
      transition-delay: 0.3s;
      transition-behavior: aaf;
      background-color:aqua;
    }
    input[type=submit], input[type=button] {
      color: white;
      padding: 4px 4px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition-duration: 0.4s;
      width: 200px;
      background-color: skyblue;
    }
    input[type=submit]:hover, input[type=button]:hover {
      background-color: skyblue;
      box-shadow: 0.3px 0.3px 0.3px;
      transition-duration: 0.4s;
      background-color: lightblue;

    }
  
    @media only screen and (max-width: 600px) {
      .container {
        padding: 10px;
      }
    
      body {
      font-family: Arial, sans-serif;
      background-color: deepskyblue;
      color: grey;
      font-size: 12px;
      align:center;
      background: radial-gradient(circle at center, #1e3c72, #2a5298);
    }
    .btn{
      width: 50%;
      height: 50px;
      font-size: 18px;
      color:black;
      border-radius: 20px 8px 20px 8px;
      cursor: pointer;
      border: none;
      box-shadow: 0.3px 0.3px 0.3px;
      transition-duration: 0.3s;
      transition-delay: 0.3s;
    }
    .btn:hover{
      width: 50%;
      height: 50px;
      color:grey;
      font-size: 18px;
      border-radius: 8px 20px 8px 20px;
      cursor: pointer;
      box-shadow: 0.3px 0.3px 0.3px;
      transition-duration: 0.3s;
      transition-delay: 0.3s;
      transition-behavior: aaf;
      background-color:aqua;
    }
    }