<!DOCTYPE html>
<html lang="sv">

<head>
  <style>
    body {
  font-family: Arial, sans-serif;
  padding: 30px;
  background-color: #f4f4f4;
}

.section-container {
  display: flex;
  justify-content: center; /* Center the sections horizontally */
}

.section {
  width: 45%;
  margin: 10px;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center; /* Center the section titles */
  border-bottom: 2px solid #333; /* Add a border line at the bottom of the section titles */
  padding-bottom: 10px;
}


    label {
      font-weight: bold;
      display: inline-block; /* Changed to inline-block for side-by-side layout */
      margin-right: 10px; /* Added margin for spacing */
      color: #333; /* Adjusted text color for better contrast */
    }

    select {
      margin-top: 5px; /* Reduced margin */
      width: 120px; /* Reduced width */
      padding: 8px 10px; /* Reduced padding */
      border-radius: 8px; /* Increased border radius */
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #390051;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px; /* Added missing padding value */
      cursor: pointer;
      font-size: 14px; /* Reduced font size */
      transition: background-color 0.3s ease-in-out;
      background-position: center; /* Added background position for gradient */
      background-image: linear-gradient(to right, #390051 0%, #390051 100%); /* Added background gradient */
    }

    input[type="submit"]:hover {
      /* Remove hover effect as gradient provides visual interest */
    }

    #result {
      margin-top: 30px;
      font-size: 1.2em; /* Reduced font size */
      font-weight: bold;
      text-align: center;
      color: #333; /* Adjusted text color for better contrast */
    }

    .result {
      color: #f00; /* Changed red to bright red */
    }
    
    /* CSS for layout */
    .section-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px; /* Add some margin between sections */
    }

    .section {
      flex-basis: calc(50% - 15px); /* Adjust width of each section */
    }
  </style>
</head>
