body {
  font-family: Arial, Helvetica, sans-serif;
}

.layout-container {
  display: flex;
  gap: 10px;  
  height: 65px;
}

.logo {
  background-color: blue;
  color: yellow;
  flex-grow: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-align: center;
}

.main-menu {
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0; 
  margin: 14px 0;
}

.bar1, .bar2, .bar3 {
  width: 40px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
/*css validation warning: 
webkit-transform is vendor specific, keep it for legacy clients */
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
/*css validation warning: 
webkit-transform is vendor specific, keep it for legacy clients */
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

hr {
    border: none;               
    border-top: 1px solid #dadce0;
    margin: 24px 0;
    width: 100%;
}

.page-menu {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #dadce0;
  padding-bottom: 8px;
} 

.menu-item {
  text-decoration: none;
  color: #5f6368;
  padding: 4px 0;
}

.menu-item.active {
  color: blue;
  font-weight: bold;
}

.menu-item:hover {
  color: #202124;
}

.tab-panel {
  padding: 20px 0;
}

.tab-panel[hidden] {
  display: none;
}

footer {
  text-align: center;
  padding: 15px;
  font-size: 0.85rem;
  color: #777;
}