/* Import EB Garamond (serif) and Roboto (sans-serif) from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*------------DEFAULT MODES------------*/

/* Default color scheme and font modes, which are currently light/serif. */
/* Scroll down to TOGGLED MODES to see dark/sans-serif mode. */
:root {
  /*General*/
  --main-width:640px;
  --background-color: #E3E0D7;
  --text-color: #524d4b;
  --body-font:"EB Garamond", serif;
  --font-weight:400; 
  --font-size:1.25em;
  --line-height:1.6;
  --link-color:#6464b8;
  --link-color-hover:#ad5d2d;
  --highlighted-text-color:#6464b8;
  --symbolinvert:invert(0); /* For black line images! You can see this in action in the Hharmari Symbol Table. */
  --sidepadding:20px;
  
  /*Header and H1, H2, H3*/
  --header-title-font:"EB Garamond", serif; /* Used in H1. */
  --body-title-font:"EB Garamond", serif; /* Used in H2, and H3. */
  --button-bg: #c9c2ba;
  --button-text: #524d4b;
  --symbolinvert-hover:invert(1); /* Currently used on header button SVGs when you hover over them */
  --default-colorscheme-btn-showhide: none; /*hides/shows buttons*/
  --toggled-colorscheme-btn-showhide: block; /*hides/shows buttons*/
  
  /*Table*/
  --table-border: #938b88;
  --table-alternating-bg:#d8d2ca;
  
  /*Serif/Sans-Serif*/
  --default-font-btn-showhide: block; /*hides/shows buttons*/
  --toggled-font-btn-showhide: none; /*hides/shows buttons*/
  
  /*Lightbox Styling*/
  --lightbox-bg-color: var(--background-color);
	--lightbox-button-color: brightness(0);
	
	/*"E-Book Reader" Filter for Images*/
	--reader-filter-opacity: 0.85;
	--reader-filter-blendmode: multiply;
	--reader-filter-other: saturate(0.45); /* Used with filter: (value); */
}

/*------------BODY------------*/

body {
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  line-height: var(--line-height);
  font-size:var(--font-size);
  font-family: var(--body-font);
  font-weight: var(--font-weight);
}

/*------------HEADER------------*/

header{
  text-align: center;
  padding: var(--sidepadding);
}
header h1{
  font-family:var(--header-title-font);
  text-align:center;
}
#theme-controls{
  display: flex;
  justify-content: center;
  gap: 10px;
}
#theme-controls button{
  padding: 12px 20px;
  width:56px;
  line-height: 0;
  cursor: pointer;
  background-color: var(--button-bg);
  color: var(--button-text);
  border:none;
  border-radius: 5px;
}
#theme-controls button:hover{
  background-color: var(--text-color);
  color: var(--background-color);
}
#theme-controls button:hover img{
  filter:var(--symbolinvert-hover) opacity(0.5);
}
button img{
  height:1.2em;
  filter:var(--symbolinvert) opacity(0.5);
}
.theme-controls-pair{
  display: grid;
  gap: 10px;
}
#toggled-font-btn{display:var(--default-font-btn-showhide);}
#default-font-btn{display:var(--toggled-font-btn-showhide);}
#default-colorscheme-btn{display:var(--default-colorscheme-btn-showhide);}
#toggled-colorscheme-btn{display:var(--toggled-colorscheme-btn-showhide);}

/*------------MAIN------------*/

main{
  max-width: var(--main-width);
  margin: 0 auto;
  padding: 0 var(--sidepadding) var(--sidepadding) var(--sidepadding);
}
h1, h2, h3{
  font-family:var(--body-title-font);
  text-align:center;
}
img{
  max-width:100%;
  width:auto;
}
a, a:visited{color:var(--link-color);}
a:hover{color:var(--link-color-hover);}
details{margin: 10px 0;}
summary{font-weight:bold;}
::selection {
  background: var(--highlighted-text-color);
  color:white;
}

/*------------TABLE------------*/

table{
  width: 100%;
  border-collapse: collapse;
}
table th, table td{
  border: 1px solid var(--table-border);
  padding: 10px;
}
table th {font-weight: bold;}
tr:nth-child(even) {background-color: var(--table-alternating-bg);}
td{
  padding:0.5em;
  text-align:center;
}
#table-wrapper {position:relative;}
#table-scroll {
  height:auto;
  overflow:auto;
}
#table-wrapper table {
  width:100%;
  border-collapse: collapse;
}
.table-symbol{
  max-width:100%;
  max-height:100%;
  display:grid;
  align-items:center;
  justify-items: center;
}
.table-symbol img{
  max-width:2em;
  filter:var(--symbolinvert) opacity(0.75);
}
.blacklineart-matchscheme{filter:var(--symbolinvert) opacity(0.75);} /* General use version of .table-symbol img */
@media (max-width: 768px){
  table th, table td {font-size: 0.9rem;}
}

/*------------FOOTER------------*/

footer{
  text-align: center;
  padding: 10px;
  margin-top: 30px;
}

/*------------TOGGLED MODES------------*/

