/* Define background colors for light and dark modes */
:root {
  --background-light: #fffff8; /* Light mode background color */
  --background-dark: #333; /* Dark mode background color */
}

/* Apply background color based on palette mode */
body[data-md-color-scheme="default"] {
  background-color: var(--background-light);
}

body[data-md-color-scheme="dark"] {
  background-color: var(--background-dark);
}

/* Increase font size for body text */
body {
  font-size: 18px;
}

/* Increase font size for paragraphs */
p,
ul,
li {
  font-size: 18px;
}

/* Increase font size for navigation links */
nav a {
  font-size: 16px;
}

.md-content {
  max-width: 960px; /* Adjust the max width as needed */
  margin: 0 auto; /* Center the content horizontally */
  padding: 20px; /* Add some padding to the content */
}

/* Hide the title for md_content block
  .md-content h1 {
      display: none;
    } */

/* Custom styles for the Material Design card */
.material-card {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, border-color 0.3s;
  border-radius: 10px; /* Add rounded corners */
}

.material-card:hover {
  border-color: #ff8a2a;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.card-image {
  flex: 0 0 25%;
  max-width: 25%;
  height: auto;
  margin-right: 10px;
  border-top-left-radius: 10px; /* Add rounded corners to the top left corner */
  border-bottom-left-radius: 10px; /* Add rounded corners to the bottom left corner */
}

.card-content {
  flex: 1;
}

/* Add a capitalized first letter */
.initial-letter::first-letter {
  font-size: 4em;
  font-weight: bold;
  float: left;
  margin-right: 4px;
  line-height: 1;
}

.resume-button {
  text-align: center;
  margin-top: 20px;
}

.resume-button a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2c3e50; /* Match the website's theme */
  color: #ffffff;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.resume-button a:hover {
  background-color: #34495e; /* Slightly darker shade on hover */
}

/* styles.css */
/* ... Other shared styles ... */

/* Style for "Show Project" buttons */
.show-project-button {
  display: inline-block;
  padding: 10px 20px;
  color: #bf5d5d;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.show-project-button:hover {
  background-color: #005e91;
}