/* cursor */
html{
cursor: var(--cursor-main), default;
}
/* cursor */

/* general layout */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

a:link{text-decoration: none;}
/* general layout */

/* layout */
body{
background-image: var(--bg-image);
background-color: var(--bg-color);
overflow-x: hidden;
margin: 10% -30px 10% -30px;
}

nav{
width: 270px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}

.side{
width: 220px;
height: 100%;
padding: 1rem 0.5rem 1rem 1rem;
display: flex;
flex-direction: column;
}

main{
display: flex;
flex-direction: column;
}

.boxgap{
display: flex;
flex-direction: column;
gap: 1rem;
margin-left: 240px;
}

.box{margin: 0 10% 0 10%;}

@media screen and (max-width: 800px) {
body {margin: 0 -30px 0 -30px; background-color: var(--side-background);}
.boxgap {margin: 20px 0 100px 0;}

nav{
position: relative;
top: 0;
width: 100%;
height: auto;
}

.side{
height: auto;
width: 100%;
text-align: center;
padding: 1rem 3rem 1rem 3rem;
}
}
/* layout */

/* layout backgrounds & visuals */
nav{
background-image: url('Sitewide/Sidebar-Fringe-Dark.png');
background-size: 50px;
background-repeat: repeat-y;
background-position: top right;}

.side{
background-image: url("Sitewide/Box-Fabric-Background-Dark.png");
background-color: var(--side-background);}

@media screen and (max-width: 800px) {
nav{
  background-image: url('Sitewide/Sidebar-Fringe-Dark-90.png');
  background-size: 80px;
  background-repeat: repeat-x;
  background-position: bottom left;
  padding-bottom: 50px;
  }
}

.headerbox, .box, footer{
background-color: var(--box-background);
background-image: url("Sitewide/Box-Fabric-Background-Light.png");
background-size: 200px;
border: 6px double var(--border-color);
box-shadow: 0px 0px 20px 3px black;}

.top{
border-bottom: 6px double #76AFC2;
text-align: center;
margin-top: 5px;
}

main h1{
color: var(--header-color);
background: url("Sitewide/Box-Fabric-Background-Light.png") center center;
background-color: var(--header-color);
background-size: 200px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip:text;
background-clip:text; 
}

/* layout backgrounds & visuals*/

/* sidebar lists */
.side h3{
font-family: var(--header-font), serif;
line-height: .8em;
font-weight: normal;
font-size: 3em;
margin: .3em 0 .3em 0;
border-bottom: 2px solid var(--nav-color);
background: url("Sitewide/Box-Fabric-Background-Dark.png") center center;
color: var(--nav-color);
background-color: var(--nav-color);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip:text;
background-clip:text; 
}

.side a:hover {text-decoration: underline; font-weight: bold; cursor: var(--cursor-hover), default}
.side, .side a:link, .side a:hover, .side a:visited, .side li{color: var(--nav-color);}
.side ul{padding-left: 3rem;}
.side li{font-size: 1.5em; list-style-image: var(--nav-button);}
#navcurrent {opacity: 0.5}

@media screen and (max-width: 800px) {
  
.side h3{font-size: 2em;}
  
.side li{font-size: 1em;}
.side ul{padding: 0;}
.side ul li{display: inline}
.side ul li:before {content: "≺"; font-size: 1em;}
.side ul li:after {content: "≻"; font-size: 1em;}

}

/* sidebar lists */

/* headers & footers */
.headerbox, footer{
margin-left: 0px; 
margin-right: 0px;
text-align: center;
padding: 5px 130px 5px 130px;
}

.headerbox{
padding: 10px 70px 5px 70px;
}

h1{line-height: 1em; margin: .2em;}
.headerbox h1{font-size: 5em;}
.top h1{font-size: 3em;}

.headerbox p{font-weight: bold; margin-bottom: 0px;}
.headerbox a:hover{color: var(--link-hover-color); font-style: italic; cursor: var(--cursor-hover), default;}

footer {padding-top: 10px;}

footer ul li{display: inline-block}
footer ul li:before {content: "≺"; font-size: 1em; letter-spacing: .5em}
footer ul li:after {content: "≻"; font-size: 1em; letter-spacing: .5em}

@media screen and (max-width: 1000px) {
.headerbox h1{font-size: 3em}
.top h1{font-size: 2em}
}
/* headers & footers*/

/* main body text */
.text {
padding: 1em;}

main h1, h2{
font-family: var(--header-font), serif;
}

main p, main h2, main ul, summary, main h3, .imagerow{
font-family: var(--main-font);
color: var(--text-color);
line-height: 1.2;
margin-bottom: .5em;
text-decoration: none;
font-weight: normal;
}

