:root {
  --headerBackgroundColor:saddlebrown;
  --titleColor:white;
  --titleSize: min(60px,6.5vw);
  --menuColor: saddlebrown;
}

#header{
  position: fixed; top: 0px; left: 0px; width: 100%;
  padding: 10px 0px;
  display: flex; flex-flow: column nowrap;  
  background-color: var(--headerBackgroundColor);
}
#header a {
  text-decoration: none;
  color:sienna;
  font-size: 20px;
}

#header>a {
  text-align: center;
  color:var(--titleColor); font-size: 6.5vw;
  text-decoration: none;
}

#header>div { 
  width: calc(100vw - 10px); position: absolute; top:10px;
  display: flex; flex-flow: row nowrap; justify-content: space-between; 
}
#header .menu{
  flex: 1 1 auto;
  display: flex; flex-flow: row nowrap; 
}
#hamburger{ anchor-name: --hamburger; 
  color:white; font-size:x-large;}
#hamburger-list {position-anchor: --hamburger;}
#plan { anchor-name: --plan;}
#plan-list {position-anchor: --plan;}
#comeleave { anchor-name: --comeleave;}
#comeleave-list {position-anchor: --comeleave;}
#whilethere { anchor-name: --whilethere;}
#whilethere-list {position-anchor: --whilethere;}
#devices { anchor-name: --devices;}
#devices-list {position-anchor: --devices;}

.anchor{
  position: relative; 
  background-color: transparent;
  border: 0;
  color: var(--menuColor);
  font-size: 20px;
}

.target {
  position: absolute;
  margin: 0px;
  inset: auto;
  top: anchor(bottom);
  left: anchor(50%);
  border-radius: 10px;
  
  border:1px solid black;
  background-color: white;
  padding: 5px 15px;
}
.target:popover-open {
  display: flex; flex-flow: column nowrap; gap:8px;
  align-items: flex-start;
}

#header_spacer { height: calc(7.5vw + 20px); }


@media screen and (min-width:1100px){
  #header>a { font-size: 60px; }
  #header>div {position: relative; top: 0px;}
  #header #hamburger{
    display: none;
  }
  #header #hamburger-list{
    flex: 1 1 auto;
    display: flex; flex-flow: row nowrap; 
    justify-content: space-around;
    background-color: transparent;
    border: 0;
    position: relative;
  }
  #header #hamburger-list>* { color:white; }
  #header_spacer { height: 125px; }
  }