:root{
    --AW-bg-color : #fdfdfd;
    --AW-fg-color : #2f4f4f;/* darkslategrey */;
    --AW-bgfoc-color :  #f9f9f9;
    --AW-bghot-color : rgb(246, 250, 250);
    --AW-bghighlight-color : rgb(197, 230, 230);
    --AW-hot-color : darkslateblue;
    --AW-text-dark : #203737;
    --AW-text-grey : #3f3f3f;
    --AW-text : #2f4f4f;/* darkslategrey */
    --AW-hot : darkslateblue;
    --AW-link-color : slategrey;
    --AW-aside-color : rgb(167, 179, 190); 
    --AW-shadow-color :rgb(164, 168, 168);
    --AW-lightshadow-color :rgb(225, 224, 224);
    --AW-serif: "Times New Roman", serif;
    --AW-sans-serif: "Helvetica", sans-serif;


    --head-height: 6em;
    --logo-width: 6em;
    --logo-height: var(--head-height);
}

body{    
    font-family: var(--AW-sans-serif);
    font-size: 1em;
    color:var(--AW-text);
    background-color: var(--AW-bg-color);
    /* background-image:url(./oddsbackground.svg); */
    /* background-image:url(./oddsbackground.png); */
    /* background-repeat:repeat, no-repeat; */
    /* background-size:auto; */
}

header{
    display:grid;
    grid-template-areas:
        "a b b b b b c"
        "d d d d d d d"
        "e e e f g g g";
    grid-template-columns: 4em 4em repeat(4, auto) 4em;
    grid-template-rows: 2em 2em 2em;
    width: 100%;
}

header #logo{
    grid-area:a;
    /* border: 1px solid black; */
}
header #logo img{
    height:100%;
    width:auto;
    display:inline-block;
}

header #logo a{
    height:100%;
    width:100%;
    display:inline-block;
}

header #account{
    grid-area:c;
    /* border: 1px solid black; */
}

header #account>a{
    display:inline-block;
    height:100%;
    width:100%;
} 

header #account img{
    display:inline-block;
    height:100%;
    width:auto;
} 

.underLinks{
    position:absolute;
    visibility: hidden;
    left:0ch;
    padding-top: .5em;
    width:max-content;
    /* border-left:2px solid var(--AW-shadow-color); */
    padding:.5ch;
    padding-bottom:.5em;
    border-bottom:2px solid var(--AW-shadow-color);
    /* background-color: var(--AW-bghot-color); */
    font-size: .9em;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;    
    z-index: 100;      
    text-align: left;  
    box-shadow: 0px 0px 10px -5px var(--AW-shadow-color);
    background-color: var(--AW-bgfoc-color);
}

.underLinks  a{
    text-decoration: none;
    padding: 0ch;
    height:0em;
    transition: height .25s, padding .51s;
    display:block;      
}

.underLinks  hr{
    color: var(--AW-aside-color);
    opacity: 25%;
}

.dropLink{
    position:relative;
    text-underline-offset: 2px;
    transition: text-underline-offset 1s, text-decoration 2s;
}       

.dropLink:hover, .dropLink:focus-within{
    text-decoration: none;
    text-underline-offset: 1em;
}

.dropLink:hover > .underLinks , .dropLink:focus-within> .underLinks{
    visibility: visible;
}

.dropLink:hover a, .dropLink:focus-within a{
    text-decoration: none;
    height: 1.1em;
    padding-top: 1.5em;
    padding-bottom: .5ch;
}

@media (pointer: fine) {
    .dropLink:hover a, .dropLink:focus-within a{
        padding-top: .5em;
    }
}

footer>hr {
    border: none;
    border-top: 1px solid  whitesmoke;/*var(--AW-aside-color);*/
    color: var(--AW-aside-color);
    color: whitesmoke;
    overflow: visible;
    text-align: center;
    height: 1.5em;
}

footer{
    position:relative;
    font-size:.65em;
    text-align:right;
    margin:2em;
    margin-top:4em;
}


footer>div>a{
    margin: .5ch;    
}

.inTextImage{
    position:relative;
    width:1.5em;
    height:1.5em;
    top:.3em; 
    left:.1em;
}

a{
    color:slategrey;    
    /* transition: color 2s; */
    text-decoration:underline;
}

a:hover{
    color: darkslateblue;
    cursor: pointer;
}       

a[cite]{
    top: -.7em;position: relative;font-size: 50%;
    text-decoration:none;
}

nav ul{
    display: inline-block;
    list-style: none;
}
nav li{
    display: inline-block;
}

article{ 
    display: block;
    width:calc(60% - 20px - 1.5em);
    position:relative; 
    overflow: hidden;
    clear: both;
    padding: 20px;
    padding-left: 1.5em;/*40px;*/
    padding-right: 1.5em;/*40px;*/
    padding-top: 1em; /*30px;*/
    padding-bottom: .3em; /*10px;*/
    border-bottom: solid .5px;
    border-color: rgba(112, 128, 144, .10);
    display: block;
    background-color: #fdfdfd;
    margin-left:15%;
    margin-right:15%;
    text-align: justify;
    /* border:1px solid blue; */
}
 
@media (max-aspect-ratio: 1/1){
    article {
        width:calc(100% - 2% - 4% - 20px - 3em);
        margin-left:2%;
        margin-right:4%;
    }
}

article:hover{
    background-color: var(--AW-bgfoc-color);
}

h1, article h1{
    display:inline;
    font-family: var(--AW-serif);
    color: var(--AW-text-dark);
    font-size: 1.75em; 
    text-justify:none;
}       

h2, article h2{
    text-justify:none;
    display:inline;
    color: var(--AW-text-grey);
    font-size: 1.3em;
}

