/*Ty again to Squidknees for the original template! Check out the "about" page of this website if you would like to find a link to the template I used.*/

/********** COLOR VARIABLES **********/
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Doto:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root{
	/*text*/
	--text: #CCCCCC;
	--link: #009BFF;
	--linkhover: #009BFF;
	--redlink: #CC0000;
	--header: #CCCCCC;
	--boxheader: #CCCCCC;
	
	/*borders and underlines*/
	--mainborder: #666;
	--boxborder: #666;
	--headerunderline: #666;
	
	/*backgrounds*/
	--bodybg: #ddd;
	--mainbg: #222222;
	--boxbg: #333333; 
	--boxheaderbg: #222222;
	--sidebarlinkhoverbg: #545454;
}

/********** BASIC STYLING **********/

.gdesc-inner {
    position: relative;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

body{
	background-image: url('/images/bricks1_vignette_1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
	background-color: var(--bodybg);	
	color: var(--text);
  /*font-family: "Varela Round", sans-serif;*/
	font-family: sans-serif;
	margin: 0;
	padding: 0;
  font-size: 14px;
}

a {
    color: var(--link); 
    text-decoration: none; 
}

a:hover {
    color: var(--linkhover); 
    text-decoration: underline;
}

h1, h2, h3, h4, h5{
	margin-top: 0;   
}

h1, h2{
	color: var(--header); 
	border-bottom: 2px solid var(--headerunderline);
	overflow: hidden;
	clear: left;
}

img{max-width: 100%}

/********** UTILITY CLASSES **********/

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

a.redlink{text-decoration: none; color: var(--redlink);}

.big-text{font-size: large;}

.clear-both{clear: both;}

/********** GRID CONTAINER **********/

.container{
	display: grid;
	grid-template-columns: 200px auto;
	grid-template-rows: 1fr auto;
	grid-template-areas: 
		"sidebar main"
		"footer footer";
	row-gap: 15px;
	column-gap: 15px;
	margin: 15px 0 0 0;
	min-height: Calc(100vh - 15px);
}

/********** SIDEBAR **********/

sidebar{
	grid-area: sidebar;
}

sidebar .logo-image{
	margin-bottom: 10px;
}

/***** sidebar navs *****/

sidebar nav{
	padding: 10px;
	background-color: var(--mainbg);
	margin-bottom: 10px;
	
	border-radius: 0 10px 10px 0;
	border: 2px solid var(--mainborder);
	border-left: none;
}

sidebar nav h2{
	margin: 0 10px;
	font-size: 16pt !important;
}

sidebar nav ul{
	margin: 10px 5px 5px 5px;
	padding-left: 20px;
}

sidebar nav a{
	display: block;
	padding: 2px;
}

sidebar nav a:hover{
	background-color: var(--sidebarlinkhoverbg);
}

/********** MAIN **********/

main{
	grid-area: main;
	padding: 10px;
	background-color: var(--mainbg);
	
	border-radius: 10px 0 0 10px;
	border: 2px solid var(--mainborder);
	border-right: none;
}

/***** boxes *****/

.box-row{
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	column-gap: 10px;
}

.box{
	padding: 10px;
	background-color: var(--boxbg);
	flex: 1 1 0;
	
	border-radius: 10px;
	border: 2px solid var(--boxborder);
}

.box h1, .box h2, .box h3, .box h4, .box h5{
	color: var(--boxheader);
	background-color: var(--boxheaderbg);
	padding: 5px;
	
	border-radius: 5px;
	border-bottom: none;
}

/***** box navs *****/

ul.box-nav{
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0;
}

ul.box-nav li{
	flex: 1 1 0;
}

ul.box-nav a{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/***** infobox *****/

table.infobox{
	background-color: var(--boxbg);
	padding: 2px;
	border: 2px solid var(--boxborder);
	width: 300px;
	
	float: right;
	margin-left: 10px;
	
	text-align: left;
	
	font-size: 14px; /* Addition */
  width: 300px; /* Addition */
}

table.infobox tbody{
	vertical-align: top;
}

table.infobox th[colspan="2"]{
	text-align: center;
}

.infobox h1, .infobox h2, .infobox h3, .infobox h4, .infobox h5{
	border-bottom: none;
	background-color: var(--boxheaderbg);
	color: var(--boxheader);
	margin: 0;
}

table.infobox th, table.infobox td{
	padding: 5px;
}

/***** table of contents *****/

details.toc{
	background-color: var(--boxbg);
	padding: 5px 10px;
	margin-bottom: 10px;
	display: inline-block;
	
	border: 2px solid var(--boxborder);
}

details.toc ol{
	margin: 5px 0;
  counter-reset: index;
  list-style-type: none;
}

details.toc li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) ". ";
}

/***** floating images *****/
figure.left-image, figure.right-image{
	padding: 5px;
	margin: 0 0 5px 0;
	max-width: 253px;
	
	border: 2px solid var(--boxborder);
}

figure.left-image img, figure.right-image img{
	max-width: 250px;
	
	border: 2px solid var(--boxborder);
}

figure.left-image{
	float: left;
	clear: left;
	margin-right: 10px;
}

figure.right-image{
	float: right;
	clear: right;
	margin-left: 10px;
}

/***** gallery *****/
.gallery{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	margin-bottom: 10px;
	align-items: start;
}

figure.gallery-image{
	padding: 5px;
	border: 2px solid var(--boxborder);
	margin: 0;
}

figure.gallery-image img{
	border: 2px solid var(--boxborder);
	max-height: 200px;
}

figure.gallery-image figcaption{
	width: 0;
	min-width: 100%;
}

/***** notice boxes (for stubs, spoilers, etc) *****/

.notice{
	background-color: var(--boxbg);
	padding: 10px;
	margin: 0 auto 10px auto;
	
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	
	border: 2px solid var(--boxborder);
}

/*.notice{*/
/*	background-color: var(--boxbg);*/
/*	padding: 10px;*/
/*	margin: 0 auto 10px auto;*/
	
/*  display: flex; */
/*  flex-direction: row;*/
/*  align-items: center;*/
/*  justify-content: center;*/
    
/*  border: 2px solid var(--boxborder);*/
/*  max-width: fit-content;*/
/*}*/

.notice p{
	margin: 0 0 0 10px;
	font-style: italic;
}


/********** FOOTER **********/

footer{
	grid-area: footer;
	text-align: center;
	color: #FFFFFF
}

/********** MEDIUM/SMALL SCREENS **********/

@media (max-width:1000px) {
	
	/*turn the grid into a column*/
	.container{
		display: flex;
		flex-direction: column;
		margin-top: 0;
		margin-bottom: 0;
		min-height: 100vh;
	}
	
	/*detach main from left side*/
	main{
		flex-grow: 1;
		margin: 0 10px;
		
		border-radius: 10px;
		border-right: 2px solid var(--mainborder);
	}
	
	/*hide logo image*/
	.logo-image{display: none;}
	
	/*make the sidebar navs horizontal*/
	sidebar nav{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		
		padding: 0;
		margin: 0;
		
		border-radius: 0;
		border-right: none;
		border-top: none;
	}
	
	sidebar nav h2{border-bottom: none;}
	
	sidebar nav ul{
		list-style-type: none;
		margin: 10px 0 0 0;
		padding: 0;
		margin: 0;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex-grow: 1;
		justify-content: space-evenly;
	}
	
	sidebar nav a{
		padding: 4px;
		border-radius: 4px;
	}
}

/********** SMALL SCREENS **********/

@media (max-width:576px) {
	
	/*make the sidebar nav headers appear above the links, for space*/
	sidebar nav{
		flex-direction: column;
	}
	
	/*make the sidebar nav links spread out a bit more*/
	sidebar nav ul{
		margin: 0;
		padding: 0;
		align-self: stretch;
	}
	
	/*make box rows vertical*/
	.box-row{
		flex-direction: column;
		row-gap: 10px;
	}
	
	/*unfloat a bunch of stuff*/
	table.infobox{
		float: none;
		width: 90%;
		margin: auto;
	}
	
	ul.box-nav li{flex: 0 0 50%; margin: 0 auto 10px auto;}
	
	figure.left-image, figure.right-image{
		float: none;
		display: block;
		margin: 0 auto 5px auto;
	}
}

  .infobox-carousel {
    display: flex;
    flex-direction: column;
  }

  .infobox-carousel input[type="radio"] {
    display: none;
  }

  .carousel-tabs {
    display: flex;
    background: var(--boxheaderbg);
    border-bottom: 1px solid var(--mainborder);
   }

   .carousel-tabs label {
     flex: 1;
     padding: 5px;
     font-size: 0.8em;
     cursor: pointer;
     text-align: center;
     border-right: 1px solid var(--mainborder);
     background: var(--boxbg);
     color: var(--text);
   }

  .carousel-tabs label:last-child { border-right: none; }

        
  #tab1:checked ~ .carousel-tabs label[for="tab1"],
  #tab2:checked ~ .carousel-tabs label[for="tab2"],
  #tab3:checked ~ .carousel-tabs label[for="tab3"] {
    background: var(--mainbg);
    font-weight: bold;
   }

   .carousel-images img {
     display: none;
     width: 100%;
     height: auto;
   }

  #tab1:checked ~ .carousel-images .img1,
  #tab2:checked ~ .carousel-images .img2,
  #tab3:checked ~ .carousel-images .img3 {
      display: block;
  }
        
        
