/* ===================================== */
/* This files contains
/* * FONTS
/* * STRUCTURE 	(including media-queries)*/
/* ===================================== */

/* ========================================================================== */
/* Font imports */
/* ================================ */
/*Headers*/
@font-face {
  font-family: "HEADERTEXT";
  src: url("../fonts/HussarPrint.otf");
}
/*bodytext (paragraph, li)*/
@font-face {
  font-family: "BODYTEXT";
  src: url(../fonts/Comfortaa/Comfortaa-Regular.ttf);
}
/*handwriting*/
@font-face {
  font-family: "FANCY";
  src: url(../fonts/PapernotesRegular.woff);
}

/* logo */
@font-face {  
    font-family:"LOGOTEXT";
    src: url("../fonts/Nouveau_IBM/Nouveau_IBM.ttf");	
    /*font-family: "PixelOperatorHB8";
 src: url(../fonts/PixelOperatorHB8.ttf);*/
}
/* sublogo */
@font-face {
  font-family: "SUBLOGOTEXT";
  src: url(../fonts/StoryLens.otf);
 } 
 
/* ========================================================================== */
/* Variables*/
/* ================================ */
:root {
  --font-family-logo: "LOGOTEXT",monospace;
  --font-family-sublogo: "SUBLOGOTEXT", cursive;
  --font-family-header: "HEADERTEXT", monospace;
  --font-family: "BODYTEXT", "Tw Cen MT", "Verdana", sans-serif;  
  --font-family-fancy: "FANCY", cursive;  

  /*backgrounds*/
  --main-bg-color: #00001a /*#00001a*/; 
  --content-bg-color: #f4f1f1;   
  --box-bg-color: #bfff0010; /*at 10% opacity*/

  /* text */
  --default-header-color: #00003D;
  --default-text-color: #00001a;
  /*things-in-text*/  
  --highlight: #395600; /*a darker version of #6DA300*/
  --highlight-alt: #008fcc; /*sides of content div*/
  --label: #00bfff70; /*70% opacity*/
  --label-text: #00001a;
  --text-hyperlink: #c7008e;
  --text-hyperlink-hover: #fff;   
  --text-hyperlink-bg: transparent;

} 

/* ================================ */
/* Cursor customizations */
/* ================================ */
#logoText, #subLogo, header a.active, body, html {cursor: url(../mouse/normal.gif), auto;}
a, button {cursor: url("../mouse/link.gif"), pointer;}
nav a {cursor: url("../mouse/help.gif"), pointer;}
/*h1,h2,h3,h3,h5,h6,p,strong,em,span,ul {cursor: url("../mouse/text.gif"), text;}*/
.define:hover, .tooltip:hover .tooltiptext {cursor: url("../mouse/help.gif"), help}

/* ========================================================================== */
/* Basic page style & resets */
/* ================================ */
/** {box-sizing: border-box;}
[hidden] {display: none !important;}*/
body, html {margin: 0; padding: 0;}

a, a img {text-decoration: none;}
img { max-width: 100%; height: auto;}

/*default sizes*/
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: 1.67em;}
h6 {font-size: .67em;}

p {font-size: 1em;}

/* ========================================================================== */
/* BODY customizations */
/* ================================ */
body {
  font-family: var(--font-family);
  
  /* background */
	background-image: url('background.svg');
	  background-color: var(--main-bg-color);
  background-size: cover;
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: center top;    
  

  color: var(--default-text-color);  
}

/* ========================================================================== */
/* CONTAINER customizations */
/* ================================ */
#container {
	width: 80%;
    max-width: 1050px; 
    margin: 0 auto;     
    min-height: 100%;    

  }  

/* ========================================================================== */
/* HEADER area, including nav and logo */
/* ================================ */

header {
    width: 20%;
    max-width: 280px; 
    float: left; 
    position: fixed;  
    min-height: 100%;    
    margin: 0;  
    text-align: center;
}

header nav ul li {  
  list-style-type: none;
  display: inline-block;
  padding: 15px 2px;  
	margin: 0 auto; 
  }

