/*
 *******************************************************************
 * Style sheet for Mick's Rijmwoordenboek - (c) 2025 michael Janus *
 *******************************************************************
 last update: 20 nov 2025
 */

/* === TAGS === */

:root {
    --mbluedrk-txt: #204080;
    --mblue-txt: #2070E0;
    --mblue-link: #2020E0;
    --mblue-link-h: #0000FF;
    --mblue3-txt: #406080;
    --mred-txt: #E02020;
    --mgreen-txt: #208020;
    --mgray-txt: #A0A0C0;
    --mgray-bg: #CCCCCC;
    --mgray-link: #A0A0C0;
    --mgray-link-h: #0000FF;
    --mblue-bg: #4070E0;
    --mbluedrk-bg: #203060;
    --mwhite-bg: #FDFDFD;
    --mwhite-txt: #FDFDFD;
    --mwhite-menu: #FFFFFF;
    --mwhite-menu-a: #FFFF00;
    --mwhite-menu-h: #FFFF66;
}

:root[data-theme="dark"] {
    --mwhite-bg: #1c2739; /*#102040; */

    --mbluedrk-txt: #F0FDFF;
    --mblue-txt: #4090F0;
    --mblue-link: #4070D0;
    --mblue-link-h: #d0d033;
    --mblue3-txt: #F0FDFD;
    --mgreen-txt: #409040;
    --mgray-txt: #4090F0;
    --mred-txt: #e0e020; /* #F06060; */
}


/* === TAGS === */

body { border-collapse: collapse; color: var(--mbluedrk-txt); background-color: var(--mwhite-bg);
      font: normal 100% Verdana, Arial, Times, sans-serif; overflow: hidden; }

html[data-theme="dark"] .page-head { filter: brightness(0.75); }
html[data-theme="dark"] .page-side { filter: brightness(0.75); }
html[data-theme="dark"] .page-cont { filter: brightness(0.9); }


/* h1 is used for page titles */
h1 { margin-top: 0; font-size: 1em; text-align: center; font-weight: normal; color: var(--mgray-txt);}
h2 { font-size: 0.9em; font-weight: 500;}
h3, td h3, ol h3 { font-size: 0.9em; text-decoration: underline;}
h4, h5 { font-size: 0.9em; }
h6  { font-size: 0.9em; display: inline }

a, li a, ol li a { color: var(--mblue-link); font-weight: 500; text-decoration: none;}
a:hover, li a:hover, ol li a:hover { color: var(--mblue-link-h); 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; }

/* make bold a bit less bold */
strong { font-weight: 500; }
b { font-weight: 500; }
      
/* === COLORS === */

.mbluedrk-txt { color: var(--mbluedrk-txt); }
.mblue-txt { color: var(--mblue-txt); }
.mred-txt { color: var(--mred-txt); }
.mgreen-txt { color: var(--mgreen-txt); }
.mgray-txt { color: var(--mgray-txt); }
.mblue-bg { background-color: var(--mblue-bg); }
.mbluedrk-bg { background-color: var(--mbluedrk-bg); }
.mwhite-bg { background-color: var(--mwhite-bg); }
.mwhite-txt { color: var(--mwhite-txt); }

