:root {
    &[data-theme="dark"] {
        --c-sb: rgba(0,0,0,.3);
    }
    &[data-theme="midnight"] {
        --c-sb: rgba(0,0,0,.5);
    }
    &[data-theme="light"] {
        --c-sb: rgba(255,255,255,.5);
    }
}
:root[data-theme="dark"], :root[data-theme="midnight"], :root[data-theme="light"] {
    --c-body0 : var(--c-bg2);
    --c-body1 : var(--c-acc0);
    
    --main-bg : repeating-linear-gradient(180deg, var(--c-body0) 0, var(--c-body1) 100vh, var(--c-body0) 200vh);
    
    & #article {
        border: 2px outset var(--c-bg1);
    }
}
:root[data-theme="wikidark"], :root[data-theme="wikilight"] {
    --main-bg : var(--c-bg0);
    
    #article {
        border: 2px solid var(--c-bg0);
    }
}

body {
    background: var(--main-bg);
}

#main {
    --c-hr: var(--c-acc1);
    padding: 0 0 5rem;
    width: 100%; margin: 0; min-height: 100vh; text-indent: 0;
    & :where(p) {
        margin-inline: unset; margin-block: unset;
        + p {
          margin-top: unset;
        }
    }
}

#article {
    --c-hr: var(--c-acc1);
    background-color: var(--c-bg0);
    padding: .5rem 5px 1rem;
    margin: 10px;
    color:var(--c-txt0); font: 1.2rem var(--font-p0); text-indent: var(--text-indent);
    > div {
        padding: 0 .8rem 0 .5rem;
        &:has(> p:first-child) {
        margin-top: 1rem;
        }
  }
  > h1 {
        color:var(--c-txt0);font: 350%/1.2em var(--font-h0); text-align:center; margin: .6rem auto 1.6rem auto;
        & +hr {
            border: outset; border-color:var(--c-acc1); width:75%; height: 0; margin: 0 auto 1.5rem auto;
        }
    }
    & :where(p) {
        margin-inline: 1ch; margin-block: .1rem;
        + p {
            margin-top: .6rem;
        }
    }
    &::after {
        content: ""; clear: both; display: table; 
    }   /*clearfix*/
}