header a, header a:visited {
  font-weight: bold;    
  padding: 10px;
  color: white;  
    background-color: var(--text-hyperlink);  
  }
header a:hover {
  text-decoration: underline;
  color: var(--text-hyperlink);
  background-color: white;  
  }


nav ul {padding: 0;}

#logoText {font-family: var(--font-family-logo);}

#subLogo {
    font-family: var(--font-family-fancy);
    font-size: 1.5em;
    text-align: center;
    color: yellow /*var(--highlight-alt)*/;    
}

/* ========================================================================== */
/* containerContent
 (formerly article)  */
/* ================================ */

#containerContent {
    width: 70%; 
	max-width: 725px;
	float: right; 
	padding: 1em;
    background-color: #f4f1f1;
    backdrop-filter: blur(4px);
    border: 3pt solid var(--highlight-alt);

}

/* ========================================================================== */
/* text and text styles */
/* ================================ */
h1, h2, h3, h4, h5, h6 {  font-family: var(--font-family-header);color: var(--default-header-color);}
h2 {margin-top: 2em;}
#pageHeader:before {content: ">>"; color:  var(--highlight);}
p, ul, li {font-family: var(--font-family);}
p {line-height: 130%;}
p a, ul.bodyLinks li a {  
    padding: 2px;
  /*border-bottom: 2pt dotted var(--text-hyperlink);*/
  text-decoration: underline;
  background-color: var(--text-hyperlink-bg);
  color: var(--text-hyperlink);
  font-weight: bold;
}

p a:hover, ul.bodyLinks li a:hover {
  background-color: var(--text-hyperlink);
  text-decoration: underline;
  color: var(--text-hyperlink-hover);
  } 
  
.attn {
  font-size: larger;
  font-family: var(--font-family-fancy);
  margin: .3em;
  color: var(--highlight); 
  }
  
  .NSFW {
	padding: 8pt 4pt 4pt; 
	margin: 1pt; 
	font-size: small;
	font-weight: bold !important; 
	color: white; 
	background-color: darkred;    
}  

.inlineLabel {
  font-weight: bold;
  margin: 4px;
  padding: 2px;
  background-color: var(--label);
  color: var(--label-text);  
  }
  
ul li {margin-bottom: .5em;  list-style-type: none;  }
ul.bodyLinks li {list-style-type: katakana;}

blockquote {font-family:  var(--font-family); font-size: large; font-style: italic;}
cite {font-family:  var(--font-family); font-style: italic; display: block; text-align: right;}
cite::before {content: '--';}

strike, .redacted, del {background-color: black; color: black;}  
strike:hover, .redacted:hover, del {
    background-color: var(--box-bg-color); 
    color: var(--label-text); 
    text-decoration:none;
}  
ins {text-decoration: inherit;}
ins::hover {text-decoration: inherit;}

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

/* ========================================================================== */
/* structure and misc elements */
/* in CONTAINER */
/* ================================ */

/* ----------------- */
/*(BODY COLUMNS)*/
/* ----------------- */
.divCols {display: flex; justify-content: center;}
.divCols > div {
	margin: 1em;
	padding: 1em;
	width: 45%;
	overflow: visible;
}
.divCols > div.decor {
    width: 40%;
    overflow: visible;
    background-color: var(--box-bg-color);
    border-radius: 1em;
    border: 1pt dotted var(--default-header-color);        
}

/* ----------------- */
/* fanlisting COLUMNS*/
/* ----------------- */
.fanImgCol {width: 75%; margin: 0 auto; text-align: center;}
.fanImgCol img {margin: 0 !important;}

/* ----------------- */
/*semantics*/
/* ----------------- */
section {}
aside {}
.aside100w {width: 100%;text-align: center;}

/* ----------------- */
/*social icons*/
/* ----------------- */
.SIContainer {
    width: 80%;
    overflow: visible;
    text-align: center;
    margin: 0 auto;
    
    background-color: var(--box-bg-color);
    border-radius: 1em;
    border: 1pt dotted var(--default-header-color);
}
.iconList li {	
	padding: .5em; 
	display: inline;  
	list-style-type: none; 
}
.iconSVG {
	margin:4px; 
	padding: 4px; 
	width:40px; 
	height: 40px;

	border: 2px solid #c7008b /*var(--text-hyperlink)*/; 
	border-radius: .4em .6em;
	background-color: #6aedff30;
	fill: #c7008b /*#008bcc*/;
	stroke-width: 0;
	strike-linecap: round;
	stroke-linejoin: round;
}

