/*
 *******************************************************************
 * Style sheet for Mick's Synoniemenboek - (c) 2024 Michael Janus *
 *******************************************************************
 last update: 22 AUG 2025
 */

/* === COLORS === */
:root {
    --mcol-blue: #2070E0;
    --mcol-blue2: #2020E0;
    --mcol-bluedrk: #204080;
    --mcol-bluelt: #406080;
    --mcol-bluedrk2: #203060;
    --mcol-bluelt2: #4070E0;
    --mcol-offblue: #206080;
    --mcol-offbluelt: #4080B0;
    --mcol-offwhite: #F8F8F8;
    --mcol-white: #FFFFFF;
    --mcol-yellow: #FFF080;
    --mcol-yellowlt: #FFFFE0;
    --mcol-red: #E02020;
    --mcol-green: #208020;
    --mcol-gray: #A0A0C0;
    --mcol-graylt: #F0F0F8;
    --mcol-graydrk: #202030;
    --mcol-teal: #99AAAA;
    --mcol-tealdrk: #669999;
    --mcol-gray2: #809090;
    --mcol-graylt2: #AABBBB;


    --mbox-radius: 5px;
    --mbox-minwidth: 300px;
    --mbox-maxwidth: 800px;
    --mbox-gaphalfconts: 1em ;
    --mbox-maxhalfwidth: calc((var(--mbox-maxwidth) - var(--mbox-gaphalfconts)) / 2);

}

.mbluedrk-txt { color: var(--mcol-bluedrk); }
.mblue-txt { color: var(--mcol-blue); }
.mred-txt { color: var(--mcol-red); }
.mgreen-txt { color: var(--mcol-green); }
.mgray-txt { color: var(--mcol-gray); }
.mblue-bg { background-color: var(--mcol-bluelt2); }
.mbluedrk-bg { background-color: var(--mcol-bluedrk2); }
.mgray-bg { background-color: var(--mcol-graylt2); }
.mgraydrk-bg { background-color: var(--mcol-graydrk); }
.mwhite-bg { background-color: var(--mcol-offwhite); }
.mwhite-txt { color: var(--mcol-white); }



/* === TAGS === */

/* Apply border-box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body { border-collapse: collapse; color: var(--mcol-bluedrk); background-color: var(--mcol-offwhite);
      font: normal 100% Verdana, Arial, Times, sans-serif; overflow: hidden; }

/* h1 is used for page titles */
h1 { margin-top: 0; font-size: 1.1em; text-align: left; font-weight: normal; color: var(--mcol-teal);}
h2 { margin: 1em 0 0.2em 0; font-size: 1.0em; color: var(--mcol-teal); font-weight: normal; }
h3 { margin-top: 0; margin-left:0px; margin-bottom: 0.5em; font-size: 1em; font-weight: normal; text-decoration: none; font-style: italic;}
td h3, ol h3 { font-size: 0.9em; text-decoration: underline;}
h4, h5 { font-size: 0.9em; font-weight: normal; }
h6  { font-size: 0.9em; display: inline }

a, li a, ol li a { color: var(--mcol-bluelt2); font-weight: 500; text-decoration: none;}
a:hover, li a:hover, ol li a:hover { color: var(--mcol-blue); text-decoration: underline;}

/* the lists and columns are mostly used on info and links pate */
p  { font-size: 0.9em; }
td  { font-size: 0.9em; }
ul { list-style-position: inside;  padding-left:0; font-size: 0.9em; }      
ol { list-style-position: inside;  padding-left:0; font-size: 0.9em;}      


ol ul li  { font-weight: normal; text-decoration: none; }

      


section {
    background-color: var(--mcol-white);     
    border: 1px solid var(--mcol-gray);
    border-radius: var(--mbox-radius);
    padding: 0.5em;
    margin-bottom: 0.5em;
    min-width: var(--mbox-minwidth);
    max-width: var(--mbox-maxwidth);
    width: 100%;
}