[data-theme="toggledColorScheme"]{
  /*General*/
  --background-color: #333;
  --text-color: #cbcbcb;
  --link-color:#c5c5fd;
  --link-color-hover:#eea77e;
  --highlighted-text-color:#5a5a77;
  --symbolinvert:invert(1); /* For black line images! You can see this in action in the Hharmari Symbol Table. */
  
  /*Header and H1, H2, H3*/
  --button-bg: #555;
  --button-text: #cbcbcb;
  --symbolinvert-hover:invert(0); /* Currently used on header button SVGs when you hover over them */
  --default-colorscheme-btn-showhide: block; /*hides/shows buttons*/
  --toggled-colorscheme-btn-showhide: none; /*hides/shows buttons*/
  
  /*Table*/
  --table-border: #555;
  --table-alternating-bg:#2b2b2b;
  
  /*Lightbox Styling*/
  --lightbox-bg-color: var(--background-color);
	--lightbox-button-color: brightness(1);
	
  /*"E-Book Reader" Filter for Images*/
	--reader-filter-opacity: 0.75;
	--reader-filter-blendmode: none;
	--reader-filter-other: contrast(0.85) saturate(0.45); /* Used with filter: (value); */
}
[data-font="toggledFont"]{
  --header-title-font:"Roboto", sans-serif; /* Used in H1. */
  --body-title-font:"Roboto", sans-serif; /* Used in H2, and H3. */
  --body-font:"Roboto", sans-serif;
  --font-weight:400;
  --font-size:1.15em;
  --line-height:1.7;
  --default-font-btn-showhide: none; 
  --toggled-font-btn-showhide: block; 
}

/*------------IMAGE READER FILTER------------*/

.reader-filter{
  opacity:var(--reader-filter-opacity);
  mix-blend-mode:var(--reader-filter-blendmode);
  filter:var(--reader-filter-other);
}

/*------------DIVIDERS. Give them cute names!------------*/

hr{
  border: none;
  border-top:2px solid var(--button-bg);
  color: var(--text-color);
  overflow: visible;
  text-align: center;
  height: 0em;
  margin:2em 0;
}
hr::after{
  background: var(--background-color);
  font-weight:bold;
  font-size:1em;
  padding: 0 6px;
  position: relative;
  top: -1em;
  font-family:sans-serif;
}

.hr-threefish:after{content: "𓆝 𓆟 𓆞";font-size:1.25em;}
.hr-seashore:after{content: "⋆｡𖦹 ˚ 𓇼 ˚｡⋆";}
.hr-boats:after{content: "⊹ ࣪ ﹏𓊝﹏𓂁﹏⊹ ࣪ ˖";font-size:1.25em;}
.hr-sardine:after{content: "𓆝 ⋆.";font-size:1.25em;}
.hr-plantseeds:after{content: "𓇢𓆸";}

/*------------ORNATE IMAGE FRAME------------*/

.ornate-frame{
  padding: 1.75em;
  line-height:0;
  box-sizing:border-box;
  background: var(--background-color);
  border: 5px dashed var(--button-bg);
  box-shadow: 0 0 0 3px var(--button-bg), inset 0 0 0 3px var(--button-bg), inset 0 0 0 10px var(--background-color), inset 0 0 0 12px var(--button-bg), inset 0 0 0 14px var(--background-color), inset 0 0 0 16px var(--button-bg), inset 0 0 100vw 100vw var(--background-color);
}
.ornate-frame img, .ornate-frame iframe{
  border-top: 3px solid var(--button-bg);
  border-left: 3px solid var(--button-bg);
  border-bottom: 3px solid var(--table-alternating-bg);
  border-right: 3px solid var(--table-alternating-bg);
  box-sizing:border-box;
}
/*------------VIDEOS------------*/
.embed-ratio iframe, video{
  width:var(--main-width);
  max-width:100%;
  max-height:100%;
}
video{height:auto;}
.ratio-16x9-horizontal{aspect-ratio:16/9;}
.ratio-16x9-horizontal iframe{height:calc(var(--main-width)*(9/16));}

.ratio-4x3-horizontal{aspect-ratio:4/3;}
.ratio-4x3-horizontal iframe{height:calc(var(--main-width)*(3/4));}

.ratio-1x1{aspect-ratio:1/1;}
.ratio-1x1 iframe{height:var(--main-width);}

.ratio-4x3-vertical{aspect-ratio:3/4;}
.ratio-4x3-vertical iframe{height:calc(var(--main-width)*(4/3));}

.ratio-16x9-vertical{aspect-ratio:9/16;}
.ratio-16x9-vertical iframe{height:calc(var(--main-width)*(16/9));}

/*------------AUDIO------------*/

.audio-container{
  text-align:center;
}

audio{
  max-width:var(--main-width);
  width:100%;
}

/*------------GRID GALLERY------------*/
.grid-gallery{
  display:grid;
  gap:0.25em;
}

.item-image-top{object-position:top;}
.item-image-bottom{object-position:bottom;}
.item-image-left{object-position:left;}
.item-image-right{object-position:right;}

