.header {
border-radius:8px;
width: 100vw;
max-width: 800px;
_background: linear-gradient(#fff,#ddd);
margin: auto;
_flex-wrap: wrap;
text-align: center;
_background-color:#61A7DA;
color: white;
display:flex;
_flex-direction: row;
flex-flow: row wrap;
_opacity:0.5;
border-radius: 0 0 8px 8px;
}


header > div {
_flex: 0 1 auto;
}

.div1 {
font: var(--pageHeaderFont);
color: #3869a1;
background: linear-gradient(#fff,#ddd);
flex: 0 1 100%;
padding: 8px 0;
}

.div2 {
font-size: 1.5em;
font-weight: bold;
background: linear-gradient(0deg, #485563, #384350, #29323c);
border-radius: 0 0 0 8px;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 7px 0;
_margin:0;
border-right: 1px solid black;
_flex-flow: row nowrap;
}

.div3 {
font-size: 1.5em;
font-weight: bold;
background: linear-gradient(0deg, #5a6672, #414c58, #29323c);
_background: linear-gradient(#dc5f59, #b33630);
_background: linear-gradient(0deg, oklab(50.9% -0.021 -0.013), oklab(57.6% -0.014 -0.019));
border-radius: 0 0 8px 0;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding:20px 0;
_margin:0;
_flex-flow: row nowrap;
_border-left: 1px solid black;
}

.div4 {
font-size: 1.2em;

background: none;
border-radius: 8px;
display: flex;
display: none;
flex-direction: column;
flex: 0 1 100%;
_width:80%;
align-self:center;
align-items: center;
justify-content: center;
_padding:5px 0;
_margin:0;
}