/* == MAIN TITLE BAR AND SIDE BAR COLORS == */
.sidebars-bg {     
    position: fixed; 
    top: 0; 
    left:0; 
    width:100dvw; 
    height: 100dvh; 
    display: flex; 
    justify-content: center;
    overflow: hidden;
    background-color: var(--mcol-teal);
    /*background: linear-gradient(to bottom, #778888, #889999 1em, #99AAAA 2em, #667777); /* #fdfdfd 4.2em); */
} 
.page-positioner {
    position: absolute;
    max-width:1600px;
    height: 100dvh;
    width:100dvw;
    overflow: hidden;
}

.page-head-bg {    
    background-color: var(--mcol-offblue);
}
.page-panel-bg {    
    background-color: var(--mcol-teal);
    /* background: linear-gradient(to bottom, #99AAAA, #667777); */
}
.page-cont-bg {
    background-color: var(--mcol-offwhite); 
    
}
.page-cont-txt {    
    color: var(--mcol-offblue);
}


/* === FX === */
.popu-cont { font-size: 1em; }
.popu-cont.resp { font-size: 1em; }
.stats-cont { column-count: 3; column-gap: 2em; font-size: 1.4em; }
.stats-cont.resp { column-count: 3; }
.stats-item { break-inside: avoid;}
.stats-item.resp { }


/* === MAIN LAY-OUT ============================ */

