/* Reset default browser styles */
body,
h1,
h2,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

/* General styles for both mobile and desktop */
body {
  background-color: #fff; /* White background */
  font-family: "Futura", Arial, sans-serif; /* Use Futura as the default font */
}

header {
  /* Remove background color for the header */
  display: flex; /* Add flex display to align items horizontally */
  justify-content: space-between; /* Spread items horizontally */
  padding: 10px;
  align-items: center; /* Align items vertically in the center */
}

/* Styles for the navigation links */
.navigation ul {
  list-style: none;
  text-align: left; /* Align the text to the left */
  padding-left: 20px; /* Add some left padding for spacing */
}

.navigation li {
  margin-bottom: 10px;
}

/* Apply custom font to specific list items */
.custom-font {
  font-family: "Hiragino Kaku Gothic Std", sans-serif;
}

/* Style for the contact button */
.contact-button {
  text-decoration: none;
  color: black; /* Dark text color for the button */
  background-color: white; /* Button background color */
  padding: 10px 20px; /* Button padding */
  border-radius: 5px; /* Button border radius */
  font-size: 15px; /* Adjust the font size as needed */
  font-family: "Avenir Black", Arial, sans-serif; /* Use Futura as the default font */
  text-align: left; /* Align the text to the left */
  padding-left: 10px; /* Add some left padding for spacing */
}

/* Add margin or padding to adjust the gap between the two <p> elements */
.project-title {
  margin-top: 2px; /* Adjust the margin as needed to reduce the gap */
}
.project-description {
  margin-top: -5px; /* Adjust the margin as needed to reduce the gap */
}

/* Media query for mobile styles */
@media (max-width: 768px) {
  /* Add specific mobile styles here */
  h1 {
    font-size: 12px; /* Adjust mobile font size */
  }

  #my-heading {
    font-size: 12px; /* Adjust the font size as needed */
    color: black; /* Text color */
    text-decoration: none; /* Remove underline from the link */
    margin-left: 0; /* Reset margin-left */
    padding-left: 12px; /* Add padding to push the text to the right */
  }

  .image-container img {
    max-width: 100%;
    height: auto;
    margin-top: 1%;
  }

  .navigation a {
    text-decoration: none;
    color: black; /* Dark text color for links */
    font-size: 17px; /* Adjust the font size as needed */
  }

  .contact-button {
    /* Add specific mobile styles for the contact button */
    font-size: 12px;
  }

  /* Adjust other styles as needed for mobile */
}

/* Media query for desktop styles */
@media (min-width: 769px) {
  /* Add specific desktop styles here */
  h1 {
    font-size: 15px; /* Adjust desktop font size */
  }

  #my-heading {
    font-size: 15px; /* Adjust the font size as needed */
    color: black; /* Text color */
    text-decoration: none; /* Remove underline from the link */
    margin-left: 0; /* Reset margin-left */
    padding-left: 11px; /* Add padding to push the text to the right */
  }

  .navigation a {
    text-decoration: none;
    color: black; /* Dark text color for links */
    font-size: 17px; /* Adjust the font size as needed */
  }

  .contact-button {
    /* Add specific desktop styles for the contact button */
  }

  /* Modify styles for the image list to create a responsive grid layout with four columns */
  .image-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four columns per row */
    gap: 20px; /* Add gap between image containers */
  }

  /* Adjust the individual image containers as needed */
  .image-container {
    margin-bottom: 0; /* Remove the margin between image containers */
    padding: 0; /* Remove padding */
    text-align: center;
  }

  /* Adjust the max-width for the images to ensure they fit within the columns */
  .image-container img {
    max-width: 57%;
    height: auto;
  }

/* Style for the project descriptions */
.image-container p {
  font-size: 14px; /* Adjust the font size as needed */
  color: black; /* Text color for descriptions */
  font-family: "Avenir Light", Arial, sans-serif; /* Use Futura as the default font */
  text-align: left;
  margin-left: 21.5%;
}
}

/* Styles for the image column */
.image-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Add space to the left and right of the images on mobile */
.image-container {
  margin-bottom: 20px; /* Adjust the margin to create space between images */
  text-align: center;
  padding: 0 20px; /* Add space to the left and right of the images */
}


/* Style for the project descriptions */
.image-container p {
  font-size: 14px; /* Adjust the font size as needed */
  color: black; /* Text color for descriptions */
  font-family: "Avenir Light", Arial, sans-serif; /* Use Futura as the default font */
  text-align: left;
}