/*html {*/
/*    scrollbar-gutter: stable;*/
/*}*/

/*html {*/
/*    overflow-y: scroll;*/
/*}*/

/*.glightbox {*/
/*  cursor: zoom-in;*/
/*}*/

/*@media (max-width: 768px) {*/
/*  .glightbox {*/
/*    cursor: pointer;*/
/*  }*/

/*.video-frame {*/
/*    float: left;*/
/*    width: 300px;*/
/*    margin: 10px 20px 20px 0;*/
/*    padding: 12px;*/
/*    background-color: #121212;*/
/*    border: 1px solid #333;*/
/*    border-radius: 10px;*/
/*    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);*/
/*}*/

/*.video-frame video, */
/*.video-frame iframe {*/
/*    width: 100%;*/
/*    height: 200px;*/
/*    display: block;*/
/*    border-radius: 6px;*/
/*    background: #000;*/
/*}*/

/*.video-frame figcaption {*/
/*    margin-top: 10px;*/
/*    font-size: 0.85rem;*/
/*    line-height: 1.4;*/
/*    color: #bbbbbb;*/
/*    text-align: center;*/
/*}*/

figure.video-frame {
    padding: 5px;
    margin: 0 0 5px 0;
    max-width: 253px;
    background-color: #1a1a1a;
    border: 2px solid var(--boxborder);
}

figure.video-frame video, 
figure.video-frame iframe {
    width: 100%;
    max-width: 250px;
    height: auto;
    aspect-ratio: 3 / 2;
    display: block;
    border: 2px solid var(--boxborder);
    background-color: #000;
}

figure.video-frame.left {
    float: left;
    clear: left;
    margin-right: 10px;
}

figure.video-frame.right {
    float: right;
    clear: right;
    margin-left: 10px;
}

figure.video-frame figcaption {
    font-size: 0.85rem;
    color: #cccccc;
    padding-top: 5px;
    text-align: center;
}

/*}*/

table.msgbox {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    margin: 1em auto;
    width: auto;
    max-width: 95%;
    border-width: 3px;
    border-style: solid;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.msgbox td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    vertical-align: middle !important;
}

.msgbox ul {
    list-style-position: outside !important; 
    margin: 4px 0 4px 18px !important;
    padding: 0 !important;
    text-align: left !important;
}

.msgbox li {
    margin: 0 !important;
    padding: 0 !important;
    display: list-item !important;
}

.msgbox td.msgboximg {
    padding-right: 0 !important;
    width: 40px;
}