.iconSVG:hover {
	background-color: var(--text-hyperlink); 
	border: 2px solid var(--text-hyperlink); 
	fill: white;
}

/* ----------------- */
/*Update Roll*/
/* ----------------- */
#updateRoll {
	width: 80%; 
	margin: 0 auto;
	height: 100px; 
	padding: 1em .5em .5em 2em;
	text-indent: -.5em;  
	overflow-y: scroll;
	font-size: smaller;

	border: 2pt dashed var(--label); 
	background-color: #FFFFFF90;    
}

/* ----------------- */
/*Webrings and Things*/
/* ----------------- */
.webringLinks {
	display: inline-block; 	
	text-align: center; 
	width: 100%;
}
.webringLinks img {vertical-align: middle;}

/* ----------------- */
/*misc elements*/
/* ----------------- */
hr {  visibility: hidden;  }

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  text-align: center;
}

/* ========================================================================== */
/* IMAGES AND THINGS  */
/* ================================ */

/*images and things*/
figure img {display: block;	margin: .2em auto;}
figcaption, aside p {display: block; font-family: var(--bodytext); font-size: smaller; font-style: italic;	text-align: center;}

img.fanImg { 
  height: 50px;  
  width: 50px; 
  padding: 4px;
  } 

.profilePic {clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);}  
img.fanImg {  filter: saturate(.7);    } 
.fanImg:hover {filter: saturate(1); padding: 0; } 
.projectImage {border: 1pt solid var(--default-text-color); }

/* ========================================================================== */
/* TOOLTIPS  */
/* ================================ */
.tooltip {
  position: relative;
  display: inline-block;
  padding: .2em;
border-bottom: 2pt dashed var(--highlight);
}

.tooltip img {border-radius: .8em; border: 1pt solid silver;}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  font-family: var(--font-family);
  font-size: smaller;
  text-align: center; /*left*/
  padding: .8em;
  position: absolute;
  z-index: 1;
  bottom: 100%; /*125%*/
  left: 30%; /*50%*/
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;

  background-color: var(--highlight); 
  color: var(--content-bg-color); 
  border-radius: .5em;
}

.tooltip .tooltiptext img {border-radius: 2em;}

.tooltiptext a {color: inherit; text-decoration: underline;}

.attn .tooltip {margin: .2em}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip:hover {
  border-bottom: 2pt solid var(--highlight);
  border-radius: 0 0 .5em .5em;
  background-color: var(--highlight); 
  color: var(--content-bg-color); 
  
}


/*media query*/
.tooltip .tooltiptext, .define .definetext {width: 200px ;}   


/* ========================================================================== */
/* FOOTER  */
/* ================================ */
footer {
	margin-top: 4em;
	border-top: 1pt dashed gray;
	text-align: right;
    font-size: small;
    }



/* ========================================================================== */
/* Media Queries*/
/* ================================ */
@media screen and (max-width: 600px) {
    
    body {margin: 0; padding: 0;}
    .wrapper {flex-direction: column;}
    #container, .divCols > div {width: 100%; flex-direction: column;}
    #container {margin: 0;width: 100% ; padding: 0;}
    .divCols > div.decor {
    	width: 100% ;
    	overflow: visible;
    	margin: .2em auto ; 
    }      
    header {position: unset; min-width: 90%; float: unset; margin: 0 auto;}
	#containerContent {float: unset; width: 90%; margin: 0 auto; padding: 4%; background-color: white;border: 1pt solid var(--highlight-alt); border-radius: 1em;}
	 figure img {width: 100%; height: auto;}
	audio {width: 100%;}      
    #updateRoll {width: 80%; max-width: 550px;}
    
    .tooltip .tooltiptext, .define .definetext {width: 200px ;} 
    
        
}