/* SCSS Project: Main File */
/* Importing Partials */
/* Variables */
/* Mixins */
/* Placeholders */
main {
  justify-content: center;
  align-items: center;
}

/* Global Styles */
body {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin-bottom: 10px;
  font-family: "Arial", sans-serif;
}

/* Forms */
input {
  padding: 10px;
  border: 1px solid #6c757d;
}
input:focus {
  border-color: #28a745;
  transition: border-color 0.3s ease;
}
input:valid {
  border-color: #28a745;
}
input:invalid {
  border-color: #dc3545;
}

/* Layout */
main {
  margin-block: 12px;
  padding-inline: 10px;
}

/* Media Queries */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
/* Buttons */
.btn-primary {
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
}
.btn-primary:hover {
  background-color: #0062cc;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border-radius: 5px;
}
.btn-secondary:hover {
  background-color: #545b62;
}

.btn-success {
  background-color: #28a745;
  color: #fff;
  border-radius: 5px;
}
.btn-success:hover {
  background-color: #1e7e34;
}

.btn-error {
  background-color: #dc3545;
  color: #fff;
  border-radius: 5px;
}
.btn-error:hover {
  background-color: #bd2130;
}

/* styles for the form */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 500px;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  /* Styles for required input fields */
  /* Mobile responsiveness */
}
form label {
  font-size: 1.1rem;
  color: #050202;
  margin-bottom: 5px;
}
form input {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s ease;
}
form input:focus {
  border-color: #007bff;
}
form input::-moz-placeholder {
  color: #0d0808;
}
form input::placeholder {
  color: #0d0808;
}
form button {
  padding: 12px;
  font-size: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
form button:hover {
  background-color: #0056b3;
}
form button:focus {
  outline: none;
  background-color: #004085;
}
form input:required {
  border-left: 4px solid #28a745;
}
@media (max-width: 768px) {
  form {
    width: 90%;
    padding: 15px;
  }
}/*# sourceMappingURL=styles.css.map */