/* spoder porf with full web */
	html {
  background-color: #fff;
  

}
body {
  font-family: "Source Serif Pro", "Georgia", serif;
}


#projects {width:90%; margin: 0 auto;}
.prleft {float:left; width:48%; margin-top:10px; background-color:#e6e6e6; padding:15px;}
.pright {float:right; width:48%; margin-top:10px; background-color:#e6e6e6; padding:15px;}

#posts {width:90%; margin:0 auto; }
.catblock {width:30%; float:left; padding:15px;}
.cattitle {font-size:14px; font-weight:300px;}
.catdate {font-size:14px; font-weight:400px;}
.pageblock {padding:20px; text-align:center; margin:0 auto;}
.date {text-align:right; background-color:#e6e6e6; }
.postcontent {width:96%; padding:15px;}
#posts p {font-family:'Source Serif Pro','Georgia',serif; font-size:17px; font-weight:400; line-height:25px; margin: 0 0 10px;}

#timeline {width:100%;  padding-left:20px;}
.postlist {color:#000; width:98%; padding:10px; font-size: 13px; font-style:italic; line-height: 15px; margin: 0 0 5px;}
.nick {border-radius:50%; width:125px;  margin-bottom:10px;}

#recently {width:100%; padding-left:10px;}
#recently p {font-family:'Source Serif Pro','Georgia',serif; font-size:17px; font-weight:400; line-height:25px; margin: 0 0 10px;}

#sticky {
  top: 0;
  padding:5px;
}


/* https://blog.logrocket.com/five-cool-css-header-styles-with-cross-browser-compatibility/ */

h1 {
  font-size: 30px;
  font-weight: 600;
  background-image: linear-gradient(to left, #553c9a, #b393d3);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
h2 { color: #000; text-transform:uppercase; font-family: 'Raleway',sans-serif; font-size: 16px; font-weight: 600; line-height: 19px; margin: 0 0 10px; text-align: left; }

p { color: #000; font-size: 13px; font-weight: 300; line-height: 15px; margin: 0 0 10px; }
a { color: #B765B5; text-decoration: underline; }
a:hover { color: #1c1c1c; text-decoration: underline; }


/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_responsive */

.row {width:90%; margin:0 auto;}

* {
  box-sizing: border-box;
}

.footer {width:90%; margin:0 auto; border-top:1px dashed #000;}

/* Create two columns that float next to each other */
.ltcolumn {
  float: left;
  width: 25%;
  padding: 10px;
  padding-left:40px;
}

.rtcolumn {
  float: left;
  width: 70%;
  padding-left: 10px;
  padding-top:75px;
}

.fltcolumn {
  float: left;
  width: 70%;
  padding: 10px;
}

.frtcolumn {
  float: left;
  width: 30%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Music journal styles, specifically */
/* Drop shadow: https://www.w3schools.com/cssref/css3_pr_box-shadow.php */

.albuminfo {
	float:right;
	width: 50%;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:10px;
	border:3px solid #000;
	padding:10px;
	box-shadow: 5px 10px #888888;
}

.albuminfo img { max-height:200px; }

.albumcontent {
	float:left;
	text-align:left;
	padding-right:20px;
	max-width:48%;
	min-width:48%;
}

figure { text-align:center;}
figcaption {font-style:italic;}

.journalpic {
	padding:3px;
	width:90%;
	border:3px solid #000;
}

                          


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
/* https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/ */

/* spoder porf in corner */
@media screen and (max-width: 900px) {
		html {


}
  .ltcolumn {
	height:200px;
	width:100%;
	overflow-y: scroll;
	margin-top:0px;
  }
  .rtcolumn {
	width:100%;
  }
  
  .albuminfo img { max-height:100px; }
  
  .albumcontent {
	float:left;
	text-align:left;
	padding-right:5px;
	max-width:90%;
}

.journalpic {
	padding:2px;
	width:110%;
	border:2px solid #000;
}

}