/* Reset some default styles for consistency */
body, h1, h2, h3, p, ul, ol, li {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif; /* Add a default font family */
  background-color: rgba(255, 255, 255, 0.319); /* Adjust the opacity here */
  background-image: url("currency.jpg"); /* Add your background image file path */
  background-size: cover; /* Scale the background image to cover the container */
  background-repeat: no-repeat; /* Prevent the background image from repeating */

}

/* Make the body a flex container to center its content */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* Ensure the body takes at least the full viewport height */
  margin: 0; /* Reset default margin to 0 */
}

/* Basic styling for the container */
.container {
  max-width: 80%; /* Reduced max-width for more balanced spacing */
  padding: 30px; /* Increased padding */
  border-radius: 10px; /* Increased border radius */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.782); /* Adjust the opacity here */
  text-align: center; /* Center the content horizontally */
  margin: 20px; /* Add margin to the container */
}

/* Style for the input and button */
input[type="number"],
input[type="text"],
button {
  width: 95%;
  padding: 15px; /* Increased padding */
  margin-bottom: 15px; /* Increased margin */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px; /* Increased font size */
  background-color: #f2f2f2; /* Set a background color for inputs */
}

/* Style for the "Çevir" button */
#change {
  background-color:  #0e6c0ee7;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 15px 30px; /* Increased padding */
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#change:hover {
  background-color: #b3b3bce9;
}

/* Responsive adjustments for larger screens */
@media (min-width: 768px) {
  .container {
    max-width: 600px; /* Adjusted max-width for better spacing */
    margin: 0 auto; /* Center the container horizontally */
  }
}

/* Grafik kutusu için özel stil */
.chart-container {
  max-width: 600px;
  margin: 40px auto 0 auto;
  padding: 20px;
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Chart.js canvas responsive olsun */
.chart-container canvas {
  width: 100% !important;
  height: 320px !important;
  display: block;
  margin: 0 auto;
}