/* Add CSS styles here */
    body {
      font-family: Arial, sans-serif;
      background-color: whitesmoke;
      color: white;
      font-size: 16px;
      align-items: center;
      text-align: center;
      background-image: url("welcome_bg.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-position-y: 150px;
    }
    .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);
    }
    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: 24px;
    }
    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;
      }
      .btn{
        width: 100%;
        height: 10%;
        font-size: 24px;
        margin-top: 30%;
      }
      body {
      font-family: Arial, sans-serif;
      background-color: deepskyblue;
      color: grey;
      font-size: 12px;
align:center;
      background-image: url("welcome_bg.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-position-y: 270px;
      background-size: 380px;
      background-color: limegreen;
    }
    }