@charset "utf-8";
/* index.php */
html, body{min-height:100lvh;margin:0;font-family:system-ui, sans-serif;font-size:calc(15px + 0.390625vw);overflow-x:clip;scrollbar-gutter:auto;scrollbar-width:thin;scrollbar-color:rgba(46,98,114,.33) rgba(255,255,255,.5);scroll-behavior:auto!important;box-sizing:border-box;-webkit-text-size-adjust:none}
*,*::before,*::after{box-sizing:inherit} /* important */
.big{font-size:175%}
.small{font-size:75%}
.caps{font-variant:small-caps}
img{border:0;object-fit:cover;object-position:center;transition:all ease-in-out .5s}
/* transition images on hover */
.img{position:relative;margin:0}
.hover_img{position:absolute;top:0;left:0;opacity:0}
.img:hover .hover_img{opacity:1}
/* anchors */
a{text-decoration:none;transition:all ease-in-out .5s}
a:active,a:hover{border:transparent}
a:focus-visible{outline:0}
a.extlnk{text-decoration:underline;color:inherit}
.extlnk:after{content: "\29c9";padding-left:0.5vw}
a.extlnk:hover{color:#D96D00}
/* header.htm  and .sub-header */
header{position:sticky;top:0;z-index:2;padding:0 0 0.5rem 0.5rem;background:linear-gradient(#fff, 99.9%, #2e6272)}
#logo-container{display:inline-block;width:15rem;vertical-align:-55%}
.logo{margin-left:0.5rem}
.sub-header{padding:0 0 0 2vw;margin:0;font-size:1.4rem;font-style: oblique}
.dark{background:transparent;color:rgba(46, 98, 114, 1);text-shadow:1px 0 1px #fff}
.clear{background:transparent;color:rgba(255,255,255,1)}
/* footer.htm */
footer{opacity:0;height:fit-content;font-size:0.55rem;color:#2e6272;border-top:thin #2e6272;padding:0.5vh 0 0.5vh 0.75vw}
footer a{color:inherit;font-weight:700}
footer a:hover{color:#D96D00}
/* Mini drop-down menu */
.sub-menu{visibility:hidden;opacity:0;position:absolute;top:100%;left:0.5vw;width:fit-content;transform:translateY(-2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s}
.sub-menu-parent:focus .sub-menu,.sub-menu-parent:focus-within .sub-menu,.sub-menu-parent:hover .sub-menu{visibility:visible;opacity:1;z-index:-1;transform:translateY(0%);transition-delay: 0s, 0s, 0.3s}
/* Mini drop-down menu presentational */
#mini-menu{position:relative;z-index:999;display:inline-block;color:#2e6272}
.menu {font-size:3.6rem;margin:-.1em 0;transition: ease-in-out 0.5s;text-shadow:0.1vw 0.1vw 0.3vw #E9B6B9, 1vw 1vw 0.5vw rgba(46, 98, 114, 0.5), 1vw 1vw 0.5vw rgba(217, 109, 0, 0.4);display:block;min-width:6.5vw;animation-name:fading;animation-timing-function:ease-in;animation-fill-mode:forwards;animation-duration:1s;animation-delay:1s;font-weight:700;text-align:center;cursor:pointer}
.menu:hover,.menu:focus{color:rgba(217, 109, 0, 1)}
nav ul a {display:block;padding:0.4em 0.5em 0.3em 0.25em;color:rgba(46, 98, 114, 1)}
.sub-menu a:hover, .sub-menu a:focus, .sub-menu a:active{background:#e0e8ea;color:rgba(217, 109, 0, 1);border-radius:4px}
.sub-menu a.actual{background:#e0e8ea;font-weight:900;border-radius:4px}
nav ul, nav ul li {list-style-type:none;padding:0;margin:0}
nav > ul > li {font-size:0.7rem;text-align:right}
.sub-menu{background:rgba(255,255,255,1);font-weight:700;border-radius:4px;border:1px groove #A1AFBD}
/* Responsive columns */
.resp-col{}
.col{margin:auto}
.col-left{padding:0 1vw 0 0}
.col-center{padding:0 1vw}
.col-right{padding:0 0 0 1vw}
@media only screen and (min-width:640px){.resp-col{display:flex}}
/* hidden musicians overlays */
.musician-overlay{position:fixed;opacity:0;transform:scaleX(0);z-index:-1;scrollbar-width:thin;scrollbar-color:rgba(46,98,114,.33) transparent;
width:60%;height:75%;top:15%;left:10%;padding-bottom:6vh;background:linear-gradient(#fff, 33%, rgba(255,255,255,0.85));color:#1f414b;overflow-y:scroll;border:1px groove rgba(46, 98, 114, 0.25);border-radius:0.5em;font-size:0.8rem;-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s allow-discrete}
@media only screen and (min-width:320px) and (orientation:portrait){.musician-overlay{width:80%}}
.musician-overlay h3{position:sticky;top:0;padding:0.5vh 0 0.5vh 1.75vw;background:#fff;font-size:1.3rem}
.musician-overlay img.close{opacity:1;width:1.7rem;float:right;margin:0.1rem 0.4rem 0 0;border:0.25em solid transparent;border-radius:0.25em;cursor:pointer}
.musician-overlay a{color:inherit;font-weight:700;text-decoration:underline}
.musician-overlay a:hover{color:#D96D00}
/* enter.htm */
#home{min-height:100lvh;background:rgba(46, 98, 114, 0.15);opacity:0}
#enter{width:80%;margin:auto;padding:4vh 0}
#col1{display:block;background:rgba(46, 98, 114, 0.8);padding:3% 3vw 17% 3vw;color:rgba(161, 233, 244, 0.4);font-size:1.4rem;font-weight:700;text-align:center;border-radius:12px 0 0 12px}
#col1 h1{margin:0;padding-bottom:2vh;font-size:inherit;white-space:nowrap;text-shadow:1px 0 #fff}
#col1 img{width:100%;max-width:280px;height:auto;border-radius:4px;box-shadow:1px 1px 4px #A1E9F4}
#col2{display:block;background:url(../img/index/enter-bg.webp) no-repeat 75% 55%/contain;white-space:nowrap;color:#2e6272;text-shadow:1px 0 #fff;font-size:0.85rem;line-height:1.42em;font-weight:700;padding:1em 0 1.5em 1.5em}
#col2 blockquote, #col2 figure{margin:0}
#enterLink{display:block;width:fit-content;margin:2em auto 0 auto;padding:0.33em 1em;background:#2e6272;color:#fff;font-size:0.85rem;font-weight:700!important;border:thin inset white;border-radius:0.5em;box-shadow:0.1em 0.1em 0.3em #A1E9F4;}
#enterLink:hover{background:#e0e8ea;color:#2e6272;text-shadow:0.1em 0 #A1E9F4}
/* welcomepage.htm */ 
#welcomepage{min-height:100lvh;background:rgba(46, 98, 114, 1);opacity:0}
#welcome{margin:auto;padding:5% 0 2% 0;width:95%;max-width:1000px}
@media only screen and (orientation:portrait) and (min-width:320px){#welcome {padding:5vh 0}}
a.composer, a.pianist, a.persona{display:block;width:auto;max-width:200px;margin:auto;font-weight:700;color:rgba(161, 233, 244, 0.75);text-align:center}
a.composer:hover, a.pianist:hover, a.persona:hover{color:#fff}
a.composer img, a.pianist img, a.persona img{width:100%;height:auto;background:#fff;border-radius:8px;box-shadow:1px 1px 4px #A1E9F4}
#welcome .col a h1{font-size:1.45rem;font-variant:small-caps;margin:0}
#welcome .col a div{font-size:1rem;font-variant:normal}
/* composer.htm et pianist.htm */ 
#composerpianist{min-height:100lvh;background:#2e6272;opacity:0}
#composer, #pianist{margin:auto;padding:5% 0 2% 0;width:65%}
#composerpianist div figure{margin:4vh 0;white-space:nowrap}
#composerpianist a{display:inline-block;width:inherit;font-size:1.2rem;font-weight:700;color:#a1e9f4;opacity:0.66}
#composerpianist a:hover{color:#fff;opacity:1}
@media only screen and (orientation:portrait) and (min-width:320px){#composerpianist div figure {white-space:normal;max-width:375px}}
#composerpianist img{background:#fff;box-shadow:3px 3px 5px #A1E9F4;border-radius:4px}
#composerpianist h2#ltr{position:relative;right:150%;margin:0;font-size:inherit}
#composerpianist h2.rtl{position:relative;left:150%;margin:0;font-size:inherit}
/* persona.htm */ 
#persona{min-height:100lvh;background: url(../img/index/persona-bg.webp) round;font-weight:700;color:#1f414b;opacity:0}
.intropersona{background:rgba(255,255,255,0.7);padding:4vh 6vw 0 6vw;font-size:1rem;line-height:175%}
#persona img{border:thin;border-radius:4px;
box-shadow:8px 8px 12px #1f414b;margin-right:2vw}
#persona a{color:#000;text-shadow:1px 1px #A1E9F4}
#persona a:hover{color:#6AAFC4;text-shadow:1px 1px #000}
.container{display:grid;grid-template-columns:20% 20% 20% 20% 20%;grid-column-gap:0;grid-row-gap:0;width:60%;margin:4vh 0 0 12vw}
.grid{padding:3.5vw 2vh;font-size:1.2rem;white-space:nowrap;text-align:center}
.grid h2 {margin:0;font-size:1.2rem;display:inline}
.grid img {width:57px;height:57px}
.name-lists{grid-column:1/2;grid-row:1/2}
.lim-jokes{grid-column:4/5;grid-row:1/2}
.clip-press{grid-column:3/5;grid-row:2/3}
.helps-quiz{grid-column:2/3;grid-row:3/4}
.photorama{grid-column:5/6;grid-row:3/4}
@media only screen and (min-width:320px) and (orientation:portrait){
.intropersona{font-size:0.8rem}
.container{margin:2vh 0 4vh 4vw}
.grid{padding:1.5vh 0;font-size:0.9rem;text-align:left}   
.name-lists{grid-column:1/6;grid-row:1/2}
.lim-jokes{grid-column:1/6;grid-row:2/3}
.clip-press{grid-column:1/6;grid-row:3/4}
.helps-quiz{grid-column:1/6;grid-row:4/5}
.photorama{grid-column:1/6;grid-row:5/6}
}
/* sitemap.htm */
#sitemap{opacity:0;width:100%;min-height:100lvh;background:linear-gradient(to top, #2e6272, rgba(46, 98, 114, 0.15) 30%);white-space:nowrap}
#map {width:80%;margin:auto;padding:5% 0}
@media only screen and (orientation:landscape) and (max-width:667px){#map{margin:0 4%!important;padding:0 0 5%}}
.main{font-size:0.9rem;text-align:right}
.main2{font-size:0.6rem;text-align:right}
.main .sitemaplinks img{margin:0 4px 0 6px;border:1px solid #a7d0e2;vertical-align:middle;max-width:70px;height:auto}
.sitemaplinks a{display:block;min-height:15px;border-right:1px solid #FFF;border-bottom:1px solid #FFF;border-radius:4px;margin-bottom:0.4em;padding:3px 0px 3px 3px;font-weight:700}
.sitemaplinks a.main-pg::after, .sitemaplinks a.pg::after{content:"";display:inline-block;width:8px;height:8px;border:thin outset rgba(46, 98, 114, .5);border-radius:0.1em;background:#A1E9F4;margin:0 4px 0 6px}
.sitemaplinks a.main-pg{margin-bottom:0.6em}
.sitemaplinks a.main-pg{color:#EDF5F8;background-color:#2e6272}
.sitemaplinks a.main-pg:hover{color:#2e6272;background-color:rgba(161, 233, 244, .5)}
.sitemaplinks a.pg{margin-bottom:0.4em}
.sitemaplinks a.pg{color:#2e6272; background-color:#EDF5F8}
.sitemaplinks a.pg:hover{color:#ffffff;background-color:#74b4c7}
.sitemaplinks a.titlemap{margin:1.2em 0 0.6em 0}
.sitemaplinks a.titlemap{color:#2e6272;background-color:rgba(46, 98, 114, .25)}
.sitemaplinks a.titlemap:hover{color:#EDF5F8;background-color:#2e6272}
/* biography */
#intbio{position:fixed;top:38lvh;left:0}
#intbio a{display:block;margin-top:0.5em;padding-bottom:2px;background:transparent;border:2px solid #fff;border-radius:0 8px 8px 0;box-shadow:1px 1px 2px #2e6272}
#intbio a:hover{background-color:#2e6272;border-radius:0 8px 8px 0}
#intbio img{width:20px;height:13px;margin:0 5px;border:thin inset #fff;border-radius:1px;vertical-align:middle}
#biography{min-height:100lvh;background:url(../img/index/bio-bg.webp) no-repeat top left/100vw 15lvh, url(../img/index/enter-bg.webp) no-repeat fixed 55vw 31vh/40% rgba(46, 98, 114, 0.15);font-weight:600;color:#2e6272;opacity:0}
#bio-lang{margin:12lvh 2.5lvw 0 15lvw;font-size:1rem}
#bio-lang a{color:#2e6272!important;font-weight:800;text-decoration:underline}
#bio-lang a:hover{color:#D96D00!important}
#bio-lang #enterLink{color:#fff!important;text-decoration:none}
#bio-lang #enterLink:hover{background:#e0e8ea;color:#2e6272!important}
/* index.php?page=ours */ 
#ours{min-height:100lvh;background:url(../img/index/ours-bg.webp) no-repeat center top/cover;color:#1f414b;opacity:0}
#ours div{padding:2vh 4vw}
h2{font-size:1.2rem;font-weight:700}
#ours a{color:inherit;font-weight:700}
#ours a:hover{color:#D96D00}
#ours form{border-radius:.5rem;border:1px solid #1f414b;width:fit-content;margin:2vh 4vw 1vh 0;padding:.75rem;display:inline-grid;justify-items:center;align-content:start;gap:0.5rem}
input{background:rgba(0,0,0,0)}
input:hover, select:hover{background:rgba(0,0,0,.1)}
input:read-only:not(input[type="submit"]) {background:blue}
.pp-E9Z9XEB22S4EY,.pp-Q6J4LNQ7AK5VA{font-family:inherit;border-radius:0.5rem;padding-bottom:.15rem;cursor:pointer;font-size:1rem;color:#D96D00;font-weight:900}
/* donate_fff et donate_1f414b.php */
.popup-don{position:relative;float:right;top:.33em;width:fit-content;z-index:1;left:100%;margin:0 1vw 0;padding:0 0 .2rem 0;font-size:.6rem;font-weight:normal!important;color:#ffffff;transition:opacity 1s}
@media only screen and (max-width:428px){.popup-don{display:none}}
.popup-don.fadeOut{opacity:0}
.close img{width:.7rem;height:.7rem;background:#fff;vertical-align:middle;margin:0 0 0.2rem!important;box-shadow:none!important;border-radius:.5rem!important;padding:.1rem;cursor:pointer}
a.donate{display:flex!important;justify-content:center;align-items:center;width:initial!important;margin-top:.2rem;padding-bottom:.15rem;box-shadow:0.1em 0.15em 0.1em rgba(64,64,64,.4);background:#2e6272;color:#ffffff!important;opacity:1!important;font-weight:900!important;font-size:1.2rem;border:1px solid rgba(255,255,255,.66);border-radius:.5rem}
a.donate:hover{color:#d96D00!important}
.obscur{color:#1f414b!important}
a.obscur{background:#ffffff;color:#1f414b!important;border:1px solid rgba(31,65,75,.66)!important;text-shadow:unset!important}
.dbox-donation-page-button{margin:auto;background:#2e6272; color:#ffffff!important;text-decoration:none;display:flex;gap:.5rem;width:fit-content;font-size:1rem;box-shadow:0.1em 0.15em 0.1em rgba(64,64,64,.4);text-shadow:none;border-radius:.5rem;line-height:1.5rem;padding:.255rem 1.5rem}
.dbox-donation-page-button:hover{color:#d96D00!important}
/* index.php?page=sonic-overview */
#sonic{opacity:0;min-height:100lvh;background:rgba(46,98,114,0.2);padding-bottom:15vh}
#sonic p{margin:2vh 2vw 0 2vw;color:#1f414b}
#sonic .resp-col{width:80%;margin:0 auto}
@media only screen and (max-width:926px){#sonic .resp-col{width:100%}}
#sonic .col{background:rgba(31, 65, 75, 0.8);flex:0.5;margin:4vh 2vw;padding:0;border:1px solid #fff;border-radius:0.33em}
#sonic h2{margin:1.5vh 1vw 3vh 1vw;background:rgba(255,255,255,0.15);padding:0.15em 0 0.25em 0.2em;border-radius:0.25em}
#sonic p a{color:inherit;font-weight:700;text-decoration:underline} 
#sonic .playlist{padding:0 0 1vh 1vw}
#sonic ul.graphic{margin:1.5vh 0}
#sonic .playlist a.musician, #sonic .playlist a.opus{color:#e0e8ea;font-weight:700;text-decoration:underline}
#sonic .playlist a.opus{font-style:oblique}
#sonic p a:hover, #sonic .playlist a.musician:hover, #sonic .playlist a.opus:hover{color:#d96D00}