/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
 
background-color: white ;
background-image: linear-gradient(#f2f2f2  2px, transparent 2px),
linear-gradient(90deg, #f2f2f2 2px, transparent 2px),
linear-gradient(#f2f2f2  1px, transparent 1px),
linear-gradient(90deg, #f2f2f2  1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
 

 /* background:  url('/images/PegBG2crop.png') repeat; url('/images/foodspin.gif') 10% 22% no-repeat, url('/images/monet1.jpg') 5% 13% no-repeat,url('/images/phonecharm1.png') top right no-repeat, */
/*	background-size: 80%; /* 14%, 200px , 20%,*/
  font-size: 14px;
  font-family: "IBM Plex Mono", monospace;
  margin: 0;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
  page-break-before: avoid;
  
}

hr {
  border: solid #F2F2F2;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 1em;
  font-style: italic;
}

.date {
  margin-top: 0;
  font-size: 1em;
  font-style: italic;
  color: #A6A6A6 ;
  border: solid #F2F2F2;
  border-width: 0 0px 2px 0;
}

#linkboxtext {
  margin-top: 20;
  font-size: 0.9em;
  font-style: italic;
  border-color: #F2F2F2;
  border-style: solid;
  border-width: 2px;
  border-radius: 6px;
  padding: 4px ;
  background:  #ffffff;
  color: #A6A6A6 ;
  border: solid #F2F2F2;
}

#buttonstyle {
   font-size: 0.9em;
  font-style: italic;
  color: #A6A6A6 ;
background-color: #f2f2f2 ;
opacity: 1;
background-size: 9px 9px;
background-image: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 0.9px, #F2F2F2 0, #F2F2F2 50%);
  border: none;

text-decoration: underline overline white;
  padding: 5px 22px;
  text-align: center;
  display: inline-block;
  border-radius: 16px;
  margin: 4px 2px;
}


.smallicon {
  float: right;
  object-position: top;
  opacity: 0.3;
  transform: translateY(-10px)
}

.stamp {
  --r: 17px; /* control the radius */
  height: 57%;
  padding: var(--r);
  background: #f2f2f2;
  mask: 
    radial-gradient(50% 50%,#0000 66%,#000 67%) round 
     var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)), 
    conic-gradient(#000 0 0) content-box;
}


#highlighSubheading {
  background: #F2F2F2;
  color: #A6A6A6;
  font-weight: bold;
  margin-bottom: 4px ;
  padding: 3px ;
  border-radius: 0px 20px 20px 0px;
  font-style: italic;
   width:195px;
  overflow:hidden;
  transform: translateX(-11px)

}

#Linkbox {
  padding: 10px;
  border-radius: 6px;
  margin: 15px;
  mask: 
    linear-gradient(0,#0000 26px,#000 0) 0 13px,
    radial-gradient(13px,#000 calc(100% - 1px),#0000) 50%/24.05px 26px repeat space ;
background-color: #f6f6f6;
opacity: 1;
background-size: 9px 9px;
background-image: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 0.9px, #F2F2F2 0, #F2F2F2 50%);
  page-break-before: always;
  vertical-align: super;
  
}


  

a:hover { 
  
  color: #42B8EB;
}

h1, h2, h3, h4, h5 {
  font-family: "Archivo Black", sans-serif;
  color: #A6A6A6 ;
}




/*Icon design for project list*/

#projecttable {
  margin: 10px 0px 0px 0px ;
}

#reficon {
  border: 2px solid  #F2F2F2;
	border-radius: 14px 0px 14px 14px;
  height: 120px;
  width: 120px;
}
#iconname {
  text-align: left;
  height: 12px;
  font-style: italic;
  color: #A6A6A6 ;
  border: solid #F2F2F2;
  border-width: 0 0px 2px 0;
  padding: 0px 0px 0px 8px ;
}
#iconinfo {
vertical-align: top;
padding: 4px 0px 0px 8px ;
}
#iconlink {
vertical-align: bottom;
text-align: right;
text-decoration-style: dashed;
color: #A6A6A6 ;
font-style: italic;
  font-size: 12px;

}
#iconlink:hover
{
vertical-align: bottom;
text-align: right;
text-decoration-style: dashed;
color: #42B8EB;
font-style: italic;
  font-size: 12px;

}