#top {
  --column-gap: .8rem;
    container: top / inline-size;
  width: auto;
  display: flex; grid-template-columns: min-content auto;
  /*align-items: center;*/
  text-indent: 0;
  
  position: relative; z-index: 1;
  height: 6rem;
  margin: 0; padding: 0 var(--column-gap);
  background-color: var(--c-sb); border-bottom: 5px ridge var(--c-bg2);

  /*transition: height .1s linear .3s;
  &:hover {
    height: 8rem;
    transition: height .1s linear;
  }*/
  
  & * {
    overflow: inherit;
  }
  
  & a, a:hover {
    display: flex; align-items: center;
  }
  & h1 {
    background-color: var(--c-acc0); border: 3px outset;
    font: bold 100%/1.6rem var(--font-h1); color: var(--c-acc2);
    display: flex; align-items: center; text-align: center;
    width: 10rem;  padding: 8px 0; margin-inline-end: var(--column-gap);
    
    &:hover {
      background-color: var(--c-bg1); border: 5px inset; color: var(--c-txt0);
    }
  }
  
  & > div { /*Flex row*/
    display: flex; align-items: center; justify-content: space-around; column-gap: var(--column-gap); width: 100%;
    & * {
      margin-block: 0;
      & :not(:first-child) {
        margin-inline-start: 2%;
      }
    }
    & > div {
        background-color: var(--c-acc0); border: 3px outset;
        display: flex; flex-direction: column; align-items: center; text-align: center;
        padding: 8px; height: 3rem;
        &.hovermenu {
            flex: 3 2 10ch;
        }
        &.display {
            display: block; overflow-x: hidden; overflow-y: auto; padding: 8px 0; 
            & > div {
                border-inline: none; width: auto;
                margin-left: 0;
                &:not(:last-child) {
                    margin-bottom: 8px;
                }
                
                &:hover {
                    background-color: var(--c-bg2);
                }
            }
        }
        &#search-contain {
            overflow: visible; padding: 0;
            position: relative; flex: 1 3 0;
            & #searcher {
                display: flex; flex-direction: row; align-items: stretch; overflow-x: visible; border: 0; width: 100%;
                padding: .2rem .2rem;
                & label {
                    position: absolute; height: 0; width: 0; color: rgba(0,0,0,0); margin: 0; padding: 0; flex: 0 5 0;
                }
                & input {
                    /*position: absolute; top: 2.2rem;*/
                    background-color: rgba(0,0,0,0); border: 0 outset var(--c-txt0);
                    font-size: 1.1rem; color: var(--c-txt0);
                    flex: 1 5 0;
                    margin-right: 0;
                    &:focus {
                        outline: 0;
                    }
                }
                & button {
                    opacity: .1; /*margin-left: -1rem;*/
                    background-color: rgba(0,0,0,0); 
                    color: var(--c-txt0); border: 1px solid;
                    font: 1.5rem var(--font-p0);
                    flex: 0 0 2rem;
                    margin-inline: 0; 
                    &:hover {
                        opacity: .4;
                    }
                }
            
            

        }
            & #searcher:focus-within {
                border-color: var(--c-acc1);
                flex: 5 1 16ch;
                & button {
                    opacity: 1; font-weight: bold; border: 2px outset;
                    &:hover {
                        background-color: var(--c-acc0); color: var(--c-acc2); border: 3px outset;
                    }
                }
                
            }
            & > div {
                /*position: fixed; top: 0; left: 50%;*/
                position: absolute; z-index: 99; top: 100%; left: -2px; right: -2px;
                margin: 0; padding: 0;
                visibility: hidden;
                & > div {
                    position: relative; z-index: 1;
                    background-color: var(--c-bg0); color: var(--c-txt0);
                    border: 2px inset; margin: 0 0 0; padding: .4rem 0;
                    &:first-child {
                        margin: 4px 0 1px;
                    }
                }
            }
            
        &:focus-within {
            background-color: var(--c-bg0); flex: 9 0 1ch;
            & > div#search-barautofill-list {
                visibility: visible;
                & > div {
                    background-color: var(--c-bg0); color: var(--c-acc1); 
                    border: 1px solid; margin: 1px 0;
                    &:first-child {
                        margin: 5px 0 1px;
                    }
                }
                & :hover,& [data-active="1"] {
                    margin-block: 1px ;
                    background-color: var(--c-acc0); color: var(--c-txt0);
                    border: 2px inset;
                    &:first-child {
                        margin: 4px 0 1px;
                    }
                }
            }
        } /*Focus within search contain*/
        } /*search-contain*/
            
    }
    & p {
      color: var(--c-acc2);
    }
      
  } /*Flex row*/
}
/*@container top (width < 34rem) {
#top {
    & div {
        & .hovermenu {
            max-width: 15vw;
        }
    }
    & form#searcher {
        max-width: 20vw;
    }
}
    
}*/
/*
#top {
    height: 5rem; background-color: var(--c-bg1); border-bottom: 4px outset var(--c-acc0);
}
*/


