body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Metropolis', sans-serif;
  background-color: #1a1a2e; /* This sets the background color */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center; /* This centers your main content vertically */
  align-items: center; /* This centers your main content horizontally */
  text-align: center;
  transition: background-color 0.3s;
}

body, body * {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

.email {
  color: inherit; /* Retains the color specified in parent or set your preferred color */
  text-decoration: none; /* Removes underline */
}

/* Override iOS automatic styling */
a[href^="mailto:"], .email {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit; /* Ensures the text color matches the surrounding text */
}

/* Style for the top-right navigation menu */
nav {
  position: absolute; /* Positions the navigation absolutely relative to its first positioned (not static) ancestor */
  top: 0; /* Aligns the top edge of the navigation with the top of the window */
  right: 0; /* Aligns the right edge of the navigation with the right of the window */
  margin: 10px; /* Adds some space between the menu and the window's edges */
  font-family: 'Metropolis', sans-serif;
}

nav ul {
  list-style-type: none; /* Removes bullet points from the list */
  padding: 0; /* Removes padding */
  display: flex;
  justify-content: flex-end;
}

nav ul li {
  display: inline; /* Displays the list items inline */
  margin-right: 20px; /* Adds space between the menu items */
}

nav a {
  color: white; /* Text color for the links */
  text-decoration: none; /* Removes underline from links */
  font-size: 1em; /* Adjusts the size of the text */
  text-transform: uppercase; /* Makes text uppercase */
  letter-spacing: 1px; /* Increases spacing between letters */
}

/* Style for the subtitle of your page */
.subtitle {
  font-size: 1em;
  margin-top: 20px;
  font-weight: normal; /* Adjusts font-weight if needed */
}

/* Hides elements initially */
.hidden {
  display: none;
}

.dfg-lander {
  /*width: 100vw; /* Set the width to 100% of the viewport width */
  font-size: 5.0em; /* or any size you want */
  font-family: 'Metropolis', sans-serif;
  /*margin-top: 20px; /* or adjust as needed */
  /* other styles */
  justify-content: bottom; /* This centers your main content vertically */
  align-items: center; /* This centers your main content horizontally */
  text-align: center;
  font-weight: bold;
}


.tagline {
  /*position: absolute; /* This will take it out of the normal document flow */
  /*bottom: 0; /* This will stick it to the bottom */
  /*left: 0; /* Aligns it to the left */
  /*width: 100%; /* Stretches it across the width of the viewport */
  /*padding: 20px 0; /* Adds padding at the top and bottom if needed */
  justify-content: center; /* This centers your main content vertically */
  align-items: center; /* This centers your main content horizontally */
  text-align: center;
  font-family: 'Metropolis', sans-serif;
  font-weight: normal;
  color: inherit;
  text-decoration: none; /* Removes any underline */
  -webkit-text-decoration: none;
  /*text-transform: uppercase;*/
  /*font-size: 1.2em; /* Smaller size for mobile */
}

.dfg-bottom {
  position: absolute; /* This will take it out of the normal document flow */
  bottom: 0; /* This will stick it to the bottom */
  left: 0; /* Aligns it to the left */
  width: 100%; /* Stretches it across the width of the viewport */
  padding: 20px 0; /* Adds padding at the top and bottom if needed */
  font-family: 'Metropolis', sans-serif;
  font-weight: bold;
}

.hamburger {
  display: none; /* Hide by default */
  position: absolute;
  top: 20px; /* Adjust as needed */
  /*left: 50%;
  transform: translateX(-50%);*/
  right: 20px; /* Adjust as needed */
  z-index: 100; /* Ensure it's above other content */
  background: none;
  border: none;
  color: #fff; /* Adjust based on your color scheme */
  font-size: 30px; /* Larger font size makes the icon bigger */
  padding: 10px; /* Larger padding to increase touch area */
  cursor: pointer;
}



@media screen and (max-width: 768px) {
  /* This is a common breakpoint for mobile devices */
  .hamburger {
      display: block; /* Show the hamburger menu on mobile */
  }
  .navigation ul {
      /* Adjust styles for mobile navigation */
      display: none;
  }
  .dfg-lander {
    font-size: 2.25em; /* Smaller size for mobile */
  }
  .tagline {
    /* font-size: 12px; /* Smaller size for mobile */
  }  
  .navigation ul {
    display: none; /* Menu is hidden by default */
    position: absolute;
    background-color: #1a1a2e; /* This should match the navbar color */
    width: 100%; /* Full width */
    top: 45px; /* Adjust this value to where you want the menu to appear */
    right: 150px;
    font-size: 13px;
    text-align: right;
  }

  .navigation ul li {
    display: block; /* Stack the links vertically */
    margin-right: 0; /* Remove the margin between menu items */
    /*width: 100px;*/
  }

  .navigation ul li a {
    display: block; /* Make the links fill the li for easier tapping */
    padding: 10px; /* Add some padding for touch targets */
    width: 120px;
  }
  /* More responsive adjustments as needed */
}

#main-content {
  transition: opacity 10ms ease-in-out;
}