/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 800px;
	background-color: #FFFFFF;
  color: #151515; 
  outline-color: #F2F2F2;
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 0;
    box-shadow: 4px 5px 7px 0px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  
  
}

#content {
  padding: 10px 5% 20px 5%;
  display: grid;
  vertical-align: top;
  grid-template-columns: 550px 200px;
  grid-template-rows: fit-content(300px) fit-content(300px) 1fr;
  
}

#mainbody {
  padding: 10px;
  border-color: #F2F2F2;
  border-style: solid;
  border-width: 2px;
  border-radius: 6px;
  margin: 15px;
  grid-row: 1 / span 2

}

/*HEADER STYLE*/
#header {
  background-image: url("/website_banner_test3.png") ;
  background-repeat: no-repeat;
  background-position: right;
  background-color: #f2f2f2;
  background-size: 100%;
  padding: 2%;
  border-radius: 25px 25px 0px 0px;  
  mask:
    linear-gradient(0,#0000 30px,#000 0),
    radial-gradient(30px,#000 calc(100% - 1px),#0000) bottom/55.5px 60px

}



#header ul {
  list-style-type: none;
  padding: 0px 0px 0px 0px;
  margin: 0;
  
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin: 160px 10px 10px 10px;
  padding: 0px 15px 0px 0px ;
  border-right: 3px solid;
  border-color: #a9a9a9;
  border-collapse: separate;
  border-spacing: 50px ;
  
}
#header li a {
  color: #a9a9a9;
  text-decoration: none;
  background-color: inherit;
  vertical-align: baseline ;
}
#header li a:hover {
  color: black ;
  font-style: italic;
  font-weight: bold;
  
  
}
/* --- CSS CHARACTER TEMPLATE "TRIGHTS" by GOODMODE --- */
/* Feel free to change colours, borders, fonts, etc. as you see fit. */
/* Please don't remove the credit link. This code is free to use, edit, and mangle - the credit is there to let others find it too! */
/* P.S. Trans rights! */

.charcard {
	background-color: #fff;
	padding: 10px;
  border-color: #F2F2F2;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  margin: 15px;
}


.charcard td#refpic {
	background-repeat:no-repeat;
	width: 250px; 
	border: 2px solid  #F2F2F2;
	border-radius: 10px;
	background-size: 250px;
	
}

.charcard td#stats {
	text-align: center;
	vertical-align: top;
}

.charcard h2#chname {
	
	font-size: 2.5em;
	color: black;
	margin: 2px 0px 0px 0px;
}

.charcard p#chinfo {
	color:#A6A6A6;
	font-size: 1em;
	font-style: italic;
	margin: -15px 0px 0px 0px;
 
}

.chbio {
	max-height: 120px;
	overflow: auto;
  padding-top: 0px;
  

	
}
.chbiotop {
	max-height: 260px;
	overflow: auto;
  color:grey;	
  font-weight: bold;
  margin: -27px 0px 0px 0px;
  padding-bottom: 10px;
}
.chbio p {
	padding: 0px 25px 5px 25px;

 
}

.charaHeader {
 padding-top: 10px;
  margin-bottom: 5px;
  background-color: #F2F2F2;
  border-radius: 6px;
    mask: 
    linear-gradient(0,#0000 21px,#000 0),
    radial-gradient(21px,#000 calc(100% - 1px),#0000) bottom/38.85px 42px

}


.charcredit {
	
	font-size: 0.7em;
	line-height: 0px;
	color: #fff;
	text-align: right;
	
}


/* --- END OF CHARACTER CARD CODE --- */

/*POST LIST STYLE*/
#postlistdiv ul {
  padding: 5px;
  margin: 25px;
   border-color: #F2F2F2;
  border-style: solid;
  border-width: 0px 0px 0px 3px;
  list-style-type: none;
   font-style: italic;
  page-break-before: always;
}
#recentpostlistdiv ul {
   border-color: #F2F2F2;
  border-style: solid;
  border-width: 0px 0px 0px 3px;
  padding: 2px 2px 2px 14px;
  line-height: 120%;
  margin: 0px 0px 0px 0px ;
  text-indent: -10px ;
  list-style-type: none;
   font-style: italic;
  page-break-before: always;
 
  
}
.moreposts {
  font-size: 16px;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: left ;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  background-color: #F0F0F0;
  padding: 0 5% 10px 5%;
  border-radius: 0px 0px 25px 25px;
}