.page-header {
    overflow: hidden;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.5rem;
    width: 100vw;
}

.page-header .page-header-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.5rem;
}

.page-header .page-header-header .title-text {
    margin: 0;
    text-decoration: none;
    color: black;
}


/* Page Links */

.page-header .page-header-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}


.page-header .page-header-links * {
    display: block;
    color: green;
    text-align: center;
    padding: 0px 10px;
    margin: 0;
    text-decoration: none;
    font-size: x-large;
}


/* Hamburger */

.page-header .page-header-header .hamburger {
    display: none;
    grid-template: 1fr / 1fr;
    place-items: center;
    margin: 0;
}

.page-header .page-header-header .hamburger * {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}


.page-header .page-header-header .hamburger .checkbox {
  display: block;
  height: 32px;
  width: 32px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.page-header .page-header-header .hamburger .hamburger-lines {
  height: 26px;
  width: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-header .page-header-header .hamburger .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.page-header .page-header-header .hamburger .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.page-header .page-header-header .hamburger .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.page-header .page-header-header .hamburger .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.page-header .page-header-header .hamburger input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.page-header .page-header-header .hamburger input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.page-header .page-header-header .hamburger input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}



@media screen and (max-width: 800px) {
    
    .page-header {
        padding: 0.5rem 1rem;
        gap: 0px;
    }
    
    /* Page Links */
    
    .page-header {
        flex-direction: column;
    }
    
    .page-header .page-header-links {
        display: none; /* hide by default - show using JS */
        flex-direction: column;
        padding: 0.25rem 0.25rem 0.75rem; /*top - sides - bottom */
    }
    
    /* Hamburger */
    
    .page-header .page-header-header .hamburger {
        display: grid;   
    }
}