.item-container-ratio-11x14-vertical > div{aspect-ratio:11/14;overflow:hidden;}
.item-container-ratio-9x12-vertical > div{aspect-ratio:9/12;overflow:hidden;}
.item-container-ratio-8x10-vertical > div{aspect-ratio:8/10;overflow:hidden;}
.item-container-ratio-6x9-vertical > div{aspect-ratio:6/9;overflow:hidden;}
.item-container-ratio-5x7-vertical > div{aspect-ratio:5/7;overflow:hidden;}
.item-container-ratio-4x6-vertical > div{aspect-ratio:4/6;overflow:hidden;}
.item-container-ratio-3x4-vertical > div{aspect-ratio:3/4;overflow:hidden;}
.item-container-ratio-2x3-vertical > div{aspect-ratio:2/3;overflow:hidden;}
.item-container-ratio-1x2-vertical > div{aspect-ratio:1/2;overflow:hidden;}

.item-container-ratio-1x1 > div{aspect-ratio:1/1;overflow:hidden;}

.item-container-ratio-1x2-horizontal > div{aspect-ratio:2/1;overflow:hidden;}
.item-container-ratio-2x3-horizontal > div{aspect-ratio:3/2;overflow:hidden;}
.item-container-ratio-3x4-horizontal > div{aspect-ratio:4/3;overflow:hidden;}
.item-container-ratio-4x6-horizontal > div{aspect-ratio:6/4;overflow:hidden;}
.item-container-ratio-5x7-horizontal > div{aspect-ratio:7/5;overflow:hidden;}
.item-container-ratio-6x9-horizontal > div{aspect-ratio:9/6;overflow:hidden;}
.item-container-ratio-9x12-horizontal > div{aspect-ratio:12/9;overflow:hidden;}
.item-container-ratio-8x10-horizontal > div{aspect-ratio:10/8;overflow:hidden;}
.item-container-ratio-11x14-horizontal > div{aspect-ratio:14/11;overflow:hidden;}

.item-cover img{object-fit:cover;width: 100%;height: 100%;}
.item-contain img{object-fit:contain;width: 100%;height: 100%;}

.grid-6{grid-template-columns: repeat(6, 1fr);}
.grid-5{grid-template-columns: repeat(5, 1fr);}
.grid-4{grid-template-columns: repeat(4, 1fr);}
.grid-3{grid-template-columns: repeat(3, 1fr);}
.grid-2{grid-template-columns: repeat(2, 1fr);}

@media (min-width: 300px) and (max-width: 600px) {
  .grid-6{grid-template-columns: repeat(3, 1fr);}
  .grid-5{grid-template-columns: repeat(2, 1fr);}
  .grid-4{grid-template-columns: repeat(2, 1fr);}
  .grid-3{grid-template-columns: repeat(3, 1fr);}
  .grid-2{grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 100px) and (max-width: 300px) {
  .grid-6{grid-template-columns: repeat(2, 1fr);}
  .grid-5{grid-template-columns: repeat(1, 1fr);}
  .grid-4{grid-template-columns: repeat(1, 1fr);}
  .grid-3{grid-template-columns: repeat(1, 1fr);}
  .grid-2{grid-template-columns: repeat(1, 1fr);}
}

@media (max-width: 100px) {
  .grid-6{grid-template-columns: repeat(1, 1fr);}
  .grid-5{grid-template-columns: repeat(1, 1fr);}
  .grid-4{grid-template-columns: repeat(1, 1fr);}
  .grid-3{grid-template-columns: repeat(1, 1fr);}
  .grid-2{grid-template-columns: repeat(1, 1fr);}
}

/*------------PROJECT LIST------------*/
.project-list{
  list-style-type: none;
  padding: unset;
}
.project-list li{
  display:flex;
  margin-bottom:0.5em;
}
ul.project-list li span {flex: 0 0 6em;}
.project-thumb img{
  max-width:88px;
  width:100%;
  border-radius:5px;
}
.project-date{font-style:italic;}
.project-titledate{
  text-align:center;
  font-style:italic;
}
@media (max-width: 250px) {
.project-list li{
  display:block;
  margin-bottom:1em;
}
}
/*------------IMAGE AND TEXT GRID------------*/
.grid-image-text{display:grid;gap:1em;}
.left-small{grid-template-columns:1fr 2fr}
.left-big{grid-template-columns:2fr 1fr}
.image-text-rightalign{text-align:right}

@media (max-width: 500px) {
.image-text-rightalign{text-align:left}
.grid-image-text{
  display:block;
  margin-bottom:1em;
}
}

/*------------OTHER------------*/
/* For making the size of certain elements uniformely smaller in the desktop container. */
.shrink-max-width-4em{width:calc(var(--main-width) - 4em);}
.shrink-max-width-6em{width:calc(var(--main-width) - 6em);}
.shrink-max-width-6em{width:calc(var(--main-width) - 8em);}
.rounded-corners{border-radius:5px;}

/*Making h1 titles smaller on mobile*/
@media (max-width: 500px) {
h1{font-size:1.5em}
}