styles.css

@import url("https://fonts.googleapis.com/css2?family=Carter+One&family=Combo&family=Cute+Font&display=swap");

/* Basic Reset */
* {
  font-family: "Carter One", system-ui;
  font-weight: 700;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

/* Container for the app */
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(
      rgba(255, 255, 255, 0.952),
      rgba(255, 255, 255, 0.886)
    ),
    url("https://i.pinimg.com/736x/b7/5a/f4/b75af42c64251fa92fb2cf36ac5d8324.jpg");
  background-size: contain;
  max-width: 600px;
  max-height: 100vh;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow-y: auto; /* Allow vertical scrolling inside the container */
}

/* Scrollbar styling */
.container::-webkit-scrollbar {
  width: 20px;
}
.container::-webkit-scrollbar-track {
  background: #f4f4f4; 
  border-radius: 10px;
  margin:10px;
}
.container::-webkit-scrollbar-thumb {
  background-color: #532e0ac8;
  border-radius: 8px;
  border: 3px solid #f4f4f4;
}

.container > div {
  background-color: #dcce8325;
  height: 100%;
  border-radius: 8px;
  padding: 20px;
}

/* Headings */
h1 {
  margin-bottom: 20px;
  color: #333;
}

/* Form styling */
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

form > div {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Input fields */
input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}

/* Button styling */
button {
  background: #532f0ad0;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;

  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #856018;
}

/* Paragraph styling */
p {
  margin-bottom: 20px;
}

/* Display areas */
#shopping-list-display,
#items-still-to-buy-display {
  padding: 10px;
  background: #c59c667d;
  border-radius: 8px;
  margin-top: 10px;
}

/* image style */
#capybara {
  position: relative;
  bottom: 0px;
  margin: -10px 0;
  width: 100px;
}

#cart {
  position: relative;
  left: -80px;
  bottom: 0px;
  margin: -10px 0;

  width: 100px;
  animation: cart 10s ease-in-out infinite;
}

/* animation */
@keyframes cart {
  0% {
    left: -80px;
  }
  100% {
    left: calc(80% - 100px);
  }
}

@media screen and (max-width: 500px) {
  body {
    height: 100vh;

    margin: 0;
    padding: 0;
  }
}