:root {
  --secondary-color: #dfe0e1;
  --logo-font: "Courier New", Courier, monospace;
  --main-font: "Josefin Sans", sans-serif; /* Main font for the site */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: black;
}

.content h1 {
  font-size: 4em; /* Larger font size for h1 */
  font-weight: bold; /* Bold text for h1 */
  color: var(--secondary-color); /* White text for the header */
  font-family: "Josefin Sans", sans-serif;
  text-align: center; /* Center the header text */
}

.content h2 {
  font-size: 1.25em; /* Slightly smaller font size for h2 */
  margin-top: 30px; /* Add space above h2 */
  color: var(--secondary-color); /* White text for the header */
  font-family: "Josefin Sans", sans-serif;
  text-align: center; /* Center the header text */
}

h3 {
  color: black; /* White text for the header */
  font-family: "Josefin Sans", sans-serif;
  text-align: center; /* Center the header text */
  font-size: 1.5em; /* Slightly smaller font size for h3 */
  margin-top: 20px; /* Add space above h3 */
  margin-bottom: 20px; /* Add space below h3 */
  background-color: var(--secondary-color);
  padding: 10px;
}

p {
  margin: 50px auto; /* Add space above paragraphs */
  font-family: "Courier New", monospace; /* Monospace font for paragraphs */
  color: white; /* White text for paragraphs */
}

.nav-logo {
  width: 50px; /* Adjust the width of the logo */
  height: auto; /* Maintain aspect ratio */
}

.navbar-text {
  font-family: var(--logo-font); /* Use the logo font for the navbar text */
  color: black;
  font-weight: bold; /* Bold text for the navbar */
  font-size: 2em; /* Slightly larger font size */
}

.hero {
  margin-top: auto; /* Center the hero section */
  text-align: center; /* Center the text in the hero section */
  padding: 50px 20px 50px 20px; /* Add padding around the hero section */
  background-color: black;
}

.img-top {
  max-width: 350px; /* Ensure images are responsive */
  height: auto; /* Maintain aspect ratio */
}

.content-container {
  background-color: black;
  max-width: 800px; /* Set a reasonable max width */
  width: 100%; /* Full width up to max-width */
  height: 55vh;
  padding: 20px;
  margin: 40px auto 0 auto; /* Center horizontally */
  text-align: center;
}

.content {
  padding-bottom: 20px;
}

.about-button {
  background-color: black; /* Black background for the button */
  color: white; /* White text for the button */
  border: none; /* Remove border */
  padding: 10px 20px; /* Add padding to the button */
  font-family: var(--main-font); /* Use the logo font for the button */
  font-size: 1.2em; /* Slightly larger font size for the button */
  cursor: pointer; /* Change cursor to pointer on hover */
}

.about-pic {
  width: 70%; /* Full width for the about picture */
  height: auto; /* Maintain aspect ratio */
  margin-top: 20px; /* Add space above the picture */
}

.button-container {
  display: flex;
  justify-content: center; /* Centers the button horizontally */
  margin-top: 20px; /* Add space above the button */
  padding-bottom: 20px;
  padding-top: 10px;
}
.btn-contact {
  color: black; /* Black background for the button */
  background-color: var(--secondary-color); /* White text for the button */
  border-radius: 4px;
  font-size: 16px;
  line-height: 27px;
  padding: 10px 20px; /* Add padding to the button */
}

.work-img {
  width: 200px;
  height: 300px;
  object-fit: cover; /* Ensures images fill the box and crop if needed */
  margin-bottom: 20px;
}

.footer {
  margin-top: auto;
  background-color: black;
  text-align: center;
  padding: 15px 0;
  font-family: var(--main-font);
}