*{
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}


/*This is the space for the entire navigation bar */
nav{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
    background: black;
    border: 10px solid black;
    width: 100%;
    margin: 0px 20px 0px -20px;
    padding: 10px;
}

.nav-link-flexbox{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px; /* 5px space between links */
  padding-right: 15px;
}

/* Styles each of the four links */
.nav-link {
    color: gold;
    margin-left: auto;
}

/* Styles for when each link is being clicked on */
.nav-link:active{
    color: white;
    text-decoration: none;
}

/* Removes the underline when each link is hovered on */
.nav-link:hover{
    text-decoration: none;
}
/*End space for Nav Bar */


/* Grays out the Michigan Tech image in the navbar while it's hovered on */
img:hover{
    filter:grayscale(100%);
}

/*Sets the image to display on the left of the flexbox it's contained in. */
#image-link{
  display: flex;
  margin-right: auto;
  align-items: start;
}

/*Width of the Google Calendar Display.  Also adds some spacing between them. */
iframe{
  border: 4px solid black;
  width: 99%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#sheet{
  margin-top: 100px;
}



/*Welcome message styling */
h1{
    text-align: center;
}

/*Location header */
h3{
text-align: center;
}


/*Each section is each box that is contained within the grid */
section{
    border: 2px solid gold;
    background-color: black;
    color: gold;
}

/* This is the CSS setup for the grid showing the items available in general */
#available-food-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

#hygiene-p{
  text-align: center;
}

/*Changes screen display between 400 and 1,023 pixels to change grid and nav bar behavior */

  @media screen and (min-width: 200px) and (max-width: 1023px) {
    /*Sets the image to display in the middle of the nav bar.  It's no longer contained in the flexbox. */
    #image-link{
      display:block;
      margin: 0 auto;
    }

    /*Sets the grid to have 2 visible columns */
    #available-food-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    /*Hides all the regular links and allocates no space for them */
    .nav-link{
      display: none;
    }
  }
    
  /* The dropdown button that says links.  We hide this when the screen is wide enough to fit all the links. */
  .dropbtn {
      display: none;
      font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
      background-color: black;
      color: gold;
      padding: 16px;
      font-size: 16px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #dddddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: black;
}

/*When the screen is smaller than 1023 pixels, we hide the links that displayed before and switch to the dropdown display */
@media screen and (max-width: 1023px){
  .dropbtn {
      display: block;
      font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
      background-color: black;
      color: gold;
      padding: 16px;
      font-size: 16px;
      border: none;
}

/* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }

/* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

/* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

/* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #dddddd;
  }

  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: black;
  }
  }

#location-link:link{
  color: blue;
  font-size: 1.5em;
}

#location-link:visited{
  font-size: 1.5em;
}

#location-link:active{
  color: black;
  font-size: 1.5em;
}

#location-link:hover{
  border: 2px dashed black;
}

#content-styling-div{
  border: 4px solid black;
  padding: 10px;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  margin: 110px;
  margin-right: 5px;
  margin-left: 0px;
}