.page-head { position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 100%;  }
.page-panel { position: absolute; margin: 0; padding: 0; left: 0; z-index:5; border: solid 1px #506060; }
.page-cont { position: absolute; margin: 0; padding: 0.5em 0.5em 0 0.5em ; right: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden;}
.page-footer { position: relative; margin: 0px -10px -10px -20px ; padding: 0; bottom: 0; border: solid 1px #506060; z-index:2;}

.page-cont.fx {                
    border-left: 1px solid #506060;
    border-right: 1px solid #506060;
}

.page-head.resp {  height: 3.2em; }
.page-panel.resp { top: 3.2em; left: 0px; width: 100%; height:1.8em; display: block; }
.page-cont.resp {  top: calc(3.2em + 1.8em);  left: 0px; padding-left: 1em; min-height: calc(100dvh - 3.2em - 1.8em); display: flex; flex-direction: column; padding-bottom: 0;}
.page-cont-container { flex: 1  }
.page-footer.resp { font-size: 1em; height:auto; display: flex; flex-direction: row; justify-content: space-between; padding: 0; margin-bottom: 0; margin-top: 1em; }

.titl-txt {    top: 40%; width: auto; transform: translateY(-40%); white-space: nowrap; overflow: hidden; padding:0.2em; }
.titl-txt.fx { font-family: Arial; color: var(--mcol-white); text-shadow: 0.1em 0.1em 0.2em var(--mcol-graydrk); }
.titl-txt.resp { font-size: 1.8em; position: absolute; left: 0.6em; } 


/* === MENUS ============================ */

.hambo { position: absolute; top: 0.3em; right: 0.5em; cursor: pointer; background-color: transparent; border: 0 none;}
.hambo.resp { display: none; padding: 4px; }
.hambo .bar { background-color: var(--mcol-offwhite); width: 30px; height: 5px; margin: 5px 0; }
.hambo.open { }
.hambo.open .bar:nth-child(1) { transform: scale(1) translate(-1px, 10px) rotate(45deg) ; }
.hambo.open .bar:nth-child(2) { opacity: 0; /* Hide the middle bar */ }
.hambo.open .bar:nth-child(3) { transform: scale(1) translate(-1px, -10px) rotate(-45deg); }

.menu { font-family: Verdana, Arial, Times, Serif; }        
.menu.resp { display:flex; flex-direction: row; justify-content: flex-start;  width: auto ; padding: 0 1em; }
.menu-item { display: block; margin: 2px 10px 2px 5px; padding: 5px 5px 5px 5px; }
.menu-item.resp { font-size: 0.8em;  min-height: 0.4em; }
.menu-item-spacer { display: block; }
.menu-item-spacer.resp { width: 2em; }
a.menu-item { font-family: Verdana, Arial, Times, Serif; text-decoration: none; text-transform: uppercase; }
a.menu-item         { color: var(--mcol-offwhite); }
a.menu-item:link    { color: var(--mcol-offwhite); }
a.menu-item:visited { color: var(--mcol-offwhite); }
a.menu-item:hover   { color: var(--mcol-white); text-decoration: underline; }
a.menu-item:active  { color: var(--mcol-offwhite); }
a.menu-item.resp.active { color: var(--mcol-offblue); background-color: var(--mcol-offwhite); border-radius: 5px; margin-bottom: -5px; }


.menu2 { font-family: Verdana, Arial, Times, Serif; padding: 0 10px 0 10px; } /*compensate for footer */
.menu2.resp { flex: 0 1 auto; display:flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin: 0 0 0 0;}
.menu2-item { }
.menu2-item.resp { font-size: 0.8em;  min-height: 0.4em; margin: auto 2em; flex: 1 0 auto; }
a.menu2-item { font-family: Verdana, Arial, Times, Serif; text-decoration: none;  }
a.menu2-item         { color: var(--mcol-offwhite); }
a.menu2-item:link    { color: var(--mcol-offwhite); }
a.menu2-item:visited { color: var(--mcol-offwhite); }
a.menu2-item:active  { color: var(--mcol-white); }
a.menu2-item:hover   { color: var(--mcol-white); text-decoration: underline; }

.copyright { font-family: Verdana, Arial, Times, Serif; }
.copyright.resp { position: absolute; top: -2.5em; left: 3.5em; font-size: 0.5em;  }

.info { font-family: Verdana, Arial, Times, Serif; }        
.info.resp { flex: 0 0 auto; font-size:0.5em; margin: auto 1em;}

.icons { vertical-align: middle; }
.icons.resp { flex: 0 0 auto; margin: 0.2em 1em;}
a.icon { text-decoration: none; opacity: 0.8;}
a.icon:link    { color: var(--mcol-offwhite); }
a.icon:visited { color: var(--mcol-offwhite); }
a.icon:active  { color: var(--mcol-white); }
a.icon:hover   { color: var(--mcol-white); }


/* === CONTENT GENERAL ======================== */

#content { display: flex; flex-direction: row; }
#content-main { flex: 1 1 auto; }
#content-ads-right{ max-width: 316px; min-width: 100px; width:auto; display: block; visibility: visible; padding: 0 0 2em 1em; }
#content-ads-bottom { display: flex; justify-content: center; width: 100%; max-width: var(--mbox-maxwidth); }
#content-ads-inline { display: flex; justify-content: center; }
#content-ads-inline1 { display: flex; justify-content: center; }
#content-ads-inline2 { display: flex; justify-content: center; }
#content-ads-inline3 { display: flex; justify-content: center; }
#content-ads-wide { width: 100%; display: flex; justify-content: center; }
#content-lastupdate { text-align:right; font-size: 0.8em; font-style: italic; margin-top: 1em; padding-right:0.5em;}
#consentui { visibility: visible; }
.content-ads-noflicker-leaderboard { min-height: 92px; }
.content-ads-noflicker-leaderboard-mobile { min-height: 102px; }

.synoRegularPageContainer {  /* i.e. not in a section */
    padding: 0.5em;
    min-width: var(--mbox-minwidth);
    max-width: var(--mbox-maxwidth);
    width: 100%;
}
.synoRegularPageContainer h2 {
    color: var(--mcol-offbluelt);
}
.synoRegularPageText {
    padding: 0.5em;
}
h1.synoRegularPageHeader {    
    margin-left: 0.5em;
    margin-top: 0.5em;
}
.synoHalfContainerContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--mbox-gaphalfconts);
    flex-wrap: wrap;
}
.synoHalfContainer {
    vertical-align: top;
    flex: 1;
    min-width: 0;
    max-width: var(--mbox-maxhalfwidth);
}