.wikibox {
  --c-hr : var(--c-acc2);
  container: wikibox / inline-size; float: right; width: 40%; max-width: 20rem;
  padding: 6px; margin: 15px 10px; overflow: hidden;
  border: .1rem solid;
  background-color: var(--c-bg1); color:var(--c-txt0);
  font-size: 1rem; text-indent: 0;
  & .images {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    & p {
      font-style: italic; margin-bottom: .8rem;
    }
  }
  & div {
    width: auto; margin: 0;
  }
  & hr {height: 2px;}
  & h1 {
    font: 1em var(--font-p0); font-weight: bold; text-align: center; margin: 10px 0 16px 0
  }
  & h2 {
    background: var(--c-acc0);
    margin: 5px 0 5px 0; padding: 6px; width: auto;
    font: 1em var(--font-p0); font-weight: bold; text-align: center;
  }
  & p {
    font: .9em var(--font-p0); text-align: center; margin: 10px 0 2px 0; text-indent: inherit; font-stretch: inherit;
  }
  & .wikibox-bio {
    --border: .1rem solid var(--c-acc0);
    
    container: wikibio / inline-size; display: grid;
    grid-template-columns: min-content .8em auto;
    /*grid-template-rows: 2rem;*/
    color: var(--c-txt0); font: .9em var(--font-p0); font-weight: bold; text-overflow: clip; word-wrap: break-word; font-stretch: inherit;
    & div {
      padding: 5px; text-align: center;
      /*margin: auto;*/
      display: flex; justify-content: center; align-items: center;
      border-bottom: var(--border);
        &:is(:nth-last-child(1), :nth-last-child(2), :nth-last-child(3)) {
          border-bottom: none;
      }
    }
    & .l {
      padding: 5px 0 5px 5px; grid-column: 1;
    }
    & .r {
      color: var(--c-a-hover); font-weight: normal; grid-column: 3;
      text-align: left;
    }
  }
    & .wikibox-sub {
        display: grid; grid-template-columns: 100%;
        & > div {
            height: 8rem; overflow-y: auto; padding-bottom: .4rem;
            &.rebal {
                height: auto; padding-bottom: 0;
            }
            &.vr {
            width: 90%; height: 2px; margin: 5px auto 0 auto;
            }
        }
        & > hr {margin: 5px auto 0 auto;}
        & h2 {
            margin-bottom: .5rem;
        }
    }
    & ol, ul {
        list-style: none; text-indent: 0; padding-left: 1ch; padding-bottom: 0; margin-block: 0;
        &[data-list-] {
            list-style: "-"; text-indent: 1ch;
        }
        &[data-no-list] {
            list-style: none; text-indent: 0;
        }
        & li {
            margin: .4rem 0;
        }
    }
  
}
@container wikibox (width > 13rem) {
  .wikibox {
    & .wikibox-sub {
      display: grid; grid-template-columns: 48% auto 48%;
      & p {
        font: .9em var(--font-p0); text-align: center; margin: 2px 0 2px 0;
      }
      & hr {grid-column: span 3; width: 90%;}
      & div.vr {
        height: 90%; width: 2px; margin: 10px auto 10px auto;
      }
    }
    
  }
} /*Creates subbox grid display when enough space*/
@media screen and (max-width: 720px) {
  .wikibox {min-width: 5rem; width: 30%; padding: .3rem}
} /*decreases wikibox width on narrow screen sizes*/
@container wikibox (width < 14rem) {
  .wikibox {
    font-stretch: condensed; font-size: .8rem;
    & :is(h1,h2) {
      font-stretch: condensed;
    }
    & p {font-stretch: condensed;}
    & > .wikibox-bio {
      display: grid; grid-template-columns: max-content auto; font-stretch: condensed;
      width: auto;
      & div {
        justify-content: left;
        &:is(:nth-last-child(2), :nth-last-child(3)) {
          border-bottom: var(--border);
        }
      }
      & .l {justify-content: center;}
      & .r {
        grid-column: span 2; padding: 5px 0 2px 2px;
        justify-content: center;
      }
    }
  }
} /*wikibox condense*/


.wikinote {
  width: auto; margin: 1%;
  border: .4rem outset var(--c-acc1); background-color: var(--c-bg1);
  content: ''; clear: both; display: flex;
  text-indent: 0;
  & h1 {
    float: left; width: max-content; font-size: 3rem; margin: 1.2rem 1.5rem; background-color: unset;
  }
  & > div {
    display: flex; flex-direction: column;
    align-items: center; align-content: center; justify-content: space-around;
  }
  & p {
    font: italic bold 24px var(--font-p0); color: var(--c-acc2); margin: auto;
    padding: 1.2rem; align-self: center;
  }
}


.boxy {
    margin: 1rem .5rem; padding: 20px 5px;
    border: 2px outset var(--c-acc0);
    & h1 {
        font-size: 32px; line-height: 36px; margin: 0 10px 15px 10px
    }
}




@media (forced-colors: active) {
    #article {
        border: none;
    }
  
}