/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Raleway&display=swap');

/* General styles */
body {
  font-family: Raleway, sans-serif;
  background-color: #eeeae8;
  color: #222222;
}

header {
  background-color: #08314c;
  padding: 20px;
}

.logo img {
  max-width: 150px;
}

.header-content {
  font-family: Montserrat, sans-serif;
  color: white;
  padding: 20px 0;
}

h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* Form styles */
form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 4px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.description {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #222222;
  border-radius: 4px;
  font-size: 18px;
}

input[type="range"] {
  width: 70%;
}

span[id$="-display"] {
  display: inline-block;
  width: 28%;
  text-align: right;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background-color: #78d9e5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #4bbfc8;
}

/* Output styles */
#output {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f16e64;
  color: white;
  border-radius: 4px;
}

#output span {
  font-weight: bold;
}