main p{
font-size: 1em;
}

main p a:link, main li a:link, main ul a:link, main h3 a:link{color: var(--link-color);text-decoration: underline;}
main p a:visited, main li a:visited, main ul a:visited, main h3 a:visited{color: var(--link-color);}
main p a:hover, main li a:hover, main ul a:hover, summary:hover, main h3 a:hover{color: var(--link-hover-color); cursor: var(--cursor-hover), default;}

.sitebutton {transition: all .2s ease-in-out;display: inline;}
.sitebutton:hover {transform: scale(1.2); opacity: 0.5; cursor: var(--cursor-hover), default;}

main h2{
font-size: 1.5em;
font-weight: bold;
margin-top: 1em;
}

main h3{
font-size: 1.2em;
font-weight: bold;
margin-top: 1em;
}

.text ul li{display: block; margin-left: 1em}
.text ul li:before {content: "➵  ";}
.text ul ul li{font-style: italic;}
.text ul ul{margin-bottom: 0;}

details p{margin-left: 1em;}

details > summary {
    color: var(--link-color);
    list-style-type: '➵ ';
    font-family: 'Hoefler Text', serif;
}

details[open] > summary {
    list-style-type: '➴ ';
    font-family: 'Hoefler Text', serif;
}

#progressbar {
  background-color: #46869B;
  background-image: url("Graphics/cloth-alike.png");
  border: double 6px #336171;
  /* (height of inner div) / 2 + padding */
  margin: 10px;
}

#progressbar>div {
  background-color: #336171;
  background-image: url("Graphics/classy-fabric.png");
  /* Adjust with JavaScript */
  height: 25px;
  padding: 5px;
  color: #336171;
}

#scrollbox{overflow:auto; height: 500px;}
/* main body text */

/* buttons */
.buttonwrapper {
  overflow: hidden;
  text-align: center;
  padding: .5em 0px;
}

.buttonwrapper button{
  cursor: var(--cursor-main), default;
  background-color: transparent;
  border: none;
  color: var(--link-color);
  padding: 0px 5px;
  text-align: center;
  display: inline-block;
  font-size: 1.2em;
  font-family: 'Hoefler Text', serif;;
  margin: 0px;
}

.buttonwrapper button:hover{color: var(--link-hover-color); cursor: var(--cursor-hover), default;}

.buttonwrapper button:before {content: "≺  "; font-size: 1em;}
.buttonwrapper button:after {content: "  ≻"; font-size: 1em;}

.buttonwrapper button:active{color: red;}
/* buttons */

/* full body character test */

.sideimage{
width: 600px;
position: fixed;
bottom: 0px;
left: 160px;
}

#body-image 
{float: left;width: 40%;}
#body-image img {width: 100%;margin-top: 1em;}
/* Media Queries */
@media only screen and (max-width: 850px) 
{
#body-image {float: left;width: 25%;}
}


@media screen and (max-width: 760px) {
#body-image {display:none;}
}

/* full body character test */

/* image galleries */
.columns2 {
  float: left;
  width: 50%;
  padding: 3px;
}

.columns3 {
  float: left;
  width: 33%;
  padding: 3px;
}

.columns4 {
  float: left;
  width: 25%;
  padding: 3px;
}

.columnsside {
  float: left;
  width: 25%;
  padding: 3px;
}

/* turns image galleries into wider columns when window is about halfway sized*/
@media screen and (max-width: 1000px) {
.columns4{width: 50%;}
}

/* turns image galleries into full width columns when window is very small*/
@media screen and (max-width: 500px) {
.columns2, .columns3, .columns4 {width: 100%;}
.columnsside {display: none}
}

.imagerow img{
  float: center;
  width: 100%;
}

.imageborder{
  /*border: 2px solid var(--text-color);*/
  text-align: center;
}

.imageborder img {
  padding: 5px;
}

.imageborder p{
  font-style: italic;
}

.imageborder h2{margin: 0;}

.imagerow a p, .imagerow a h2{color: var(--link-color);text-decoration: underline;}
.imagerow a:hover, .imagerow a p:hover, .imagerow a h2:hover{color: var(--link-hover-color); cursor: var(--cursor-hover), default;}

.imagerow a img:hover{
opacity: 0.5;
transition: all .2s ease-in-out;
cursor: var(--cursor-hover), default;
}

/* Clear floats after the columns */
.imagerow:after {
  content: "";
  display: table;
  clear: both;
}

/* image galleries */





::-webkit-scrollbar{
width: 8px; 
}
    
::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #967e68;
}

.tab {
  overflow: hidden;
  text-align: center;
}

/* Style the tab content */
.tabcontent {
  display: none;
}