:root {
    --black: #121111;
    --dark: #825635;
    --light: #CA9451;
    --white: #faf9f0;
    --gray: gray;
    --silver: silver;
    --lh1: 1.4;
    /* main line height */
    --sm: 0.9rem /* smaller text */
}

* {
    box-sizing: border-box;
    font-size: 16px;
    transition: none !important;
}

::selection {
    color: var(--white);
    background-color: var(--gray);
}

html, body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background: var(--black);
    text-align: left;
    color: var(--white);
    line-height: var(--lh1);
}

p {
    margin-bottom: 1rem;
}

.block{
  display: block;
  clear: both;
}

.center, .aligncenter {
    display: table;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    text-align: center;
}

.grid-centered {
    max-width: 1000px;
}

.header-nav {
    border: 0;
    padding: 0;
}

.header-links {
    margin-bottom: 20px;
    display: block;
    float: none;
    text-align: right;
}

h1, h2, h3, h4, h5 {
    color: var(--light);
    margin: 15px 0 15px 0;
    font-weight: bold;
}

h1 {
    font-size: 3rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.6rem;
}

h5{
    font-size: 1.1rem;
    margin-bottom: 0;
}


hr{
    border-bottom: 1px solid var(--dark);
}

i, em {
    font-size: inherit;
}

a {
    color: var(--light);
    border-bottom: 1px solid var(--white);
    text-decoration: none;
    font-size: inherit;
}

a:hover {
    color: var(--silver);
    border-bottom: 1px solid var(--light);
    text-decoration: none;
}


/* anchor link plugin */
a.anchor::after{
    display: none;
}
a.anchor:hover::after, a.anchorjs-link, a.anchorjs{
    display: inline;
    border: 0;
}

a.anchorjs-link, a.anchorjs{
cursor: copy;
}

/* end anchor link plugin */

.header-links li a {
    color: var(--light);
    padding: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dark);
}

.header-links li a.active, .header-links li a:hover {
    color: var(--silver);
    border-bottom: 1px solid var(--dark);
}

a.btn, button {
    background-color: var(--dark);
    border-radius: 10px;
    font-weight: bold;
    color: var(--white);
    font-size: large;
    padding: 20px;
    border: 0;
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    cursor:pointer;
}

a.btn:hover, button:hover {
    background-color: var(--light);
}

li::marker {
    font-weight: bold;
    color: var(--light);
}

li li::marker {
    font-weight: unset;
}

li:not(.notice li) {
    margin: 2px;
    margin-bottom: 10px;
}

li li {
    font-size: 0.9em;
    line-height: 1.2;
}

li li:first-of-type {
    margin: 5px 0 5px 2px;
}

li li li{
    font-size: 0.8em;
}

ul, ol, li {
    list-style-position: inside;
    margin-left: 0;
    padding-left: 10px;
}

ul ul, ul ol, ol ul, ol ol {
    padding-left: 0;
    margin: 0 0 7px 0;
}

details ul, details ol, details li {
    margin-left: 0;
    padding-left: 5px;
    line-height: var(--lh1);
}


.header-logo {
    display: none;
}

.emphasis {
    border: 1px solid var(--light);
    padding: 20px;
    margin-bottom: 15px;
}

.emphasis strong {
    color: var(--light);
}

.notice {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
    color: var(--light);
    padding: 15px;
    max-width: 50%;
    border: 1px solid var(--dark);
    display: block;
}

.notice *:not(.notice ul li):not(.notice ul) {
    margin-left: auto;
    margin-left: auto;
    text-align: center;
}

.notice ul, .notice ol, .notice li {
    line-height: unset;
}

.notice b, .notice strong {
    color: var(--light);
}

.notice details, .notice details[open] {
    text-align: center;
    border-left: 0;
  	padding-left: unset;
}

b, strong {
    font-weight: bold;
    font-size: inherit;
}

code, code.hljs, code.scss {
    color: var(--gray);
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border: 0;
    font-size: 1em;
}


details summary {
    color: var(--light);
    margin-bottom: 5px;
    display: list-item;
    cursor: pointer;
    font-weight: inherit;
}



details summary::marker {
    color: var(--gray);
}

details summary > :where(h1, h2, h3, h4, h5){
    /* fixes triangles not being aligned correctly */
vertical-align: sub;
}

details summary b{
    font-size: inherit;
    color: var(--gray);
}

details {
    margin-bottom: 15px;
    padding-left: 30px;
}

details::after {
    border-bottom: 1px solid var(--gray);
    width: 50%;
    content: ' ';
    color: transparent;
    box-sizing: content-box;
    word-break: keep-all;
    display: block;
    margin: 20px auto 10px auto;
}

