/* **************************************** */
/* Colors
	 blue* = rgb(69,159,242)
	 pink* = rgb(252,61,147)
	 purple* = rgb(56,42,174)
	 lt blue = rgb(152, 230, 230)
	 lt pink = rgb(255, 204, 255)
	 green = rgb(153, 230, 153)
	 mint = rgb(128, 255, 229)
	 yellow-green = rgb(206,240,135)
	 orange = rgb(237,123,69)		*/
/* **************************************** */


body {
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%; 
    margin: 0;
    height: 100%
    width: 100%;
}
#container {	/* has header and content sections within it */
	top: 0;
	left: 0;
	padding: 0px;
	margin: 0px;
}


/* **************************************** */
/*  HEADING */
/* **************************************** */

#heading {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100px;
	padding-top: 10px;
	padding-left: 15%;
	margin-left: 0px;
	margin-bottom: 20px;
	z-index: 100;
	/* background-image: url("../img/bg.jpg"); */
    border-bottom: 1px dashed rgba(237,123,69,0.25); 
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-color: rgba(255,255,255,0.5);
    
}

.banner_p {
	color: rgb(69,159,242);
}
.banner_k {
	color: rgb(252,61,147);
}
.banner_w {
	color: rgb(56,42,174);
}

#heading ul, #heading li, #heading a, #heading a:visited {
	position: relative;
	width: 100%;
	margin-right: 6px;
	margin-left: 1px;
	padding: 0px;
	display: inline;
	list-style: none;
	text-decoration: none;
	color: #666;
	font-size: 14pt;
	font-weight: bold;
	line-height: 10pt;
}
#heading a:hover {
	color: rgb(252,61,147);
	text-shadow: 0px 1px 1px #888;
}

#heading, h1, h2, h3 {
	font-family: 'Lobster', cursive;
	font-weight: 100;
	line-height: 0pt;
	opacity: 1.0;
}

h1 {
	font-size: 42pt;
 	text-shadow: 0 5px 8.896px #888,0 -2px 1px #fff;
}

h2 {
	padding-top: 5px;
	color: rgb(252,61,147);
 	text-shadow: 0 3px 4.4px #888,0 -1px .5px #fff;
 }



/* **************************************** */
/*  CONTENT, aka not the heading nor footer */
/* **************************************** */

#content {
	position: relative;
	margin: 130px auto auto 0px;
	padding: 0% 20% 75px 15%;
	z-index: 2;
}

#content a, #content a:visited {
	color: rgb(56,42,174);
}
#content a:hover {
	color: rgb(252,61,147);
	text-shadow: -1px -1px #ccc;

}
	
#content p, #content li {
	font-family: "Georgia", serif;
	font-weight: 200;
	font-size: 12pt;
	line-height: 16pt;
}

#content div {
    display: none;
}

#content div:target {
    display: block;
}
	
#content .section .toTop {	/* I want zero chance of this showing with CSS enabled */
	display: none;
	visibility: none;
}

#content .project_featured_photo {	/* syntax from ravelry rss */
	width: 150px;
	height: 150px;
	margin-right: 10px;
	margin-bottom: 10px;
	object-fit: cover;
	border: 1px solid #666666;
}

#content .portrait {
	-webkit-clip-path: polygon(65% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
	clip-path: polygon(65% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
	shape-outside: polygon(65% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
	float: right;
}

#content figure {
	font-family: "Georgia", serif;
	font-size: 10pt;
	float: left;
	position: relative;
	margin-bottom: 10pt;
}

/* **************************************** */
/*  Footer */
/* **************************************** */

#footer {
	position: fixed;
	width: 100%;
	bottom: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-bottom: 0px;
	padding-left: 15%;
	font-size: 8pt;
	font-family: 'Lobster', cursive;
	color: black;
    background-color: rgba(255,255,255,0.5);
	z-index: 102;
}
#footer img {
	width: 10px;
	height: 10px;
}