/* === SYNO ENGINE ========================== */
.synoInputContainer {
    display: flex;
    flex-direction: column;
    align-items:center;
    border-color: var(--mcol-bluedrk);
    /* margin-bottom: 1em; */
    padding-top: 1em;
    padding-bottom: 1em;
    width: 100%;
}
#synoInputForm {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;    
    flex-wrap: nowrap;
    gap: 0.5em;
}

#synoInputLabel {
    color: var(--mcol-bluedrk);
    font-variant: small-caps;
    padding-top: 0.1em;
}
#synoInputField {
    flex: 1 1 0;
    min-width: 1em;
    max-width: 12em;
    font-weight: bold;    
}
#synoSubmitSyno {    
/*    background-color: var(--mcol-grayteal);
    color: var(--mcol-offwhite); */
    border-radius: 3px;
    border: 1px solid var(--mcol-bluedrk);
}

#synoInputLabel { font-size: 0.9em;}
#synoInputField { font-size: 0.9em; }
#synoSubmitSyno { font-size: 0.8em; }
#synoSource { font-size: 0.6em; }

.synoWelcomeContainer {
    margin-top: 0;
    margin-bottom: 1em;
    padding: 0 0.5em;
    max-width: var(--mbox-maxwidth);   
    font-size: 1.0em;
}
.synoWelcomeText {
    display: inline-block;
    color: var(--mcol-offblue);
}
.synoWelcomeText h1 {
    /* color: var(--mcol-bluelt2); */
    color: var(--mcol-offbluelt);
    /* font-family: "Comic Sans MS", Verdana, Arial, Times, sans-serif; */
}
.synoExplainContainer {
    margin-top: 0em;
    padding: 0 0.5em;
    max-width: var(--mbox-maxwidth);
}
.synoExplainContainer p {
    margin-bottom: 2em;
}
 .synoExplainText {
    display: inline-block;    
}
.synoStatsTitle {
    margin:0;
    margin-top: -3px;
    margin-bottom: 0.5em;
    color: var(--mcol-offbluelt);
    font-weight: 600;
    font-size: 0.8em;
    font-variant: small-caps;
    /* text-transform: uppercase; */
}
.synoStatsContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--mbox-gaphalfconts);
    flex-wrap: wrap;
}
.synoStatsContainer ul {
    margin:0.5em 0em;
    list-style-type: square;
}
.synoStatsTopN, .synoStatsLastN {
    flex: 1 1 0;
}
.synoStatsTopN h3, .synoStatsLastN h3{
    margin: 0.5em 0em;
    font-size: 0.8em;
    color: var(--mcol-bluedrk2);
}

.synoInstructions {    
    color: var(--mcol-bluelt);
    display: inline-block;
    padding-top: 2em;
    padding-left: 0.5em;
    font-style: italic;
    max-width: var(--mbox-maxwidth);
    margin-bottom: 1em;
}   
h1.synoResults {    
    font-size: 0.6em;
    /* color: var(--mcol-offwhite); */
    font-variant: small-caps;
    font-style: italic;
    margin:0;
}
.synoResultsNoWords {
    margin-top: 2em;
    margin-bottom: 2em;
    padding-left: 0.5em;    
    font-style: italic;
}
.synoResultsRelationContainer {
    border-top: 1px solid var(--mcol-gray);
    border-bottom: 1px solid var(--mcol-gray);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
} 
.synoResultsRelationLabel { 
    color: var(--mcol-offbluelt);
    /* color: var(--mcol-bluelt2); */
    font-weight: 600;
    font-size: 0.8em;
    font-variant: small-caps;            
    /* text-transform: uppercase; */    
    margin-top: -3px;
    margin-bottom: 0.5em;
    word-break: normal;
    overflow-wrap: break-word;
}
.synoResultsTagContainer {    
    margin-top: 0.5em;
    margin-bottom: 2em;
    font-size: 1.0em;
}
h3.synoResultsTagLabel {
    margin-top: 1.5em;
    font-size: 0.8em;
    color: var(--mcol-bluedrk2);
}
/* add margin to words container when there is h3 */
h3.synoResultsTagLabel ~ .synoResultsSenseContainer {      
    padding-left: 0.2em;
}
.synoResultsSenseContainer {    
    margin-bottom: 1em;
}
.synoResultsSenseLabel {
    display: inline-block;
    font-size: 0.8em;
    padding-top: 0.2em;
    vertical-align: top;
}
.synoResultsSenseLabel::after {
    content: '.';
}
.synoResultsWordsContainer {
    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 2em);
}
.synoResultsWordItem {
    color: var(--mcol-bluedrk);
}

