@charset "utf-8";
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) transparent;scroll-behavior:smooth;box-sizing:border-box;-webkit-text-size-adjust:none}
*,*::before,*::after {box-sizing:inherit} /* important */
.big{font-size:175%}
._155{font-size:1.55rem}
._135{font-size:1.35rem}
._85{font-size:0.85rem}
.small{font-size:75%}
.bolder{font-weight:900}
.caps{font-variant:small-caps}
img{object-fit:cover;object-position:center;transition:all ease-in-out 0.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 0.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;background:#fff;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:0/* z-index:0 instead of -1 for photorame */;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;color:#2e6272}
.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}}
/* Specific to persona pages */
/* Name Lists drop-down menu */
.listsmenu{background: url("../img/persona/namelist-menu-bg.webp") no-repeat 50% 10%/100%;margin:auto;padding:0;width:300px;height:600px}
#menu{width:300px;margin:0;padding:0;list-style:none;background:linear-gradient(#2e6272, #A1E9F4);border-radius:0.25em 0.25em 0 0;box-shadow:0 0.1em 0 #2e6272}
#menu li{position:relative;padding:1rem 0;text-align:center}
#menu a{color:#fff;font-size:1.15rem;font-weight:700;text-shadow: 0 0.075rem 0 #1f414b}
#menu li:hover > a{color:#2e6272}
#menu li:hover > ul{
visibility: visible;opacity:1;z-index:1;transform:translateY(0%);transition-delay: 0s, 0s, 0.3s}
/* Sub-menu */
#menu ul{list-style:none;margin:0;padding:0;
visibility:hidden;opacity:0;transform:translateY(-3.35em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
position:absolute;top:3.35rem;left:0;z-index:999;background:linear-gradient(rgba(46,98,114,0.5), rgba(31,65,75,0.6));border-radius:0.25em}
#menu ul li{float: none;margin: 0;padding: 0;display: block;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}
#menu ul li:last-child{box-shadow:none;}
#menu ul a{padding:0.5rem 0;width:300px;line-height:1;display:block;white-space:nowrap;float:none;text-transform:none;text-align:center;
font-size:0.9rem;font-weight:600}
#menu ul a:hover{background: #8BACB6;background: linear-gradient(#E1EAEC,  #8BACB6);}
#menu ul li:first-child a{border-radius:0.25em 0.25em 0 0}
#menu ul li:last-child {border-radius:0 0 25em 0.25em;padding:0.7em 0}
/* Name Lists pages */
.namelists{opacity:0;min-height:100lvh;padding-bottom:15vh;background:#fff}
#name0 {background:url("../img/persona/name0-bg.webp");color:#2e6272}
#name0 h2 {margin:0 auto 6vh auto;font-size:1.25rem;width:fit-content;border-top:1px solid #2e6272;border-bottom:1px solid #2e6272}
#name0 .resp-col{margin:0 2vw}
#name0 .intro{padding:6vh 1vw 8vh 0;font-weight:700;line-height:175%;font-size:0.9em}
#name0 .intro p{text-indent:1rem}
@media only screen and (max-width:926px) and (orientation:landscape){#name0 .col-right{margin:6vh auto}}
#nameA h2, #nameB h2, #nameC h2, #nameD h2, #nameE h2 {margin:4vh auto 2vh auto;font-size:1.25rem;color:#2e6272;width:fit-content;border-bottom:1px solid #2e6272;border-top:1px solid #2e6272}
#nameA{background:url(../img/persona/nameA-bg.webp)}
#nameA table, #nameB table {margin:0 auto 15vh auto;font-weight:700;font-size:1rem;text-align:center;color:#2e6272}
#nameB{background:url("../img/persona/nameB-bg.webp")}
#nameC{background:url("../img/persona/nameC-bg.webp");color:#2e6272}
#nameC p{padding:0 4vw 8vh 4vw;line-height:2.5rem;text-align:center;font-weight:700}
#nameD {background:url(../img/persona/nameD-bg.webp) #fff repeat-y  left 28% / 100%}
#nameD p{padding:2vh 4vw 4vh 20%;color:rgba(31, 65, 75, 0.66);font-size:1rem;font-weight:700;text-align:center}
#nameE {background:url(../img/persona/name0-bg.webp)}
a.keepgoing {position:sticky;left:75%;margin-right:2vw;animation: falling 10s ease-out forwards;background:#96b0b8;width:fit-content;height:fit-content;min-height:33px;padding:0.1rem 0.5em 0.25rem 0.5rem;border:1px solid #A1E9F4;border-radius:0.33em;color:#1f414b;font-size:1.05rem;font-weight:700;text-shadow:0.05rem 0 0 #fff;white-space:nowrap}
a.keepgoing::after{ content:url("../img/persona/next-namelist.webp") ;margin:0 0 0 0.33rem;vertical-align:-0.27em}
a.keepgoing:hover {color:#d96D00}
@keyframes falling {0% {top:0} 100%{top:90%}}
/* Limericks & Jokes intro */
.limejokes{opacity:0;min-height:100lvh;padding-bottom:15vh}
#limejokes-intro {background:url("../img/persona/limejokes-intro-bg.webp") repeat-x 50% 80% / 33%, radial-gradient(30em at top right, #BFCAD5 40%,#fff);color:#2e6272}
#limejokes-intro a {color:inherit;font-weight:900;text-decoration:underline}
#limejokes-intro a:hover {color:#D96D00}
#limejokes-intro .intro {line-height:175%;font-size:1.1em;font-weight:700}
img#xxx-bob{position:fixed;right:1vw;top:1vh;width:100%;max-width:220px;height:auto;z-index:3}
@media only screen and (min-width:320px) and (orientation:portrait){img#xxx-bob{max-width:160px}}
@media only screen and (max-width:926px) and (orientation:landscape){img#xxx-bob{max-width:180px}}
#limejokes-intro .enter{font-size:0.75em;text-align:center}
.warning-container{overflow:hidden}
.marquee{animation: marquee 20s linear infinite;display:inline-block;white-space:nowrap}
.marquee:hover{animation-play-state:paused;cursor:grab}
.warning-content{background:#FFD7FF;height:fit-content;font-weight:900;color:#1f414b;text-shadow:0.2rem 0 0 #fff}
.warning-content img{display:inline;margin:0 1rem 0 1rem;max-height:2rem;height:auto;vertical-align:middle}
@keyframes marquee{0% {margin-left:100%;transform:translateX(0%)} 100% {margin-left:0;transform:translateX(-100%)}}
/* Limericks back and next btn */
.limejokes a#back{position:relative;float:left;left:2vw}
.limejokes a#next{position:relative;float:right;right:2vw;bottom:4vh;font-size:0.65rem;font-weight:700;color:#d96D00;;text-shadow:0.1em 0.1em 1em #fff;line-height:0.6rem;text-align:center}
.limejokes a#next:hover{color:#2e6272;text-shadow:0.1em 0.1em 1em #fff}
#paul a#next:hover{color:#009966}
/* Paul Limerick */
#paul {background:linear-gradient(180deg, rgba(31, 65, 75, 0.65) 0%, rgba(31, 65, 75, 0.25) 50%, rgba(31, 65, 75, 0.5) 100%)}
#paul .resp-col{width:60%;margin:0 auto 4vh auto}
@media only screen and (min-width:320px) and (orientation:portrait){#paul .resp-col{width:95%}}
@media only screen and (max-width:926px) and (orientation:landscape){#paul .resp-col{width:90%}}
#paul .col-left{flex:0.6;font-size:1.4rem;font-weight:900;color:#1f414b;text-shadow:0.02rem 0.04rem 0.1rem #fff;white-space:nowrap}
#paul #line-by-line p{opacity:0;animation:line-by-line-paul 2.5s forwards}
@keyframes line-by-line-paul{ 0% {opacity:0} 100% {opacity:1}}
#paul .col-right{flex:0.4;text-align:center}
#paul .col-right img{width:100%;max-width:300px;height:auto;box-shadow:0.2em 0.2em 0.6em #fff;border-radius:0.33em}
/* Sphinx Limerick */
#sphinx {background:linear-gradient(180deg, rgba(46,98,114,0.75) 0%, rgba(46,98,114,0.37) 33%, rgba(248,215,118,0.75) 100%);padding-bottom:30vh}
#sphinx .resp-col{width:85%;margin:5vh auto 0}
#sphinx .resp-col img{width:100%;max-width:508px;margin-top:0.4rem;height:auto;border-radius:0.33em;box-shadow:0.2em 0.2em 0.6em #fff;text-align:center}
#sphinx #line-by-line, #sphinx #line-by-lineFR{width:508px;margin:0 1vw 4vh 1vw;color:#1f414b;font-size:1.05rem;line-height:1.3rem;font-weight:900}
@media only screen and (min-width:320px) and (orientation:portrait){#sphinx .resp-col{width:100%} #sphinx #line-by-line, #sphinx #line-by-lineFR{width:fit-content}}
@media only screen and (max-width:926px) and (orientation:landscape){#sphinx .resp-col{width:100%}}
#sphinx #line-by-line p, #sphinx #line-by-lineFR p{opacity:0;animation:line-by-line-sphinx 3s forwards;margin:0.75rem 0;text-shadow:0.01rem 0.02rem 0.1rem #fff}
#sphinx #line-by-line p:first-child, #sphinx #line-by-lineFR p:first-child{margin:1rem 0 1.5rem 0;font-size:1.5rem;text-align:center;text-shadow:0.02rem 0.04rem 0.1rem rgba(248,215,118,0.5)}
@keyframes line-by-line-sphinx{ 0% {opacity:0} 100% {opacity:1}}
#sphinx a{font-size:small;font-weight:700;color:#FF9900}
#sphinx a:hover{color:#009966}
.hide{width:0;height:0;font-size:0;margin:0;padding:0}
/* Hippopotamus Fugue */
#hippo{background: linear-gradient(155deg, rgba(31,65,75,0.5) 0%, rgba(31,65,75,0.25) 20%, rgba(47,149,40,0.75) 100%);padding-bottom:25vh}

#hippo h2 {width:fit-content;margin:0 auto 2vh auto;color:#1f414b;font-weight:900;text-shadow:0.01rem 0.02rem 0.1rem #fff}
#hippo .row-1{width:75%;margin:auto}
#hippo .row-2{width:66%;margin:4vh auto}
@media only screen and (min-width:320px) and (orientation:portrait){#hippo .row-1, #hippo .row-2{width:90%}}
@media only screen and (max-width:926px) and (orientation:landscape){#hippo .row-1, #hippo .row-2{width:95%}}
#hippo #line-by-line{width:fit-content;margin:auto}
#hippo #line-by-line p{opacity:0;margin:1.2rem 0;animation:line-by-line-hippo 2s forwards}
#hippo #line-by-line p:first-child{margin-top:0}
@keyframes line-by-line-hippo{ 0% {opacity:0} 100% {opacity:1}}
/* Wandasue */
#wanda1 {background: url("../img/persona/wanda1-bg.webp") 50% 0 / 100% rgba(31, 65, 75, 0.075)}
#wanda2 {background: url("../img/persona/wanda2-bg.webp") 50% 0 / 100% rgba(31, 65, 75, 0.075)}
#wanda3 {background: url("../img/persona/wanda3-bg.webp") 50% 0 / 100% rgba(31, 65, 75, 0.075)}
#wanda4 {background: url(../img/persona/wanda4-bg.webp) 50% 0 / 100% rgba(31, 65, 75, 0.075)}
#wanda5 {background: url("../img/persona/wanda5-bg.webp") repeat-y 50% 0 / 75% rgba(31, 65, 75, 0.075)}
#wanda1 div, #wanda2 div, #wanda3 div, #wanda4 div, #wanda5 div{width:90%;margin:auto;font-size:1rem;font-weight:700;color:#1f414b;line-height:1.85rem}
#wanda5 a#next:hover {text-shadow:0 0 7px #000;color:#fff}
#wanda4 #line-by-line p{opacity:0;animation:line-by-line-wanda 2.5s forwards;margin:0.5rem}
@keyframes line-by-line-wanda{ 0% {opacity:0} 100% {opacity:1}}
/* Summer Nights */
#fan1{background:url("../img/persona/fantastic1-bg.webp") 50% 30%/cover #484848}
#fan2{background:url(../img/persona/fantastic2-bg.webp) 50% 40%/cover #484848}
#fan3{background:url(../img/persona/fantastic3-bg.webp) 50% 30%/cover #484848}
#fan4{background:url(../img/persona/fantastic4-bg.webp) 20% 40%/cover #484848}
#fan5{background:url(../img/persona/fantastic5-bg.webp) 50% 0/cover #484848}
#fan1 table, #fan2 table, #fan3 table, #fan4 table, #fan5 table{width:85%;margin:auto;padding:4vh 0;color:#D9DBDD;font-weight:700}
#fan1 h2,#fan2 h2,#fan3 h2,#fan4 h2,#fan5 h2{margin:0;line-height:1.75rem;font-size:2rem;font-weight:900;font-variant:small-caps;text-align:center;color:#93989F;text-shadow:0.1rem 0.1rem 0.2rem #000}
#fan1 a, #fan2 a,#fan3 a,#fan4 a,#fan5 a {font-size:0.6rem;font-weight:700;color:#fff}
#fan1 a:hover,#fan2 a:hover,#fan3 a:hover,#fan4 a:hover,#fan5 a:hover {text-shadow:0.2em 0.2em 2em #fff;color:#d96D00}
#fan2 #doodads{color:#fff;font-style:oblique;font-size:175%;text-shadow:1px 2px 4px #FF0,-2px 0 0 #000;text-decoration: blink;-webkit-animation-name: blinker;-webkit-animation-duration: 0.8s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-webkit-animation-direction: alternate}
@-webkit-keyframes blinker {from {opacity:1} to {opacity:0}}
/* Clippings */
.clippings{opacity:0;min-height:100lvh;background:radial-gradient(30em at top right, rgba(31, 65, 75, 0.33) 40%,#fff);padding-bottom:15vh}
#worldpress-bob{position:fixed;z-index:3;right:1vw;top:1vh;width:100%;max-width:220px;height:auto}
@media only screen and (min-width:320px) and (orientation:portrait){#worldpress-bob{top:4vh;width:40%}}
#symph2{width:100%;max-width:474px;height:auto;margin-bottom:2vh;box-shadow:0.1em 0.1em 1.5em #2e6272}
#trio{width:98%;max-width:636px;height:auto;padding:1em;box-shadow:0.1em 0.1em 1.5em #2e6272}
#symph2:hover, #trio:hover{opacity:0.5}
#clip3 a,#clip5 a{font-size:inherit;font-weight:900;color:#2e6272;text-decoration:underline}
#clip3 a:hover,#clip5 a:hover{text-shadow:0 0 7px #000;color:#fff}
/* Helps Quiz */
.helpsquiz {opacity:0;min-height:100lvh;background:url("../img/persona/helpsquiz-bg.webp") 50% 50% / cover #74b4c7;padding-bottom:15vh}
.helpsquiz .level {margin:0 6vw;white-space:nowrap;color:#FFFFFF;font-size:1rem;font-weight:700;border-style:solid;border-radius:0.5em;padding:0.2em 0.5em;border-color:#bfbfbf #404040 #404040 #bfbfbf;border-width:1pt;background:transparent;box-shadow:0.2em 0.3em 0.2em #404040;text-decoration:none}
.helpsquiz .level:hover{background:#2e6272}
.quiz-page{position:relative;top:1vh;min-height:640px;width:66%;margin:auto}
#TheBody img{border-radius:0.25em;margin:3%;box-shadow:0.15em 0.15em 0.4em rgba(255,255,255,0.4)}
@media only screen and (min-width:320px) and (orientation:portrait){.quiz-page{width:97%}#TheBody img{width:33%;margin:4%}}
@media only screen and (max-width:926px) and (orientation:landscape){.quiz-page{width:95%}#TheBody img{width:90%;margin:4%}}
/* Photorama */
.diaporama{min-height:100lvh;padding-bottom:15vh;opacity:0;background:url(../img/persona/photorama/photorama-bg.webp) 50% 40% / 100% #537483}
.photos, .photos img{width:350px;height:466.67px}
@media only screen and (min-width:320px) and (orientation:portrait){.photos, .photos img{width:300px;height:400px}}
@media only screen and (max-width:926px) and (orientation:landscape){.photos, .photos img{width:281.25px;height:375px}}
.photos{position:relative;overflow:hidden;margin:12vh auto;border:0.05em solid rgba(255,255,255,0.5);box-shadow:0.1em 0.1em 1em #888;border-radius:0.33em}
.photos img{position:absolute;top:0;left:0}
.photos :first-child{position:relative /* container size */}
/* animation images cf. https://nosmoking.developpez.com/demos/css/diapo_fade_calcul.html */
.photos img{animation:fade-in-out 288s ease-in-out infinite 0s;opacity:0;transition:1s}
/* delay images */
.photos img:nth-child(1) {animation-delay: 0s}
.photos img:nth-child(2) {animation-delay: 8s}
.photos img:nth-child(3) {animation-delay: 16s}
.photos img:nth-child(4) {animation-delay: 24s}
.photos img:nth-child(5) {animation-delay: 32s}
.photos img:nth-child(6) {animation-delay: 40s}
.photos img:nth-child(7) {animation-delay: 48s}
.photos img:nth-child(8) {animation-delay: 56s}
.photos img:nth-child(9) {animation-delay: 64s}
.photos img:nth-child(10) {animation-delay: 72s}
.photos img:nth-child(11) {animation-delay: 80s}
.photos img:nth-child(12) {animation-delay: 88s}
.photos img:nth-child(13) {animation-delay: 96s}
.photos img:nth-child(14) {animation-delay: 104s}
.photos img:nth-child(15) {animation-delay: 112s}
.photos img:nth-child(16) {animation-delay: 120s}
.photos img:nth-child(17) {animation-delay: 128s}
.photos img:nth-child(18) {animation-delay: 136s}
.photos img:nth-child(19) {animation-delay: 144s}
.photos img:nth-child(20) {animation-delay: 152s}
.photos img:nth-child(21) {animation-delay: 160s}
.photos img:nth-child(22) {animation-delay: 168s}
.photos img:nth-child(23) {animation-delay: 176s}
.photos img:nth-child(24) {animation-delay: 184s}
.photos img:nth-child(25) {animation-delay: 192s}
.photos img:nth-child(26) {animation-delay: 200s}
.photos img:nth-child(27) {animation-delay: 208s}
.photos img:nth-child(28) {animation-delay: 216s}
.photos img:nth-child(29) {animation-delay: 224s}
.photos img:nth-child(30) {animation-delay: 232s}
.photos img:nth-child(31) {animation-delay: 240s}
.photos img:nth-child(32) {animation-delay: 248s}
.photos img:nth-child(33) {animation-delay: 256s}
.photos img:nth-child(34) {animation-delay: 264s}
.photos img:nth-child(35) {animation-delay: 272s}
.photos img:nth-child(36) {animation-delay: 280s}
/* steps images */
@keyframes fade-in-out{0%,100%{opacity:0}0.35%{opacity:1}2.78%{opacity:1}3.13%{opacity:0}}
/* hide  slideshow msg by fading out */
#automatic-msg {width:fit-content;margin:-10vh auto 0 auto;text-shadow:0.1em 0.1em 1em #1f414b;color:#fff;font-weight:700;animation:hide-msg 1s 8s forwards}
@keyframes hide-msg {to {opacity:0;transition:opacity ease-in}}
/* 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{position:relative;z-index:2;display:flex!important;justify-content:center;align-items:center;margin-top:.2rem;padding-bottom:.15rem;box-shadow:0.1em 0.15em 0.1em rgba(64,64,64,.4);text-decoration:none!important;background:#2e6272;color:#ffffff!important;opacity:1!important;font-weight:900!important;font-size:1.2rem!important;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}