/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/

body {
  margin: 0;
  border: 0;
  font-family: 'Roboto Mono', monospace;
  background-color: black;
  padding-bottom: 1vw;
  padding-right: 1vw;
}

/* CSS for Landscape Here */

#wrapper {width:1024px}


.hello-proof {
	color: blue;
}
	

/*This container holds the logo image, nav bar buttons and sign out/username button*/

.header-container {
  display: inline-grid; 
  grid-template-columns: 10vw 10vw 10vw 10vw 10vw 10vw 1.5vw 10vw 12vw;
  grid-template-rows: .5vw .5vw 7vw 2.5vw;
  width: 87.5vw;  
  height: 10.5vw; 
  padding: 0; 
  margin-left: 1vw; 
  border: none;
  /*border: 1px solid pink;*/
}

/*Logo Image*/

.logo-div {
  grid-row: 1 / span 3 ;
  grid-column: 1 / span 4;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*/*border: 1px solid yellow;*/
}

.logo-div img {
  height: 100%;
  width: 100%;
}

.about-div {
  
  grid-row: 4 / span 1 ;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 2.5vw;
    
}

.header-about-button {
  height: 2.5vw;
  width: 10vw;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: rgb(162,229,249);
  border-radius: .65vw;
  
}

.members-div {
  grid-row: 4 / span 1 ;
  grid-column: 2 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 2.5vw;
  /*border: 1px solid yellow;*/
}

.header-members-button {
  height: 2.5vw;
  width: 10vw;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: rgb(162,229,249);
  border-radius: .65vw;
}

.checklists-div {
  
  grid-row: 4 / span 1 ;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 2.5vw;
  /*border: 1px solid yellow;*/
}

.header-checklists-button {
  height: 2.5vw;
  width: 10vw;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: rgb(162,229,249);
  border-radius: .65vw;
}

.variants-div {
  
  grid-row: 4 / span 1 ;
  grid-column: 4 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 2.5vw;
  /*border: 1px solid yellow;*/
 
}

.header-variants-button {
  height: 2.5vw;
  width: 10vw;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: rgb(162,229,249);
  border-radius: .65vw;
}

.resources-div {
  
  grid-row: 4 / span 1 ;
  grid-column: 5 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 2.5vw;
  /*border: 1px solid yellow;*/
 
}

.header-resources-button {
  height: 2.5vw;
  width: 10vw;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: rgb(162,229,249);
  border-radius: .65vw;
}

.registry-div {
  
  grid-row: 4 / span 1 ;
  grid-column: 6 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 2.5vw;
  /*border: 1px solid yellow;*/
 
}

.header-registry-button {
  height: 2.5vw;
  width: 10vw;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: rgb(162,229,249);
  border-radius: .65vw;
}

.login-div {
  
  grid-row: 3 / span 1 ;
  grid-column: 8 / span 1;
  display: flex;
  justify-content: left;
  align-items: left;
  width: 10vw;
  height: 2.5vw;
  /*border: 1px solid yellow;*/
 
}

.header-log-in-button {
  height: 2.5vw;
  width: 10vw;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: rgb(162,229,249);
  border-radius: .65vw;
}












/* CSS for portrait Here */

@media only screen and (orientation:portrait){
	#wrapper {width:768px}
	.hello-proof {
	color: red;
}

/*This container holds the logo image, nav bar buttons and sign out/username button*/
  .header-container {
    display: grid;
    /* --- CRITICAL CHANGE HERE --- */
    /* Define columns for each button and the login button. */
    /* Each button is 16vw, and we need 6 of them, plus the login button. */
    /* We'll use 'auto' for the button columns to respect their content/width */
    /* and '1fr' to take up any remaining space between the logo and buttons, */
    /* and after the last button, or to handle the logo span. */
    /* Let's define the columns more precisely: */
    /* [Logo/Nav area (can span multiple grid columns)] [Login Button] */
    grid-template-columns: repeat(6, 16.3vw); /* 6 columns for nav buttons (16vw each), 1fr for flexible space, 16vw for login */
    grid-template-rows: 3vw 7vw 7vw 1vw 5vw;
    width: 97.8vw; /* Maintain overall container width */
    height: 23vw;
    padding: 0;
    margin-left: 1vw;
    border: none;
    /*border: 1px solid pink;*/
    /* Add a gap between columns for visual spacing if desired */
    /* grid-column-gap: 1vw; */ /* Optional: Add a small gap between button columns */
  }

  /*Logo Image*/
  .logo-div {
    grid-row: 2 / span 3;
    grid-column: 1 / span 6; /* Adjust logo to span the first 7 columns (all nav button columns + the flexible space) */
    border: none;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
  }

  .logo-div img {
    height: 100%;
    width: 100%;
  }

  /* All button containers should have width: 16vw and height: 5vw */
  /* They now rely on the grid to position them, no more padding-left! */

  .about-div {
    grid-row: 5 / span 1;
    grid-column: 1 / span 1; /* Button 1 in column 1 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 5vw;
  }

  .members-div {
    grid-row: 5 / span 1;
    grid-column: 2 / span 1; /* Button 2 in column 2 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 5vw;
  }

  .checklists-div {
    grid-row: 5 / span 1;
    grid-column: 3 / span 1; /* Button 3 in column 3 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 5vw;
  }

  .variants-div {
    grid-row: 5 / span 1;
    grid-column: 4 / span 1; /* Button 4 in column 4 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 5vw;
  }

  .resources-div {
    grid-row: 5 / span 1;
    grid-column: 5 / span 1; /* Button 5 in column 5 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 5vw;
  }

  .registry-div {
    grid-row: 5 / span 1;
    grid-column: 6 / span 1; /* Button 6 in column 6 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16vw;
    height: 5vw;
  }

  .login-div {
    grid-row: 1 / span 1; /* Still in row 1 */
    grid-column: 6 / span 1; /* Now in column 8 (after the 6 button columns and 1fr gap) */
    display: flex;
    flex-direction: column; /* CRITICAL: Change flex direction to column */
    justify-content: flex-end; /* CRITICAL: Align content to the end of the main axis (bottom) */
    align-items: flex-end;
    width: 16vw; /* Match other button widths for consistency, or adjust as needed */
    height: auto;
  }

  /* No changes needed for the button styles themselves */
  .header-about-button,
  .header-members-button,
  .header-checklists-button,
  .header-variants-button,
  .header-resources-button,
  .header-registry-button {
    height: 5vw;
    width: 16vw; /* Explicitly ensure buttons take their 16vw width */
    font-size: 2.2vw;
    font-weight: bold;
    padding: 0;
    margin: 0;
    background-color: rgb(162, 229, 249);
    border-radius: 1.5vw;
  }

  .header-log-in-button {
    height: 5vw;
    width: 16vw;
    font-size: 2.5vw;
    text-align: right;
    font-weight: bold;
    padding-top: 2.5vw;
    padding-left: 0;
    padding-right: 0.5vw; /* Add some right padding to keep text off the edge */
    padding-bottom: 0;
    margin: 0;
    background-color: transparent;
    color: rgb(162, 229, 249);
    border: none;
  }

}