* {
      box-sizing: border-box;
      font-family: 'Varela', sans-serif;
    }

    html, body {
      box-sizing: border-box;
      font-family: 'Varela', sans-serif;
    }
    
    input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border:2px solid #555;
      border-radius: 5px;
      resize: vertical;
    }

    input[type=date]{
        width: 100%;
        padding: 12px;
        border:2px solid #555;
        border-radius: 5px;
      }
    
    input[type=month]{
        width: 100%;
        padding: 12px;
        border:2px solid #555;
        border-radius: 5px;
    }

    input[type='checkbox'] {
      -webkit-appearance:none;
      width:20px;
      height:20px;
      background:white;
      border-radius:5px;
      border:2px solid #555;
      margin-top: 15px;
    }
    input[type='checkbox']:checked {
      background: #abd;
    }
    
    label {
      padding: 12px 12px 12px 0;
      display: inline-block;        
    }
    
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border:2px solid #555;
      font-size: large;        
      border-radius: 5px;
      cursor: pointer;
      float: right;
      margin-top: 10px;
    }
    
    input[type=submit]:hover {
      background-color: #45a049;
    }
    
    .container {
      border-radius:5px;
      border:2px solid #555;
      background-color: #f2f2f2;
      padding: 20px;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      margin: 20px auto; /* Centered with margin top and bottom */
      width: 95%; /* Use a percentage of the screen width */
      max-width: 900px; /* Set a max-width for larger screens */
      /* position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); */
    }
    
    .col-25 {
      float: left;
      width: 35%;
      margin-top: 6px;
    }

    .col-25a {
      float: left;
      width: 35%;
      margin-top: 6px;
    }
    
    .col-75 {
      float: left;
      width: 65%;
      margin-top: 6px;
      max-width: 700px;
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .col-25, .col-25a, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;  
      }
    }