details[open]::after {
    border-bottom: 1px solid var(--dark);
    width: 80%;
}

.notice details::after, /* notices */
details.noborder::after, 
details.noborder[open]::after /* noborder class */ {
    /* don't want the bottom separator in certain cases */
    
    border: 0;
}

details[open] details:last-of-type::after {
    border: 0;
    margin: 0;
}

details[open] details[open] {
    border-left: 2px dotted var(--dark);
}

details[open] details[open] details[open] {
    border-left: 1px dotted var(--gray);
}

details[open] details {
    margin-left: 0;
    padding-left: 15px;
}

details details summary {
    margin-top: 10px;
}

details li strong {
    color: var(--light);
}

details[open] {
    border-left: 3px dotted var(--gray);
}

details[open]:not(details) summary, /* all open details summaries */
details details[open]:not(details) summary, /* children summaries */
details[open].ex summary,                         /* ex summaries */
.faq details[open]:not(details) summary,         /* faq summaries */
.faq details details[open] summary,
details.faq details[open] summary,
.faq details[open] summary
{
    font-weight: bold !important;
    color: var(--light);
}


.faq details:after {
    padding: 0;
    margin-left: 2rem;
    margin-top: 1rem;
    margin-bottom: -1rem;
}

details .faq details:after{
    padding: inherit;
    margin-left: 2rem;
    margin-top: inherit;
    margin-bottom: inherit;
}

.faq details:last-of-type:after {
    margin: 20px auto 10px auto;
}

.faq details details {
    padding: 0;
    margin: 0;
}

.faq details[open]::after:not(details.faq > details[open]:after) {
    padding-top: 0.5rem;
}




.ex li, ul .ex li, .ex span { /* vpr list examples */
    font-size: var(--sm);   
    margin: unset;
    margin-bottom: 0.4rem;
}

.ex a{ /* links in vpr examples */
    color: var(--gray);
}

.note, .note p {
    margin-top: -15px;
    display: block;
    margin-bottom: 0.7rem;
    font-size: var(--sm);
    margin-left: 10px;
}

.footer, .footer div.toplink {
    border: 0;
    position: absolute;
    top: 0;
}

.footer .toplink a.top {
    border: 1px solid var(--dark);
    display: table;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
    font-weight: bold;
    position: fixed;
    bottom: 1vh;
    right: 2vw;
    visibility: visible;
    background-color: var(--black);
}


blockquote {
    font-size: unset;
    margin-left: 25px;
    border-left: 1px dashed var(--dark);
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 0 10px 0 10px;
}


details summary :where(h1, h2, h3, h4, h5) {
    /* no linebreaks when headers are in details titles */
    margin: 0;
    display: inline;
}

details :where(details:not(details[open])) summary :where(h1, h2, h3, h4, h5){
color: var(--gray);
}


/* only when anchors plugin displays on the left
  details summary h2 .anchor, details summary h2 .anchorjs-link,
  details summary h3 .anchor, details summary h3 .anchorjs-link {
    margin-left: -1.8em !important;
  }
  */
.faq details details {
    margin-left: 2%;
    padding-bottom: 20px;
    padding-left: 1%;
}

.faq details details:first-of-type {
    margin-top: 20px;
}

.faq {
    margin-bottom: 80px;
}