.syno-details {
    cursor: pointer;
    display: inline;
    vertical-align: bottom;
    margin-left: 0em;
    margin-bottom: 0.5em;
    /* color: var(--mcol-tealdrk); */
    color: var(--mcol-offbluelt);
}
.syno-details-disabled {
    color: var(--mcol-graylt);
    cursor: default;
}
.syno-details summary {
    display: inline;
}
.syno-details summary::before {
    font-size: 0.8em;
    content: "\25B6";
    display: inline-block;
    margin-left: 0em;
    transition: transform 0.2s;
}
.syno-details[open] summary::before {
    transform: rotate(90deg);
}
.syno-details summary::after {
    content: " ...";
    font-style: italic;
}
.syno-details[open] summary::after {
    display: none;
}
.syno-details summary + * {
    cursor: default;
    margin:0.5em 0 1em 0em;
    display: inline-grid;
    grid-template-columns: max-content auto;
    row-gap: 0;
    column-gap: 0.5em;
    /*width: max-content; */
    align-items: start;
    color: var(--mcol-teal);
}
.syno-details h4 {
    margin: 0.2em;
    font-style: italic;
}
.syno-details p {
    margin: 0.2em;
}
.syno-details p::first-letter {
    text-transform: uppercase;
}





.syno-tags { /* i.e. container */    
    margin-bottom: 1em;
}
.syno-tags h2 {
    color: var(--mcol-bluedrk);
    font-variant: small-caps;
    font-size: 0.8em;
    padding: 0;
    margin-right: 1em;
    display: inline; 
}
.syno-tags ul {
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    display: inline; 
}
.syno-tags li {
    margin: 0 0.5em 0 0.5em ; 
    font-variant: small-caps;
    font-size: 0.8em;
    padding: 0;
    display: inline;
}
.syno-tag {
    color: var(--mcol-blue);
}