h3 {
    text-justify:none;
    font-family: var(--AW-serif);
    color: var(--AW-text-grey);
    display:inline;
    font-size: 1.3em;
}


h4 {
    text-justify:none;
    color: var(--AW-text-grey);
    display:inline;
    font-size: 1.2em;
}

h5 {
    font-family: var(--AW-serif);
    color: var(--AW-text-grey);
    display:inline;
    font-size: 1.2em;
}

article > div div{
    margin-left:4ch;    
}

article > div, article > p{
    margin-left:0;    
}

article > div[inset="1"], article > p[inset="1"]{
    margin-left:4ch;    
}

article > div[inset="2"], article > p[inset="2"]{
    margin-left:8ch;    
}

article > div[inset="3"], article > p[inset="3"]{
    margin-left:12ch;    
}

article > div[inset="4"], article > p[inset="4"]{
    margin-left:16ch;    
}

article byline{    
    font-size: .75em; 
    font-style: italic;
    margin-top:1em;     
}

article byline a{
    color: inherit;
    margin: inherit;
    padding:inherit;            
}

article byline a:hover{
    margin: inherit;
    padding:inherit;    
    border:none;
    text-decoration: underline;
}


article hr{
    width:50%;
    border-width: 1px;  
    border-style: solid;
    color: var(--AW-aside-color);
}

*[drop]::first-letter{
    color: darkslategrey;
    float: left;
    font-family: serif;
    font-size: 4em;
    line-height: .5em;
    padding-right: .1em;
}


*[right]{
    text-align:right;
}

*[center]{
    text-align:center;
}

*[left]{
    text-align:left;
}

blockquote{
    clear: both;
    display: block;
    padding-top: .5em;
    padding-left: 25%;
    padding-right: 25%;
    font-style: italic;
    color: slategray;
    text-align:center;
    font-size: 1.1em;
}

article figure{
    margin: 2em;
    margin-bottom: 1em;
    margin-top:.5em;
    overflow: hidden;
    position:relative;
}

article figure blockquote{
    padding-top: 0em;
    padding-bottom: 0em;
    padding-left: 5%;
    padding-right: 5%;
    font-size: .9em;
}

blockquote byline{
    display: block;
    text-align: right;
    margin-top:.5em;
    margin-left:25%;
}

article figcaption{
    font-size: .75em; 
    font-style: italic;
}
article figure[left]{
    clear:left;
    float: left;
    text-align: left;
}
article figure[large]{
    width:45%;
    max-width: 1000px;
    max-height: 1000px;
}

article figure[right]{
    clear:right;
    float: right;
    text-align: right;
}

article figure ul, article figure ol{
    padding-top: 0em;
    padding-bottom: 0em;
    padding-left: 5%;
    padding-right: 5%;
    font-size: .8em;
    text-align: left;
    margin-left: 6px;

}

article figure[small]{
    width:25%;
    max-width: 300px;
    max-height: 300px;
}

article figure[xsmall]{
    width:20%;
    max-width: 200px;
    max-height: 200px;
}


article figure[fill]{
    width:100%;
    text-align: center;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

article figure[center]{
    text-align: center;
    width:100%;
    clear:both;
    margin: 0px;
    padding: 0px;
    max-width: unset;
    max-height: unset;
}


@media (max-aspect-ratio: 1.5/1){
    blockquote{
        padding-left: 1%;
        padding-right: 1%;
    }
}


@media (max-aspect-ratio: 1/1){
    article figure[left]{
        float:none;
        text-align: center;
        width:100%;
        clear:both;
        margin: 0px;
        padding: 0px;
        max-width: none;
        max-height: none;

    }

    article figure[right]{
        float:none;
        text-align: center;
        width:100%;
        clear:both;
        margin: 0px;
        padding: 0px;   
        max-width: none;
        max-height: none;
     
    }

    article figure[left] img{
        width:65%;
    }
    article figure[right] img{
        width:65%;
    }
}

article figure[center] img{
    width:65%;
}

article figure[fill] img{
    width:100%;    
}

article figure[center][small] img{
    width:25%;
}

article figure[center][xsmall] img{
    width:20%;
}

article figure img{
    width:100%;
}

avatar {            
    display:block;
    float:left;
    width:2em;
    height:2em;
    overflow: hidden;
    border-radius: 2em;
    margin:0px;
    padding:0px;
    line-height: 1.25em;
    margin-right: .5em;
}
avatar img{
    width:100%;
    height:100%;
}

.forEditOnly{
    display:none;
}

.progressLink {
    position: relative;
    text-decoration: none;
}

.progressLink::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 8px;
    height: 2px;
    border-radius: 50%;
    background-color:var(--AW-fg-color);
    opacity: 0;
    animation: none;
}

.progressLink:after {
    opacity: 1;
    animation: bounceDot 1s ease-in-out infinite;
}


@keyframes bounceDot {
    0%   { left: 0%; }
    50%  { left: 100%; }
    100% { left: 0%; }
}

.progressLinkSuccess {
    position: relative;
    text-decoration: none;
}

.progressLinkSuccess::after {
    content: '✔';
    position: absolute;
    right: -.75ch;
    bottom: 1.5em;
    animation: fadeMark 4s ease-out forwards;        
}   

@keyframes fadeMark {
    0%    {  bottom: 0em;   opacity: 100%;  transform:scale(0%);}
    50%   {                 opacity: 100%;  transform:scale(100%);}
    75%  {                  opacity: 100%;}
    100%  {  bottom: 1.5em; opacity: 0%;}
}

.progressLinkFailure {
    position: relative;
    text-decoration: none;
}

.progressLinkFailure::after {
    content: '⚠';
    position: absolute;
    right: -.75ch;
    bottom: 1.5em;
    animation: fadeMark 3s ease-out forwards;        
}