details.faq > details:after { /* used in Category FAQ */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.glossary li dfn, .schedule strong {
    font-weight: bold;
    font-style: unset;
    margin: 0 5px 3px 0;
    background: var(--dark);
    padding: 5px;
    display: block;
    color: var(--white);
}

ul.glossary {
    list-style: none;
    padding: 1rem;
    display: table;
    color: var(--silver);
}

ul.glossary li {
    margin-bottom: 1rem;
    display: block;
}

.schedule, ul.glossary li p {
    color: var(--silver);
    line-height: 1.2;
    font-size: var(--sm);
}

.schedule b {
    color: var(--white);
    font-size: unset;
}


ul.aside, .aside li {
    line-height: 0.6;
    font-size: var(--sm);
    color: var(--silver);
}

.aside li > a::after {
    content: '\A';
    white-space: pre;
}

.aside li:first-of-type {
    margin-top: 0.6rem;
}

.aside li:last-of-type {
    margin-bottom: 0.6rem;
}

.aside strong {
    color: var(--white);
}


/* toc stuff */


details.toc { /* should be used to replace TOC fieldsets */
    border: 1px solid var(--dark);
    padding: 30px;
    margin-top: 90px;
}

details.toc summary {
    border: 1px solid var(--dark);
    font-weight: bold;
    font-size: 1.5rem;
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    position: relative;
    top: -80px;
    background-color: var(--black);
    margin-bottom: -60px;
}


details.toc>summary::before {
    /* space for note about open/closing */
    content: ' ';
    font-size: small;
    font-weight: normal;
    padding: 0;
    margin: 0;
    color: var(--gray);
    float: top;
    vertical-align: super;
    visibility: hidden;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table;
    padding-bottom: 5px;
}

details.toc>summary:hover {
    background-color: #262626;
}

details.toc>summary:hover::before {
    content: 'Click to collapse';
    visibility: visible;
}

details.toc:not(details.toc[open])>summary:hover::before {
    content: 'Click to expand';
    visibility: visible;
}


.toc li a:hover {
    /* all toc links on hover */
    border-bottom: 1px solid var(--white);
    color: var(--silver);
}


.toc li, .toc ul li, .toc ol li, .toc ol li ul li, .toc ol li ul li ul li {
    /* all toc li */
    padding: 0;
    margin: 0;
    font-weight: normal;
}


.toc ol > li::marker {
    /* first & second level bullets */
    color: var(--dark);
}

.toc > ol > li > a{
    /* root level li */
    line-height: 2;
}


.toc ol li a:not(.toc ol ul a), .toc ol > li:not(.toc ol ul li) {
    /* root + first (child) level links */
    border-color: var(--dark);
    font-weight: bold;
}

.toc ol ul {
    /* second level ul */
    margin-left: 1.2rem;
    list-style-type: disc;
}

.toc ol ul > li a {
    /* second level links */
    color: var(--gray);
    border-bottom: 0;
}

.toc ol ol {
    /* second level ol */
    margin: 0;
    margin-left: 1.3rem;
    padding: 0;
    list-style-type: upper-roman;
}


.toc ol ul ul {
    /* third level ul */
    margin-left: 1rem;
    list-style-type: circle;
}


/* end toc stuff */


/* dropdown menu */

@media only screen and (max-width: 840px){
    nav, nav .menu, nav .menu .menu-main, nav .menu .menu-main .menu-li, nav .menu .menu-main .menu-li .menu-item, nav .menu .menu-main .menu-dropdown, nav .menu .menu-main .menu-dropdown .menu-li, nav .menu .menu-main .menu-dropdown .menu-li .menu-item, nav .menu .menu-itemactive {
            /* everything */
        display: block;
        width: 100%;
        position: relative;
        top: unset;
        list-style: none;
        margin: 0;
    }
    
    nav .menu .menu-main .menu-li .menu-item:hover{
        border: 0 !important;
    }

    nav .menu-main .menu-dropdown{
        /* submenu hide */
     max-height: 0;
     overflow: hidden;
     border: 0;
        
    }
    
    .menu ul li:hover > ul,
    .menu ul li:focus-within > ul,
    .menu ul li ul:hover,
    .menu ul li ul:focus{
        /* submenu show */
    max-height: 500px;
    border: 0.2rem solid var(--white);
    }
    
    /* fix link BGs on mobile */
    
nav .menu .menu-main .menu-li:first-child > .menu-item:not(.menu-main .menu-dropdown .menu-item), .menu .menu-itemactive[href="/"]{
    /* About server */
    background-position-x: right !important;
    background-position-y: center !important;
    background-size: 30% !important;
    }
  
    nav .menu .menu-main .menu-item[href="/link"]{
    /* discord invite link */
    background-position-x: right !important;
    background-position-y: center !important;
    background-size: 25% !important;
    }
    
}


nav{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table;
    margin-bottom: 3rem;
}

nav:after{
    content: '';
    display: block;
    clear: both;
}

nav .menu > *, nav .menu .menu-main, nav .menu .menu-main > *, nav .menu li{
    padding: 0;
    margin: 0;
}

.menu {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 0;
    text-align: left;
    margin: 1rem 0 2rem 0;
    background: inherit;
    padding: 2rem 0 1rem 0;
  }

.menu .menu-main{
    display: flex;
}

nav .menu .menu-main .menu-item:not(.menu-main .menu-dropdown .menu-item){
    /* top menu links */
    color: var(--silver);
    border-bottom: 0;
    padding: 2rem;
    background: var(--dark);
    list-style: none;
}

.menu ul.menu-main > li{
    /*parent items */
    display: inline-block;
    font-size: 1.2rem;
    font-weight: bold;
}

nav .menu-itemactive{
    /* active page's menu item */
    background: var(--light);
    color: white;
    padding: 2rem;
    border: 0.2rem solid var(--white);
}

nav .menu-dropdown .menu-itemactive{
    /* active page if it's in a submenu */
   display: block;
    padding: 0.7em;
}

nav .menu .menu-main .menu-item:hover:not(.menu-dropdown .menu-item:hover){
    /* parent items on hover */
   background: var(--light);
    color: var(--white);
    border-bottom: 3px solid var(--white);
}

.menu .menu-dropdown {
    /* submenu */
  visibility: hidden;
    display: none;
    list-style: none;
    background: var(--dark);
    margin: 0;
    top: 127%;
    padding: 0;
    border-top: 0.2rem solid var(--white);
}

.menu .menu-main .menu-dropdown .menu-item{
    /* submenu items */
    border: 0;
    color: var(--silver);
    display: block;
    padding: 0.5em;
}

.menu .menu-main .menu-dropdown li:last-child .menu-item{
    /* last submenu item */
    padding-bottom: 0.7em;
}

.menu .menu-main .menu-dropdown .menu-item:hover{
    /*submenu items on hover */
    color: var(--white);
    background: var(--light);
}

.menu ul li:hover > ul,
.menu ul li:focus-within > ul,
.menu ul li ul:hover,
.menu ul li ul:focus{
    /* submenus */
   visibility: visible;
   display: block;    
    position: absolute;
}

/* special styles for certain menu items */

.menu .menu-main .menu-li:first-child > .menu-item:not(.menu-main .menu-dropdown .menu-item){
    /* About server */
    background: var(--dark) no-repeat bottom -30% left -30%/70% url("https://bentovid.com/user/images/bentobox-icon.png") !important;    
    background-blend-mode: luminosity;
}
.menu .menu-main .menu-li:first-child > .menu-item:hover:not(.menu-main .menu-dropdown .menu-item){
    /* about server on hover */
    background-color: var(--light) !important;
    background-blend-mode: normal;
}
.menu .menu-itemactive[href="/"]{
/* when about page is active */
    background: var(--light) no-repeat bottom -30% left -30%/70% url("https://bentovid.com/user/images/bentobox-icon.png") !important;    
}

.menu .menu-main .menu-item[href="/link"]{
    /* discord invite link */
    background: var(--dark) no-repeat bottom right -5.5%/45% url("https://bentovid.com/user/images/BentoHeadPus.png") !important;    
 background-blend-mode: luminosity;
}
.menu .menu-main .menu-item[href="/link"]:hover{
    /* discord invite link on hover */
    background-color: var(--light) !important;
 background-blend-mode: normal;
}

/* end dropdown menu */

/* Web Ring Start */

code span.hljs-string{
    color: var(--light);
}

code.language-html{
    border: 1px solid var(--dark);
    padding: 15px;
}

table#webring-table{
    border-collapse: collapse;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
}

