/* 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;
}

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

/* 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 */
}



/* Styles for the single centered image (common styles for both mobile and desktop) */
.single-image {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Change align-items value to flex-start */
  height: 100vh; /* Set the height to 100% of the viewport height */
}

.image-container {
  text-align: center;
}

.image-container img {
  max-width: 20%;
  height: auto;
}

/* Style for the project description */
.image-container p {
  font-size: 16px; /* Adjust the font size as needed */
  color: #555; /* Text color for descriptions */
}

.video-description {
  margin-top: -5px; /* Adjust the margin as needed to reduce the gap */
  font-family: 'Avenir Light', sans-serif; 
  text-align: left;
}


/* Style for the email address column */
.email-address {
    text-align: center;
    font-size: 18px; /* Adjust the font size as needed */
    color: black; /* Text color for the email address */
    margin-top: 15%; /* Adjust the top margin as needed */
    display: flex;
    flex-direction: column; /* Display elements in a column */
    align-items: center; /* Center align items horizontally */
    gap: 4px; /* Add spacing between elements */
}

.email-address p {
    margin: 0; /* Remove default margin for paragraphs */
}

.email-address a {
    text-decoration: none; /* Remove underline from the link */
    color: black; /* Text color for the link */
}

.email-address a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Add this CSS to your stylesheet */

/* Style for the video container */
.video-container {
  max-width: 68%; /* Adjust the maximum width as needed */
  margin: 0 auto; /* Center the video horizontally */
  overflow: hidden; /* Hide overflow to maintain aspect ratio */
  background-color: white; /* White background color */
}

/* Style for the video itself */
video {
  width: 100%; /* 100% width of the container */
  height: auto; /* Automatically adjust height to maintain aspect ratio */
}

/* 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: 50%;
    height: auto;
    margin-top: 20%;
  }

  .video-description {
    margin-top: -5px; /* Adjust the margin as needed to reduce the gap */
    font-family: 'Avenir Light', sans-serif; 
    text-align: left;
    font-size: 50%;
  }

  .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;
  }

  /* Style for the email address column */
  .email-address {
    text-align: center;
    font-size: 10px;
    color: black;
    margin-top: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Style for the video itself */
video {
  width: 100%; /* 100% width of the container */
  height: auto; /* Automatically adjust height to maintain aspect ratio */
}

/* Style for the video container */
.video-container {
  max-width: 91%; /* Adjust the maximum width as needed */
  margin: 0 auto; /* Center the video horizontally */
  overflow: hidden; /* Hide overflow to maintain aspect ratio */
  background-color: white; /* White background color */
}
  /* 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 */
  }

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