html {box-sizing:border-box;
    font-size:100%;
    font-family: Arial, Helvetica, sans-serif;
}

*,*:before,*::after {box-sizing:inherit;}

:root {
--msg-color: darkblue;
--rc:calc((100vw - 400px) / (1280 - 400));            
--x4:calc(4 * var(--rc));
--x8:calc(8 * var(--rc));
--x10:calc(10 * var(--rc));
--x12:calc(12 * var(--rc));
--x20:calc(20 * var(--rc));
--x28:calc(28 * var(--rc));

--px-24-44:calc(24px + var(--x20));
--px-30-42:calc(30px + var(--x12));
--px-28-56:calc(28px + var(--x28));
--px-30-50:calc(30px + var(--x20));
--px-36-48:calc(36px + var(--x12));

--px-12-20:calc(12px + var(--x8));
--px-24-52:calc(24px + var(--x28));
--px-20-32:calc(20px + var(--x12));
--px-22-34:calc(22px + var(--x12));
--px-18-28:calc(18px + var(--x10));

--px-12-16:calc(12px + var(--x4));
--px-15-19:calc(15px + var(--x4));
--px-18-22:calc(18px + var(--x4));

--px-8-12:calc(8px + var(--x4));

}    

body {margin-top:0;user-select:none;}
#header-container {position:sticky;top:0;background-color:lavender;z-index:9;margin-bottom:5px;} 

#start-section {padding:20px;}
#start-section div:first-of-type {position:relative;width:100%;font-size:var(--px-18-22);font-weight:bold;text-align: center;margin-top:1vh;}
#start-section li {padding-bottom:1em;font-size:var(--px-15-19);}

h1 {text-align:center;color:lavender;background-color:green;font-size:var(--px-18-22);padding:0.3em;}
nav {display:flex;justify-content:space-evenly;flex-wrap:wrap;position:relative;width:100%;padding-top:0.6em;}
nav > button {margin-bottom:0.6em;cursor: pointer;}
nav > button[disabled] {color:darkgreen;font-weight:bold;background-color:chartreuse;cursor:not-allowed;}

a {display:block;font-size:var(--px-12-16);padding:0.1em;margin-bottom:0.5rem;text-decoration:none;}
a:not(.source):hover {background-color:greenyellow;}
a.source {display:inline-block;font-size:var(--px-12-16);font-weight:normal;}
a.current {font-weight:bold;}
a.assault {color:brown;}

article {background-color:#ededed;padding:5px;margin-bottom:5px;}
article h2 {font-size:var(--px-18-22);}
article p {font-size:var(--px-12-16);}
.date {font-weight:bold;background-color:salmon;}
h1,h2,h3,h4,h5,h6 {margin:0;} 
h3 {font-size:var(--px-15-19);}
h4 {font-size:var(--px-12-16);}
.comment-container {position:relative;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content: center;}
.comment header {text-align:right;}
.comment {max-width:600px;text-align: justify;}
.comment-date,.comment-author {font-size:0.8em;font-style: italic;padding-left:2em;}
.comment p {font-size:var(--px-12-16);}
.comment ul {font-size:var(--px-12-16);}
.remark {padding:1em;font-size:var(--px-12-16);font-weight:bold;font-style: italic;color:blue;background-color:aquamarine;text-align: center;}
.prominent h2 {color:crimson;}
.frozen {color:gray;}
.boost {color:navy;background-color:yellow;padding:0.5em;}

.quote {position:relative;width:60%;left:39%;color:darkred:var(--px-12-16);font-style:italic;color:crimson;margin:0}
.quote + p {position:relative;width:55%;left:39%;font-weight:bold;color:crimson;text-align:right;margin:0;}
.answer-quote {font-style:italic;}

.shy {display:none;}
.youtube:after {
    content:"";display:inline-block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAM1BMVEX/////AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/4OD/QED/////sLD/ICD/wMD/UFD/EBCDEFz4AAAACHRSTlMAEECAYDBQcJt0SmoAAABPSURBVBjTY2AgAjAyMTGDARMTI4jPwoEEWBgYWDlQACsDG6oACwMzhMHJBaGZYQLc3Dy8aAJ8qAKc/DAtUEMF4IZiWIvhMLDT2ZGdTggAAKVMBQDy4NHaAAAAAElFTkSuQmCC) no-repeat;
    height:1em;width:1em;margin-left:0.5em;
}
.wikipedia:after {
    content:"";display:inline-block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAzElEQVQoz4WRO07DQBBA3664g+ECuEWURJYQneVcJIegoOEGUVoqi97XiNJH9FZKTjAvxRrzEeCZYmY1b1dvNQkg5NfICdLf44Kk/8YAmYXIBxoyO6Ajs+NEQ8OJV67oeINwNDkYjtZuDVtHw3BlGBKG7XTorRx8nvrtJ7AX94ZhbW1YLpWaAW5peQTggXcADtx8WBZuMHk0bK3sDTeTR3hRsI5rXrhjTcMT98Dl9xfC3mRr+dNqMpolS1aT92YW/AEc5278Aiwva2ndZ4043gp1jXnNAAAAAElFTkSuQmCC) no-repeat;
    height:1em;width:1em;margin-left:0.5em;
}

.bill-container {position:relative;width:100%;display:flex;flex-direction:row;justify-content:center;}
.bill-container > article {min-width:50vw;max-width:600px;}
.bill-container h2, .bill-container h4 {text-align: center;color:navy;}
.memo {font-size:var(--px-15-19);font-weight: bold;}
.hit {color:black;}

.fat {height:4px;background-color:navy;}

iframe {
    border: none;
    width: 100%;
    height: 90vh;
}