table#webring-table td{
padding: 5px 15px;
}

table#webring-table th {
  padding: 1rem;
  font-size: x-large;
  text-align: left;
  background-color: var(--dark);
  color: var(--white);
  border: 1px solid var(--dark);  
}

table#webring-table tr:nth-child(even){
    background-color: #202020;
}

table#webring-table a{ /* all links */
    border-bottom: 0;
    color: var(--gray);
    cursor: default;
}
table#webring-table tr td:first-child a { /* only webpage titles */
  font-weight: bold;
  color: var(--light);
  cursor: pointer;
}
table#webring-table tr td:first-child a:hover{
    color: var(--silver);
}

div.wwidget{
    border: 1px solid var(--dark);
    padding: 15px;
    line-height: 0.5;
    position: fixed;
    bottom: 1vh;
    left: 2vw;
    background-color: var(--black);
}

webring-widget #title a{
    color: var(--gray);
    font-weight: bold;
}
webring-widget a:hover, webring-widget #title a:hover{
    color: var(--white);
}

webring-widget a, webring-widget a:hover{
    border-bottom: 0;
    padding: 5px;
}

webring-widget a.arrow{
    font-size: xx-large;
    position: relative;
    top: 4px;
}


/* web ring end */

/* LEGACY CODES 
Use other stuff if/when you redo the pages that use these classes 
*/

.orangeb b, .orangeb strong, .orangeb code, .orangeb code.hljs, .orangeb code.scss {
    color: var(--light); /* used to make things the --light color mostly in server guides */
  }

.orangeb code, .orangeb b code, .orangeb strong code{
border: 1px outset var(--light);
padding: 2px;
margin: auto;
box-sizing:border-box;
line-height:1.8;
}
.orangeb img{
margin-top: 5px;
}


  fieldset.toc {
    border: 1px solid var(--dark);
    padding: 2%;
    margin: 2%;
    margin-bottom: 10%;
}

fieldset.toc legend {
    font-size: x-large;
    color: var(--light);
    font-weight: bold;
    padding: 10px;
    border: 1px solid var(--dark);
}

fieldset.toc ol li{
    line-height: var(--lh1);
}