body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background: #000;
  color: #333;
  overflow-x: hidden;
}

/* Background container */
.background-animation {
  position: fixed; /* Fixed so it stays in the background */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent shapes from escaping */
  z-index: -1; /* Keep it behind all content */
  background: linear-gradient(120deg, #1e90ff, #ffd700);
  background-size: 300% 300%;
  animation: gradientShift 8s infinite ease-in-out;
}

/* Keyframes for background gradient animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Shape styles */
.shape {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 50%; /* Spherical shapes */
  animation: moveShape 10s infinite ease-in-out;
  opacity: 0.8; /* Make them slightly transparent */
}

/* Vary size for each shape */
.shape.large {
  width: 100px;
  height: 100px;
}

.shape.small {
  width: 30px;
  height: 30px;
}

/* Keyframes for shape movement */
@keyframes moveShape {
  0% {
    transform: translate(10vw, 10vh) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(80vw, -10vh) scale(1.2) rotate(90deg);
  }
  50% {
    transform: translate(50vw, 80vh) scale(0.8) rotate(180deg);
  }
  75% {
    transform: translate(-10vw, 50vh) scale(1.1) rotate(270deg);
  }
  100% {
    transform: translate(10vw, 10vh) scale(1) rotate(360deg);
  }
}


/* Adjust logo size */
.logo {
  position: relative;
  width: 30px; /* Adjust the width as needed */
  height: auto; /* Maintain the aspect ratio */
  object-fit: contain; /* Ensure it fits nicely within its bounds */
  margin: 0 auto; /* Center the logo */
  display: block; /* Ensure proper centering */
}

/* Center the header content */
header {
  text-align: center;
  padding: 20px 0;
  margin: 0 auto;
}

/* Center the social links */
.social-links {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.social-links a {
  color: #000; /* Icon color */
  margin: 0 10px; /* Space between icons */
  text-decoration: none;
  transition: color 0.3s ease; /* Smooth hover effect */
}

.social-links a:hover {
  color: #007bff; /* Change color on hover */
}

header img.logo {
  display: block;
  margin: 0 auto;
  width: 80px; /* Adjust logo size */
  height: auto; /* Maintain aspect ratio */
}




@keyframes floating {
  0% {
    transform: scale(1.2);
    filter: blur(2px);
  }
  100% {
    transform: scale(1);
    filter: blur(0);
  }
}

.card {
  border-radius: 15px; /* Adjust this value for more or less rounding */
}

.card-header {
  
  border-radius: 10px 10px 0 0;
}

.card-footer {
  border-radius: 0 0 10px 10px;
}

.alert {
  font-size: 1.2rem;
}

.animate-button {
  transition: transform 0.2s ease-in-out;
}

.animate-button:hover {
  transform: scale(1.1);
}
#costChart {
  max-width: 100%;
  height: auto;
}

.table {
  font-size: 0.9rem; /* Make the text smaller to fit better */
}

/* Round the corners of the result and history tables */


.card, .btn, .alert, .table {
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
}