/* === RESPONSIVE ELEMENT OVERRIDES ========================== */
@media (max-width: 400px) {
    html { font-size: 18px; }    
    h1 { font-size: 1.0em; }    
    .page-head.resp {  height: 3.2em; }
    .page-panel.resp { top: 3.2em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9;    }
    .page-cont.resp {  top: 3.2em;  left: 0px; padding-left:0.5em; min-height: calc(100dvh - 3em); }
    .titl-txt.resp  { font-size: 1.4em; left: 0.2em; }         
    .titl-txt :first-child  { display: none; }   /* hide mick */
    .theme-img.resp { max-width: 50%; height: auto; }        
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;}     
    .menu-item.resp { font-size: 1.2em;  min-height: 1.4em; padding: 0.5em 0;}
    .menu-item-spacer.resp { height: 0.5em; }
    a.menu-item.resp.active { color: var(--mcol-white); background-color: inherit; border-radius: 0px; margin-bottom: 0px; }
    .hambo.resp { display: block; padding: 2px; }
    .info.resp  { display: none; }
    .menu2-item.resp { margin: auto 0.5em; }
    .icons.resp { }    
    .popu-cont.resp { font-size: 0.6em; }
    .stats-cont.resp { column-count: 1; }
    #synoInputLabel { font-size: 1.2em; display: none; }
    #synoInputField { font-size: 1.2em; max-width: 11em; }
    #synoSubmitSyno { font-size: 1.2em; margin-left: auto;}
    .synoWelcomeContainer { font-size: 1.2em; }    
    .synoResultsTagContainer { font-size: 1.2em; }
    .syno-details summary + * { display: block; }
    .syno-details p { margin-bottom: 1em; }
    #content-ads-right { float: none; display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }    
}
@media (min-width: 400px) and (max-width: 480px) {
    html { font-size: 18px; }
    h1 { font-size: 1.0em; }
    .page-head.resp {  height: 3.2em; }
    .page-panel.resp { top: 3.2em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9; }
    .page-cont.resp { top: 3.2em; left: 0px; padding-left:0.5em; min-height: calc(100dvh - 3.2em); }
    .titl-txt.resp  { font-size: 1.4em; left: 0.2em; letter-spacing: -0.03em;}  
    .theme-img.resp { max-width: 50%; height: auto; }        
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;} 
    .menu-item.resp { font-size: 1.2em;  min-height: 1.4em; padding: 0.5em 0;}    
    .menu-item-spacer.resp { height: 1em; }
    a.menu-item.resp.active { color: var(--mcol-white); background-color: inherit; border-radius: 0px; margin-bottom: 0px; }
    .hambo.resp { display: block; padding: 2px; }
    .info.resp  { display: none; }
    .menu2-item.resp { margin: auto 0.5em; }
    .icons.resp { }    
    .popu-cont.resp { font-size: 0.5em; }
    .stats-cont.resp { column-count: 1; }
    #synoInputLabel { font-size: 1.2em;}
    #synoInputField { font-size: 1.2em; max-width:8em; }
    #synoSubmitSyno { font-size: 1.2em; margin-left: auto;}
    .synoWelcomeContainer { font-size: 1.2em; }    
    .synoResultsTagContainer { font-size: 1.2em; }
    .syno-details summary + * { display: block; }
    .syno-details p { margin-bottom: 1em; }
    #content-ads-right { float: none; display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }    
}
@media (min-width: 480px) and (max-width: 600px) {
    .page-head.resp {  height: 3.2em; }
    .page-panel.resp { top: 3.2em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9; }
    .page-cont.resp {  top: 3.2em;  left: 0px; padding-left:0.5em; min-height: calc(100dvh - 3.2em); }
    .titl-txt.resp  { font-size: 1.6em; left: 0.6em; }         
    .theme-img.resp { max-width: 50%; height: auto; }        
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;} 
    .menu-item.resp { font-size: 1.2em;  min-height: 1.4em; padding: 0.5em 0;}    
    .menu-item-spacer.resp { height: 1em; }
    a.menu-item.resp.active { color: var(--mcol-white); background-color: inherit; border-radius: 0px; margin-bottom: 0px; }
    .hambo.resp { display: block; padding: 2px; }
    .info.resp  { display: none; }
    .menu2-item.resp { margin: auto 0.5em; }
    .icons.resp { }    
    .popu-cont.resp { font-size: 0.5em; }
    .stats-cont.resp { column-count: 2; }
    #content-ads-right { float: none; display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 600px) and (max-width:900px) {
    .page-head.resp {  height: 3.4em; }
    .page-panel.resp {     top: 3.4em; right: 0; left:auto; width: auto; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9; }
    .page-cont.resp {     top: 3.4em;  left: 0; padding-left:0.5em; min-height: calc(100dvh - 3.4em); }
    .titl-txt.resp  { font-size: 1.6em; left: 0.6em; }     
    .theme-img.resp { max-width: 75%; height: auto; }    
    .menu.resp { display:flex; flex-direction: column; width: auto; padding: 0 0.5em;} 
    .menu-item.resp { font-size: 1em;  min-height: 1.2em; padding: 0.5em 0;}    
    .menu-item-spacer.resp { height: 1em; }
    .hambo.resp { display: block; padding: 4px; } 
    .info.resp  { display: none; }
    .icons.resp { }        
    .popu-cont.resp { font-size: 0.6em; }
    .stats-cont.resp { column-count: 2; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 900px) and (max-width:1200px) {
    .page-head.resp {  height: 3.2em; }
    .page-panel.resp {     top: 3.2em; left: 0; height:1.8em; width: 100%; display: block!important; }
    .page-cont.resp {   top: calc(3.2em + 1.8em);  left: 0px; padding-left: 1em; min-height: calc(100dvh - 3.2em - 1.8em);  }
    .titl-txt.resp  { font-size: 1.8em; left: 0.6em; }
    .theme-img.resp { max-width: 100%; height: auto; }  
    .menu.resp { display:flex; flex-direction: row; width: auto ; padding: 0 1em; }    
    .hambo.resp { display: none; } 
    .info.resp  { display: block; }
    .icons.resp {  }    
    .popu-cont.resp { font-size: 0.8em; }
    .stats-cont.resp { column-count: 3; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 1200px) {
    .page-head.resp {  height: 3.6em; }
    .page-panel.resp {  top: 3.6em; left: 0px; height: 2em; width: 100%; display: block!important;}
    .page-cont.resp {  top: calc(3.6em + 2em);  left: 0px; padding-left: 1em; min-height: calc(100dvh - 3.6em - 2em); }
    .titl-txt.resp  { font-size: 2.4em; left: 0.6em; }
    .theme-img.resp { max-width: 125%; height: auto; }
    .menu.resp { display:flex; flex-direction: row; width: auto ; padding: 0 1.5em; }
    .hambo.resp { display: none; } 
    .info.resp  { display: block; }
    .icons.resp {  }    
    .popu-cont.resp { font-size: 1em; }
    .stats-cont.resp { column-count: 4; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 1600px) {  /* wallpaper size */
    .page-head.resp {  height: 3.6em; }
    .page-panel.resp {     top: 3.6em; left: 0px; height: 2em; width: 100%; display: block!important;}
    .page-cont.resp {  top: calc(3.6em + 2em);  left: 0px; padding-left: 1.5em; min-height: calc(100dvh - 3.6em - 2em); }
    .titl-txt.resp  { font-size: 2.4em; left: 0.6em; }
    .theme-img.resp { max-width: 125%; height: auto; }                
    .menu.resp { display:flex; flex-direction: row; width: auto ; padding: 0 1.5em; }    
    .hambo.resp { display: none; } 
    .info.resp  { display: block; }
    .icons.resp {  }    
    .popu-cont.resp { font-size: 1em; }
    .stats-cont.resp { column-count: 4; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }

    /* only real large screens get bigger containers */
    section { max-width: 1000px; }
    .synoWelcomeContainer { max-width: 1000px;}
    .synoInstructions { max-width: 1000px;}
    .synoRegularPageContainer { max-width: 1000px;}
    #content-ads-bottom { max-width: 1000px; }    
}




/* === RESPONSIVE ADS STYLING ========================== */

.adsgoogle-resp-wide { display: block; width: 728px; }
@media (max-width: 599px)  { .adsgoogle-resp-wide { width: 320px; } }
@media (min-width: 600px)  { .adsgoogle-resp-wide { width: 468px; } }
@media (min-width: 900px)  { .adsgoogle-resp-wide { width: 728px; } }
@media (min-width: 1200px) { .adsgoogle-resp-wide { width: 970px; } }

/* no google skyscrapers on small ui: */
.adsgoogle-resp-right { display: block; width: 120px; }
@media (max-width: 599px)  { .adsgoogle-resp-right { display: none; width: 100px; } }
@media (min-width: 600px)  { .adsgoogle-resp-right { display: block; width: 120px; } }
@media (min-width: 900px)  { .adsgoogle-resp-right { display: block; width: 120px; } }
@media (min-width: 1200px) { .adsgoogle-resp-right { display: block; width: 160px; } }

/* no BOL skyscrapers on small ui: */
.bol-resp-right { display: block;  }
@media (max-width: 599px)  { .bol-resp-right { display: none; } }