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

#header{
  flex: 0 0 auto;
  position: sticky; top: 0px; left: 0px; width: 100%;
  padding: 10px 0px;
  display: flex; flex-flow: column nowrap;  
  background-color: var(--headerBackgroundColor);
}

#header a {
  color:var(--headerBackgroundColor); font-size: 20px;
}

#header>a {
  text-align: center;
  padding-right:60px;
  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; 
}
#header .langBtn{
  flex: 0 0 auto;
  display: flex; flex-flow: row nowrap; 
}
#hamburger{ anchor-name: --hamburger; 
  color:white; font-size:x-large;}
#hamburger-list {position-anchor: --hamburger;}
#parr { anchor-name: --parr;}
#parr-list {position-anchor: --parr;}
#vidaFe { anchor-name: --vidaFe;}
#vidaFe-list {position-anchor: --vidaFe;}
#ca { anchor-name: --ca;}
#ca-list {position-anchor: --ca;}
#funerales { anchor-name: --funerales;}
#funerales {position-anchor: --funerales;}
#comisiones { anchor-name: --comisiones;}
#comisiones-list {position-anchor: --comisiones;}
#outreach { anchor-name: --outreach;}
#eventos-list {position-anchor: --outreach;}
#outreach { anchor-name: --eventos;}
#eventos-list {position-anchor: --eventos;}

.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 .langBtn { flex: 0 0  auto; }

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


@media screen and (min-width:1100px){
  #header>a { font-size: 4.5vw;}
  #header>div {position: relative; top: 0px;}
  #header .home { display:none }
  #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; }
  }