* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Make sure HTML and body take up full viewport */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Main container that will use grid */
.container {
  display: grid;
  grid-template-rows: 50px 1fr; /* Navigation bar auto height, content takes remaining space */
  grid-template-areas: 
    "navbar"
    "content";
  width: 100%;
  height: 100vh; /* Full viewport height */
}

/* Navigation bar styling */
.navbar {
  grid-area: navbar;
  /* background-color: #333;
  color: white; */
  /*padding: 1rem; */
  /* Optional: Add a fixed height if you prefer */
  /* height: 60px; */
  display: flex;
}

/* Content area styling */
.content {
  grid-area: content;
  background-color: #f5f5f5;
  padding: 1rem;
  overflow-y: auto; /* Allows scrolling if content overflows */
} 

.content > div:first-of-type {
  height: 100%;   
}

/* Example of responsive adjustments */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem;
  }
  
  .content {
    padding: 0.5rem;
  }
}



ul.navbar {
    display:inline-block;
    list-style-type:none;
    margin: auto 10px;
}