/* == MAIN TITLE BAR AND SIDE BAR COLORS == */
.mblue-bg-grad1 {    
    background: #4070E0;
    background: linear-gradient(#204080, #4060D0, #4070E0);     
    background: -webkit-linear-gradient(#204080, #4060D0, #4070E0); 
    background: -moz-linear-gradient(#204080, #4060D0, #4070E0); 
    background: -o-linear-gradient(#204080, #4060D0, #4070E0); 
}
.mblue-bg-grad2 {
    background: #4070E0;
    background: linear-gradient(#4070E0, #203060);
    background: -webkit-linear-gradient(#4070E0, #203060);
    background: -moz-linear-gradient(#4070E0, #203060);
    background: -o-linear-gradient(#4070E0, #203060);
}


/* === FX === */
.popu-cont { font-size: 1em; }
.popu-item { column-count: 5; column-width: 5em; column-gap: 1em; height: auto;}
.popu-cont.resp { font-size: 1em; }
.stats-cont { border: 1px solid #2070E0; border-radius: 3%; padding: 10px; }
.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-side { position: absolute; margin: 0; padding: 0; bottom: 0; left: 0; }
.page-cont { position: absolute; margin: 0; padding: 5px 10px 20px 15px ; right: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden;}
.page-cont-bar { width: 100%; display:flex; justify-content: flex-end; }
.page-cont.fx {            
    box-shadow:  1px 1px 2px 3px rgba(0, 0, 0, 0.8), -3px -3px 1px 2px rgba(180, 220, 255, 1), inset 10px 5px 10px rgba(128, 128, 128, .5); 
    -moz-box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, 0.8), -3px -3px 1px 2px rgba(180, 220, 255, 1), inset 10px 5px 10px rgba(128, 128, 128, .5);                 
    -webkit-box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, 0.8),    -3px -3px 1px 2px rgba(180, 220, 255, 1), inset 10px 5px 10px rgba(128, 128, 128, .5);                                     
}
.page-cont-footer { margin: 4em 0 1em 0 ; padding: 0px; }

.page-head.resp {  height: 3.2em; }
.page-side.resp {     top: 3.2em; width: 100px; display: block; }
.page-cont.resp {     top: 3.2em;  left: 100px;  }
.page-cont-bar.resp { }
.page-cont-footer.resp {  }

/* only uses on wide screens */
#page-ads-outer-left { display: none; }
#page-ads-outer-right { display: none; }

.titl-txt {    top: 40%; width: 100%; transform: translateY(-40%); white-space: nowrap; overflow: hidden; }
.titl-txt.fx { font-family: Arial; color: rgba(255,30,30,0.7); text-shadow: 0 4px 1px #2e2e2e, 0 0 1px rgba(255,255,255,0.5); }
.titl-txt.resp { font-size: 1.8em; position: absolute; left: 120px; } 
.titl-mick { display: inline; }
.titl-mick.resp { display: inline; }
.titl-boek { display: inline;}
.titl-boek.resp { display: inline;}
.titl-premium::after {
    content: "\2605"; /* ★ */
    display: inline-block;
    font-size: 0.4em;
    position: relative;
    top: -1.2em;
    left: -0.3em;
    z-index: 1;
    color: gold;
    animation: premium-star-effect 12s linear infinite;
    transform-origin: center center;
}
@keyframes premium-star-effect {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.theme-img {
  float: right; margin: 0px 10px 10px 0px; border: none; width: 200px; 
  background-repeat: no-repeat; background-size: contain; background-position: center; 
}
.theme-img.resp { max-width: 30%; height: auto; }
.theme-img[data-theme="sinterklaas"] { background-image: url('/sites/rhyme/resources/sinterklaas.webp'); aspect-ratio: 132 / 200; }
.theme-img[data-theme="kerst"]       { background-image: url('/sites/rhyme/resources/santa.webp'); aspect-ratio: 180 / 164; }
.theme-img[data-theme="oudjaar"]     { background-image: url('/sites/rhyme/resources/champagne.jpg');aspect-ratio: 180 / 143; }
.theme-img[data-theme="nieuwjaar"]   { background-image: url('/sites/rhyme/resources/champagne.jpg'); aspect-ratio: 180 / 143;}
.theme-img[data-theme="valentijn"]   { background-image: url('/sites/rhyme/resources/valentine.png'); aspect-ratio: 222 / 148;}

#page-outer { background-color: var(--mbluedrk-bg) !important; }
#page-outer[data-theme="kerst"] { background-image: url('/sites/rhyme/resources/xmastree-bgblue.webp') !important; background-repeat: repeat; }

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

.hambo { position: absolute; top: 0; left: 5px; }
.hambo.resp { display: none; padding: 4px; }
.hambo .bar { background-color: black; width: 30px; height: 6px; margin: 4px 0; }

.menu { font-family: Verdana, Arial, Times, Serif; }        
.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.maybe { display: block; }
a.menu-item { border-style: solid; border-collapse:separate; border-width: 1px;        
              font-family: Verdana, Arial, Times, Serif;
              text-decoration: none; text-transform: uppercase; }
a.menu-item         { color: var(--mwhite-menu); border-color: #99CCFF #000066 #000066 #99CCFF; }
a.menu-item:link    { color: var(--mwhite-menu); border-color: #99CCFF #000066 #000066 #99CCFF; }
a.menu-item:visited { color: var(--mwhite-menu); border-color: #99CCFF #000066 #000066 #99CCFF; }
a.menu-item:active  { color: var(--mwhite-menu-a); border-color: #99CCFF #000066 #000066 #99CCFF; }
a.menu-item:hover   { color: var(--mwhite-menu-h); border-color: #FFFFFF #000033 #000033 #FFFFFF; }

.info { font-family: Verdana, Arial, Times, Serif; margin: 2em 1em 1em 1em; }        
.info.resp { display: block; font-size:0.5em; }

.footer-menu { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; gap: 0.2em; width: 100%; }
.footer-menu.resp {  }
.footer-menu-info   { order: 2; flex: 1 1 auto; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; gap: 0.2em; padding-right: 1em; }
.footer-menu-info.resp { }
.footer-menu-social {  order: 1;flex: 1 1 auto; display: flex; flex-direction: row; justify-content: flex-start; gap: 0.5em; padding-left:1em;}
.footer-menu-social.resp { display: none;}
.footer-menu-item
.footer-menu-item { display: inline-block; }
.footer-menu-item.resp { font-size: 0.8em;  min-height: 0.4em; }
.footer-menu-item.maybe { display: inline-block !important; }
a.footer-menu-item { font-family: Verdana, Arial, Times, Serif; text-decoration: none;  }
a.footer-menu-item   { color: var(--mgray-link);  }
a.footer-menu-item:link     { color: var(--mgray-link);  }
a.footer-menu-item:visited  { color: var(--mgray-link);  }
a.footer-menu-item:active   { color: var(--mgray-link);  }
a.footer-menu-item:hover    { color: var(--mgray-link-h);  }


.icons { padding: 0; width:100%; }
.icons.resp { position: absolute; bottom: 10px; margin-left: 7px;}
a.icon { text-decoration: none; opacity: 0.8;}
a.icon:link    { color: var(--mwhite-menu); }
a.icon:visited { color: var(--mwhite-menu); }
a.icon:active  { color: var(--mwhite-menu-a); }
a.icon:hover   { color: var(--mwhite-menu-h); }
a.icon img { margin-left: 0px; margin-right: 0px;}

.highlite-icon { animation: highlite 7s infinite; }

@keyframes highlite {
  0%, 10%, 20%, 30% {
    transform: scaleX(1);
  }
  15%,25% {
    transform: scaleX(0.1);
  }
}


/* === TOOLS  ======================== */
.darkui-switch { font-size: 1.2em; margin-bottom: 2px; }
.switch {
    width: 2.2em;
    height: 1.2em;
    border-radius: 1em;
    position: relative;
    cursor: pointer;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1em;
    box-sizing: border-box;
}
.switch-knob {
    width: 1em;
    height: 1em;
    background: var(--mwhite-bg);
    border-radius: 50%;
    position: absolute;
    top: 0.1em;
    transition: left 0.2s;
    z-index: 2;
}
.switch.on { background: var(--mblue-txt); }
.switch.off { background: var(--mgray-bg); }
.switch.on .switch-knob { left: 1.1em; }
.switch.off .switch-knob { left: 0.1em; }
.switch-icon {
    color: var(--mblue3-txt);
    font-size: 0.9em;
    display: flex;
    line-height: 1em;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1;
    margin: 0.1em 0.1em 0.1em 0.1em;
}



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

#content { }
#content-ads-top { display: flex; justify-content: center; margin-bottom: 0.8em; max-height: 250px; }
#content-ads-left { max-width: 200px; overflow: hidden; } /* bound ads if too large */
#content-ads-right{ float:right; max-width: 316px; min-width: 316px; display: block; visibility: visible; padding-left: 16px; padding-bottom: 20px;}
#content-ads-right::after { clear:both; }
#content-ads-bottom { clear: both; display: flex; justify-content: center; }
#content-ads-inline { display: flex; justify-content: left;  }
#content-ads-inline1 { display: flex; justify-content: left; max-width: 740px;overflox-x: hidden;}
#content-ads-inline2 { display: flex; justify-content: left; max-width: 740px;overflox-x: hidden;}
#content-ads-inline3 { display: flex; justify-content: left; max-width: 740px;overflox-x: hidden;}
#content-ads-wide { width: 100%; display: flex; justify-content: center; }
#content-lastupdate { font-size: 0.6em; }
.content-ads-noflicker-leaderboard { min-height: 92px; }
.content-ads-noflicker-leaderboard-mobile { min-height: 102px; }


/* === WELCOME PAGE ======================== */

#directInput { width: 100%; text-align: center; font-size: 0.8em; margin: 1em; }
#directInputForm { display: inline-block; }
#directInputLabel {}
#directInputField {}
#directInputSubmit {}
#welcome-cont { overflow-x: hidden; }
#welcome-cont::after { clear: both; }
#welcome-text { }

/* === RHYME ENGINE ========================== */
#rhymeSearch { display: grid; grid-template-columns: auto 1fr; grid-gap: 1.5em; }
#rhymeInput { width: auto;}
#rhymeInputForm { }
#rhymeInputLabel { font-size: 1em; }
#rhymeInputField { width: 5em; }
#rhymeInputSubmit { }
#directInputField { width: 5em; }
#directInputSubmit { }

#rhymeResults { overflow-x: hidden; display: block; flex-wrap: nowrap; }
#rhymeResultsLabel { font-size: 1em; }
#rhymeResultsRequested { text-decoration: underline; }
#rhymeResultsWordsContainer { flex: 1 1 auto; }
#rhymeResultsWords  { /* font-family: "Lucida Console", Monaco, monospace; */}
#rhymeResultsNoWords { }
#rhymeResultsNoWordsCat { color: var(--mred-txt); }
#rhymeResultsSuggestion { color: var(--mred-txt); }
#rhymeResultsSuggestionCaption { font-size: 1em; color: var(--mblue-txt); }
#rhymeResultsSuggestionLower { }
#rhymeResultsSuggestionClose { }

/* === OTHER PAGES ========================== */
#textContent { }

/* === SYNO ENGINE ========================== */

#synoInput { width: 100%; margin: 10px 0px 0px 0px; }
#synoInputForm { display: inline-grid; grid-template-columns: auto auto auto; gap:0.5em; margin:0; padding: 0;}
#synoInputLabel { grid-column: 1 / 2; width: auto;}
#synoInputField { grid-column: 2 / 3; width: 10em;}
#synoSubmitRhyme { display:none; grid-column: 3 / 4; width: auto;}
#synoSubmitSyno { grid-column: 3 / 4; width: auto;} /* grid-row: 2/3; */
#synoExtern { font-size: 0.9em; grid-column: 2 / 4; grid-row: 2/3; width: auto; padding-top:0.5em; }

.synoInstructions {
    color: var(--mblue3-txt);
}   
.synoResultsRelationContainer {
    border-top: solid 1px #cccccc;
    border-bottom: solid 1px #cccccc;
    padding: 0.5em 0em;
} 
h2.synoResultsRelationLabel { 
    color: var(--mblue-txt);
    font-weight: 500;
    font-size: 1em;
    text-transform: uppercase;
}
.synoResultsTagContainer {    
    margin-bottom: 1em;
}
h3.synoResultsTagLabel {  
    text-decoration: none ;
    font-weight: normal;
    font-style: italic;
}
/* add margin to words container when there is h3 */
h3.synoResultsTagLabel ~ .synoResultsSenseContainer {      
    padding-left: 0.5em;
}
.synoResultsSenseContainer {
    margin-bottom: 0.7em;
}
.synoResultsSenseLabel, .synoResultsSenseLabelRef {
    display: inline-block;
    font-size: 0.8em;
    padding-top: 0.2em;
    vertical-align: top;
}
.synoResultsSenseLabel::before { content: ''; }
.synoResultsSenseLabel::after { content: '.'; margin-right: 0.4em; }
.synoResultsSenseLabelRef::before { content: '['; }
.synoResultsSenseLabelRef::after {  content: ']'; margin-right: 0.5em;}
.synoResultsWordsContainer {  
}
.synoResultsWordItem {
    color: var(--mblue3-txt);
}


/* === RESPONSIVE ELEMENT OVERRIDES ========================== */

/* NOTE: finegrained title control for different phone sizes; */
/* no mick on very small screens, title can be larger */

@media (max-width: 340px) {        
    .titl-txt.resp  { font-size: 1.4em; left: 50px; }
    .titl-mick.resp { display: none; }    
}
@media (min-width: 340px) and (max-width: 360px) {
    .titl-txt.resp  { font-size: 1.5em; left: 50px; }
    .titl-mick.resp { display: none; }    
}
@media (min-width: 360px) and (max-width: 380px) {
    .titl-txt.resp  { font-size: 1.6em; left: 50px; }
    .titl-mick.resp { display: none; }    
}
@media (min-width: 380px) and (max-width: 420px) {
    /* larger smart phones and newer iphones */
    .titl-txt.resp  { font-size: 1.2em; left: 50px; }
    .titl-mick.resp { display: inline; } 
}

@media (max-width: 420px) {
    .page-head.resp {  height: 3.2em; }
    .page-side.resp {     top: 3.2em; left: 0; width: 190px; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9;    }
    .page-cont.resp {     top: 3.2em;  left: 0px; }
    .hambo.resp { display: block; padding: 0.1em; margin: 0.2em; }
    .footer-menu-social.resp { display: flex; }
    .footer-menu-item.maybe { display: none !important; }

    .titl-txt.fx { color: rgba(255,0,0,1); font-weight: 500; }    

    .darkui-switch { font-size: 1.5em; }
    .menu-item.resp { font-size: 1.2em; }
    .menu-item.maybe { display: none; }
    .info.resp  { display: none; }
    .icons.resp { position: relative; margin-top: 2em;}
    a.icon img { width: 2rem; height: 2rem; }

    #textContent { font-size: 1.2em; }

    .theme-img.resp { max-width: 25%; height: auto; }
    #welcome-cont { font-size:1.2em; overflow-x: hidden; margin-top: 1em;}
    #welcome-cont::after { clear: both; }
    #welcome-text { }
    #directInput { width: 100%; font-size: 1.0em; margin: 0em; }
    #directInputForm { display: flex; align-items: center; width:100%; margin:0; padding-right: 1em;}
    #directInputLabel { display: none; }
    #directInputField { font-size: 1.4em; flex: 1 1 0; box-sizing: border-box; width: auto; margin-right:0.5em;}
    #directInputSubmit { font-size: 1.4em; flex-shrink: 0; margin-left: auto; }

    #rhymeSearch { display: flex; flex-direction: column; gap: 1.5em; }
    #rhymeInput { width: 100%; }
    #rhymeInputForm { display: flex; align-items: center; width:100%; margin:0; padding: 0;}
    #rhymeInputLabel { display: none; }
    #rhymeInputField { font-size: 1.4em; flex: 1 1 0; box-sizing: border-box; width: auto; margin-right:0.5em;}
    #rhymeInputSubmit { font-size: 1.4em; flex-shrink: 0; margin-left: auto; }
    #rhymeResults { font-size: 1.2em; }
    #rhymeResultsWords { font-size: 1.4em; }
    #rhymeResultsSuggestion { font-size:1.1em;}
    
    #synoInput { width: 100%; margin: 10px 0px 20px 0px; }
    #synoInputForm { display: grid; grid-template-columns: 1fr auto; gap:0.5em; width:100%; margin:0; padding: 0;}
    #synoInputLabel { display: none; }
    #synoInputField { font-size: 1.4em; grid-row: 1 / 2; grid-column: 1 / 2; width: auto;}
        
    #synoSubmitRhyme { display:none; font-size: 1.3em; grid-row: 1 / 2; grid-column: 2 / 3; width: auto;}
    #synoSubmitSyno { font-size: 1.3em; grid-row: 1 / 2; grid-column: 2 / 3; width: auto;}
    
    
    #synoExtern { font-size: 0.9em; grid-row: 2/3; grid-column: 1 / 2; width: auto; padding-top:0.5em; text-align:right;}
    #synoResults { font-size: 1.1em; }
    .synoResultsTagLabel { font-size: 1.2em; }
    .synoResultsWordItem { font-size: 1.4em; }

    .popu-cont.resp { font-size: 0.6em; }
    .stats-cont.resp { column-count: 1; }

    #content-ads-right { display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 420px) and (max-width: 460px) {        
    .titl-txt.resp  { font-size: 1.3em; left: 50px; }
    .titl-mick.resp { display: inline; } 
}
@media (min-width: 460px) and (max-width: 490px) {        
    .titl-txt.resp  { font-size: 1.4em; left: 50px; }
    .titl-mick.resp { display: inline; } 
}

@media (min-width: 420px) and (max-width: 490px) {
    .page-head.resp {  height: 3.2em; }
    .page-side.resp {     top: 3.2em; left: 0; width: 200px; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9;    }
    .page-cont.resp {     top: 3.2em;  left: 0px; }
    .hambo.resp { display: block; padding: 0.1em; margin: 0.2em; }
    .footer-menu-social.resp { display: flex; }

    .titl-txt.fx { color: rgba(255,0,0,1); font-weight: 500; }

    .darkui-switch { font-size: 1.5em; }
    .menu-item.resp { font-size: 1.2em; }
    .menu-item.maybe { display: none; }
    .info.resp  { display: none; }
    .icons.resp { position: relative; margin-top: 2em;}    
    a.icon img { width: 2rem; height: 2rem; }

    #textContent { font-size: 1.2em; }

    .theme-img.resp { max-width: 30%; height: auto; }
    #welcome-cont { font-size:1.2em; overflow-x: hidden; margin-top: 1em;}
    #welcome-cont::after { clear: both; }
    #welcome-text { }
    #directInput { width: 100%; font-size: 1.0em; margin: 0em; }
    #directInputForm { display: flex; align-items: center; width:100%; margin:0; padding-right: 1em;}
    #directInputLabel { font-size: 1.4em; display: none;}
    #directInputField { font-size: 1.4em; flex: 1 1 0; box-sizing: border-box; width: auto; margin-right:0.5em;}
    #directInputSubmit { font-size: 1.4em; flex-shrink: 0; margin-left: auto; }

    #rhymeSearch { display: flex; flex-direction: column; gap: 1.5em; }
    #rhymeInput { width: 100%; }
    #rhymeInputForm { display: flex; align-items: center; width:100%; margin:0; padding: 0;}
    #rhymeInputLabel { font-size: 1.4em; display: none;  }
    #rhymeInputField { font-size: 1.4em; flex: 1 1 0; box-sizing: border-box; width: auto; margin-right:0.5em;}
    #rhymeInputSubmit { font-size: 1.4em; flex-shrink: 0; margin-left: auto; }
    #rhymeResults { font-size: 1.2em; }
    #rhymeResultsWords { font-size: 1.3em; }
    #rhymeResultsSuggestion { font-size:1.1em;}
    
    #synoInput { width: 100%; margin: 10px 0px 20px 0px; }
    #synoInputForm { display: grid; grid-template-columns: auto 1fr auto; gap:0.5em; width:100%; margin:0; padding: 0;}
    #synoInputLabel { font-size: 1.4em; grid-column: 1 / 2; width: auto;}
    #synoInputField { font-size: 1.4em; grid-column: 2 / 3; width: auto;}
    
    #synoSubmitRhyme { display: None; font-size: 1.4em;grid-column: 3 / 4; width: auto;}
    #synoSubmitSyno { font-size: 1.4em; grid-column: 3 / 4; width: auto;}
    
    #synoExtern { font-size: 0.9em; grid-column: 2 / 4; grid-row: 2/3; width: auto; padding-top:0.5em;}
    #synoResults { font-size: 1.1em; }
    .synoResultsTagLabel { font-size: 1.2em; }
    .synoResultsWordItem { font-size: 1.4em; }

    .popu-cont.resp { font-size: 0.6em; }
    .stats-cont.resp { column-count: 1; }

    #content-ads-right { display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 490px) and (max-width: 520px) {
    /* some tables or pc small browser windows */
    .titl-txt.resp  { font-size: 1.6em; left: 50px; }
    .titl-mick.resp { display: inline; } 
}
@media (min-width: 520px) and (max-width: 600px) {
    /* some tables or pc small browser windows */
    .titl-txt.resp  { font-size: 1.7em; left: 50px; }
    .titl-mick.resp { display: inline; }    
}
@media (min-width: 490px) and (max-width: 600px) {
    .page-head.resp {  height: 3.6em; }
    .page-side.resp {     top: 3.6em; left: 0; width: 200px; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9;    }
    .page-cont.resp {     top: 3.6em;  left: 0px; }
    .hambo.resp { display: block; padding: 0.1em; margin: 0.2em; }
    .footer-menu-social.resp { display: flex; }

    .titl-txt.fx { color: rgba(255,0,0,1); font-weight: 500; }    

    .darkui-switch { font-size: 1.5em; }
    .menu-item.resp { font-size: 1.2em; }
    .menu-item.maybe { display: none; }
    .info.resp  { display: none; }
    .icons.resp { position: relative; margin-top: 2em;}
    a.icon img { width: 2rem; height: 2rem; }

    #textContent { font-size: 1.2em; }

    .theme-img.resp { max-width: 30%; height: auto; }
    #welcome-cont { font-size:1.2em; overflow-x: hidden; margin-top: 1em;}
    #welcome-cont::after { clear: both; }
    #welcome-text { }
    #directInput { width: 95%; font-size: 1.0em; margin: 0em; }
    #directInputForm { display: flex; align-items: center; width:100%; margin:0; padding-right: 1em;}
    #directInputLabel { font-size: 1.4em; }
    #directInputField { font-size: 1.4em; flex: 1 1 0; box-sizing: border-box; width: auto; margin-right:0.5em;}
    #directInputSubmit { font-size: 1.4em; flex-shrink: 0; margin-left: auto; }

    #rhymeSearch { display: flex; flex-direction: column; gap: 1.5em; }
    #rhymeInput { width: 95% }
    #rhymeInputForm { display: flex; align-items: center; width:100%; margin:0; padding: 0;}
    #rhymeInputLabel { font-size: 1.4em; }
    #rhymeInputField { font-size: 1.4em; flex: 1 1 0; box-sizing: border-box; width: auto; margin-right:0.5em;}
    #rhymeInputSubmit { font-size: 1.4em; flex-shrink: 0; margin-left: auto; }
    #rhymeResults { font-size: 1.2em; }
    #rhymeResultsWords { font-size: 1.4em; }
    #rhymeResultsSuggestion { font-size:1.1em;}

    #synoInput { width: 95%;  }
    #synoInputForm { display: grid; grid-template-columns: auto 1fr auto; gap:0.5em; width:100%; margin:0; padding: 0;}
    #synoInputLabel { font-size: 1.4em; grid-column: 1 / 2; width: auto;}
    #synoInputField { font-size: 1.4em; grid-column: 2 / 3; width: auto;}
    #synoSubmitRhyme { display: None; font-size: 1.4em;grid-column: 3 / 4; width: auto;}
    #synoSubmitSyno { font-size: 1.4em; grid-column: 3 / 4; width: auto;}
    #synoResults { font-size: 1.1em; }
    .synoResultsTagLabel { font-size: 1.2em; }
    .synoResultsWordItem { font-size: 1.4em; }

    .popu-cont.resp { font-size: 0.6em; }
    .stats-cont.resp { column-count: 1; }

    #content-ads-right { display: none; visibility: hidden; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}

@media (min-width: 820px) and (max-width: 900px) {
    .page-cont-bar.resp { height: 5px; }
}
@media (min-width: 600px) and (max-width: 900px) {
    .page-head.resp {  height: 3.2em; }
    .page-side.resp {     top: 3.2em; left: 0; width: 180px; display: none; bottom: auto; height: auto; z-index: 10; opacity: 0.9; }    
    .page-cont.resp {     top: 3.2em;  left: 0; }
    .hambo.resp { display: block; padding: 4px; }
    .footer-menu-social.resp { display: flex; }
    .titl-txt.resp  { font-size: 1.8em; left: 80px; }

    .darkui-switch { font-size: 1.4em; }
    .menu-item.resp { font-size: 1.0em; }
    .menu-item.maybe { display: none; }
    .info.resp  { display: none; }
    .icons.resp { position: relative; margin-top: 2em;}        
     a.icon img { width: 1.6rem; height: 1.6rem; }

    #textContent { font-size: 1.2em; }

    .theme-img.resp { max-width: 30%; height: auto; }
    #welcome-cont { font-size:1.2em; }
    #directInputLabel { font-size: 1.2em; }
    #directInputField { font-size: 1.2em; }
    #directInputSubmit { font-size: 1.2em; }

    #rhymeInputLabel { font-size: 1.0em; }
    #rhymeInputField { font-size: 1.0em; }
    #rhymeInputSubmit { font-size: 1.0em; }
    #rhymeResults { font-size: 1.1em; }
    #rhymeResultsLabel { font-size: 1.1em; }
    #rhymeResultsWords { font-size: 1.1em; }
    #rhymeResultsSuggestion { font-size:1.1em;}

    #synoInputLabel { font-size: 1.1em; }
    #synoInputField { font-size: 1.1em; }
    #synoSubmitRhyme { font-size: 1.1em; }
    #synoSubmitSyno { font-size: 1.1em; }
    #synoResults { font-size: 1.1em; }

    .popu-cont.resp { font-size: 0.8em; }
    .stats-cont.resp { column-count: 3; }

    #content-ads-top { justify-content: flex-start; }
    #content-ads-right { max-width: 170px; min-width: 170px; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 930px) and (max-width: 1200px) {
    .page-cont-bar.resp { height: 5px;  }
}
@media (min-width: 900px) and (max-width: 1200px) {
    .page-head.resp {  height: 3.2em; }
    .page-side.resp {     top: 3.2em; width: 120px; display: block!important; bottom: 0; }
    .page-cont.resp {     top: 3.2em;  left: 120px; }
    .hambo.resp { display: none; }
    .footer-menu-social.resp { display: none; }
    .titl-txt.resp  { font-size: 1.8em; left: 140px; }

    .info.resp  { display: block; }
    .icons.resp { position: absolute; bottom: 10px; margin-left: 2px; }    
     a.icon img { width: 18px; height: 18px; }  /* only needed at this intermediate res to fit all icons */

    .theme-img.resp { max-width: 100%; height: auto; }
    .popu-cont.resp { font-size: 1em; }
    .stats-cont.resp { column-count: 3; }

    #content-ads-top { justify-content: flex-start; }
    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}
@media (min-width: 1200px) and (max-width: 1600px) {
    .page-head.resp {  height: 3.6em; }
    .page-side.resp {     top: 3.6em; width: 140px; display: block!important; bottom: 0; }
    .page-cont.resp {     top: 3.6em;  left: 140px; }
    .page-cont-bar.resp { height: 5px; }
    .hambo.resp { display: none; }
    .footer-menu-social.resp { display: none; }
    .titl-txt.resp  { font-size: 2.4em; left: 160px; }

    .info.resp  { display: block; }
    .icons.resp { position: absolute; bottom: 10px; }

    .theme-img.resp { max-width: 125%; height: auto; }

    .popu-cont.resp { font-size: 1.4em; }
    .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-side.resp {     top: 3.6em; width: 140px; display: block!important; bottom: 0; }
    .page-cont.resp {     top: 3.6em;  left: 140px; }
    .page-cont-bar.resp { height: 5px; }
    .hambo.resp { display: none; }
    .footer-menu-social.resp { display: none; }
    .titl-txt.resp  { font-size: 2.4em; left: 160px; }

    .info.resp  { display: block; }
    .icons.resp { position: absolute; bottom: 10px; }

    .theme-img.resp { max-width: 125%; height: auto; }

    .popu-cont.resp { font-size: 1.4em; }
    .stats-cont.resp { column-count: 4; }

    .content-ads-noflicker-leaderboard { min-height: 92px; }
    .content-ads-noflicker-leaderboard-mobile { min-height: 102px; }
}

/* === RESPONSIVE ADS STYLING FOR WEBADS ADS IN OUTER AREA ==================== */
@media (min-width: 1850px) {
    #page-ads-outer-left, #page-ads-outer-right { display: flex; flex: 1; padding-top:4em;  justify-content: center; }
}
@media (min-width: 1850px) and (max-width: 1920px) {  /* center = 1600, smallest scraper 120 wide 1600 + 2 *120 */
    #page-ads-outer-left, #page-ads-outer-right { min-width: 120px;}
}
@media (min-width: 1920px) and (max-width: 2200px) {  /* center = 1600, medium scraper 160 wide 1600 + 2 *160 = 1920 */
    #page-ads-outer-left, #page-ads-outer-right { min-width: 160px;}
}
@media (min-width: 2200px) and (max-width: 2280px) {  /* center = 1600, wide scraper 300 wide 1600 + 2 * 300 = 2200 */
    #page-ads-outer-left, #page-ads-outer-right { min-width: 300px;}
}
@media (min-width: 2280px)  {  /* center = 1600, ultra wide scraper 336 wide 1600 + 2 * 336 = 2272 */
    #page-ads-outer-left, #page-ads-outer-right { min-width: 336px;}
}



/* === RESPONSIVE ADS STYLING FOR GOOGLE ========================= */

.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; } }