*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 16px; /* base size for desktop */
  font-weight: 600;
  background-color: #f5eae3;
  margin: 0 40px;
}

section {
  margin-bottom: 100px;
}

header,
.input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-area {
  gap: 10px; /* Ensures some spacing between elements */
}

.input-area input,
.input-area select,
.input-area button {
  padding: 8px;
  margin: 5px;
}

.input-area button {
  width: 120px;
  height: 40px;
  background-color: #234272;
}

#conversionResult {
  font-size: 2.5em;
  font-weight: bold;
}

button {
  background-color: #a6427c;
  color: white;
  border: none;
  font-size: 1em;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9);
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on large screens */
  gap: 20px;
  justify-content: center; /* Center grid items */
  width: 80%; /* Adjustable based on preference */
  margin: 0 auto; /* Center the grid horizontally */
}

.buttons button {
  width: 200px;
  height: 50px;
  font-size: 1.2em;
  margin-right: 10px;
}

.dropdown-menu {
  display: flex;
  justify-content: center;
}

.material-icons {
  position: absolute;
  padding: 12px;
}

/* Dropdown Button */
.dropbtn {
  background-color: #234272;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
  background-color: #305285;
}

/* The search field */
#myInput {
  box-sizing: border-box;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
  padding-left: 48px; /* Make room for the icon inside the input box */
}

/* The search field when it gets focus/clicked on */
#myInput:focus {
  outline: 3px solid #ddd;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
  overflow: hidden;
}

.dropdown.show .dropdown-content {
  display: block;
  max-height: 500px; /* adjust based on your content size */
}

/* Links inside the dropdown */
.dropdown-content p {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content p:hover {
  background-color: #dfdfdf;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

footer {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #234272;
  color: #f2f2f2; /* Example background color */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
}

.footer-content > p,
.footer-content > .social-wrapper {
  flex: 1; /* Distributes space evenly */
  text-align: center; /* Centers the content */
  margin: 5px; /* Adds a little space around each section */
}

.email-link {
  color: white; /* Sets the text color to white */
  text-decoration: none; /* Removes the underline from the link */
}

.email-link:hover,
.email-link:focus {
  text-decoration: underline; /* Adds underline on hover for better usability */
}

.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.social-links li {
  margin: 0 10px; /* Space between icons */
}

.social-links a {
  display: block;
}

.social-links img {
  width: 24px; /* Fixed size for social icons */
  height: auto;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column; /* Stacks the content vertically on small screens */
  }

  .social-links {
    margin-top: 10px; /* Adds space between email and social links on small screens */
  }
}

@media (max-width: 800px) {
  .buttons {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (max-width: 500px) {
  .buttons {
    grid-template-columns: repeat(1, 1fr); /* 1 column on small screens */
  }
}

@media (max-width: 800px) {
  body {
    font-size: 14px; /* slightly smaller for tablets */
  }
}

@media (max-width: 500px) {
  body {
    font-size: 12px; /* even smaller for phones */
  }
}