/* shoelace-dark.css */

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

/* Set Poppins as the default font for everything */
body {
  font-family: "Poppins", sans-serif;
  background-color: rgb(34, 34, 34); /* Dark gray background */
  color: white;
}

* {
  padding: 0%;
  margin: 0;
}

/* General styling for cards */
.card.shoelace-card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  background-color: #343a40;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Visible box shadow */
  color: #f8f9fa;
  padding: 20px;
}

.card-title {
  color: #f8f9fa; /* White color for card title */
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-text {
  color: #dee2e6;
  font-size: 14px;
}

.shoelace-heading {
  color: #f8f9fa; /* White color for headings */
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}

.shoelace-paragraph {
  font-size: 18px;
  line-height: 1.6;
  color: #868686;
  margin-bottom: 15px;
}

.shoelace-image {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Visible box shadow */
  max-width: 200px;
  margin-top: 20px;
}

/* Add visible box shadow to other elements */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Visible box shadow for the navbar */
  top: 0;
  position: sticky;
}

.shoelace-list,
.shoelace-quote,
.shoelace-form {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Visible box shadow for lists, quotes, and forms */
}

/* Add hover effect for buttons and links */
.btn:hover,
.shoelace-btn:hover,
.nav-link:hover {
  background-color: #5a6268; /* Darker color on hover */
}

/* Styling for the footer */
.footer {
  background-color: #121212;
  color: #f8f9fa;
  padding: 20px;
  text-align: center;
}

/* Additional unique elements */
.shoelace-feature {
  border: 1px solid #444;
  border-radius: 8px;
  background-color: #1a1a1a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Visible box shadow */
  padding: 20px;
  color: #f8f9fa;
  margin-top: 20px;
}

.shoelace-feature-title {
  color: #f8f9fa;
  font-size: 20px;
  font-weight: bold;
}

.shoelace-feature-description {
  color: #acacac;
  font-size: 16px;
}

/* Media Queries */
@media (max-width: 767px) {
  /* For smaller screens (up to 767px), increase the font size */
  .navbar {
    font-size: 40px;
  }
}
.btn {
  border-radius: 10px;
}

.shoelace-btn,
.btn-primary {
  background-color: #343a40;
  border-color: #1a1a1a;
  color: #747474;
}