/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}


/*@font-face {
	font-family: 'CardoRegular';
	src: url('cardo/Cardo-Regular.ttf') format('truetype');
}


@font-face {
	font-family: 'CardoBold';
	src: url('cardo/Cardo-Bold.ttf') format('truetype');
}*/






/* "Mobile first" CSS: we'll design for phone sizes first, then add media queries for tablets and desktop computers later */

body {
	color:white;
	background: #7b3b38 url('../img/cosmic-tissue_sm.png') fixed no-repeat center;
	background-size:cover;
	font-family: 'Epilogue', Consolas, Monaco, sans-serif;
}


#container {
	padding-top:40px;
	/*margin-right:1px;*/
}


header {
	background:black;
	height:500px;
	position:relative;
	/*temp*/
	border-top:15px solid black;
	border-bottom:15px solid black;
	margin-bottom:80px;
}


header h1 {
	text-indent:-9999px;
	font-size:9px;
	line-height:9px;
}

header figure {
	width:80%;
	margin:auto;
}

header  h2 {
	font-family: Righteous, Verdana, sans-serif;
	font-size:9vw;
	margin-bottom:0px;	
	line-height:1em;
	margin-top:-15px;
	text-align:center;
}


#staff {
	width:320px;
	font-size:0.75em;
	line-height:1.25em;
}


h3, p, main h2 {
	padding:0px 1em;
}


.thin-border {
	border-bottom: 1px solid #964a5c; 
	padding: 10px;
	position: relative;
	background:rgba(0,0,0,0.85);
}

.noise {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:3px;
	background: url(../img/noise.gif);
	/*background: url(../img/noise.gif) fixed no-repeat;
	background-size:cover;*/
}

.thicken {
		border-top: 4px solid #666;
		border-radius:3px 3px 0 0;
	}

figure {
	margin:0px;
	margin-bottom:1em;
}

figure img {
width:100%;
}

figcaption {
	font-size:0.8em;
}

a {
	color:magenta;
	font-weight:bold;
}

a:hover {
	color:lime;
}

aside {
	opacity:0.7;
	border: 1px solid magenta;
	margin:1em;
}

.desktop {
	display:none;
}

.dl {
	text-decoration:none;
	color:rgb(252,113,252);
}

video {
	width:100%;
}


#archives {
	width:330px;
	margin:auto;
}

#archives section {
	margin-bottom:1em;
}

#archives a {
	text-decoration:none;
}

#archives img {
	width:150px;
}


#bruce-neal-lyrics {
font-size:0.9em;
line-height:1.5em;
color:#33f0d8;
}


#alan-poem {
	text-align:center; 
	font-size:0.9em;
	line-height:1.75em;
	color:#33f0d8;
}

#paul {
	background:#42190d url('../img/grain.png') no-repeat center;
	background-size:cover;
}



/* Class for making YouTube/Vimeo videos responsive */

figure.responsive {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 */
    height: 0px;
    overflow: hidden;
    max-width: 100%;
}

figure.responsive iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.themes {
	background:rgb(17,41,46);	
}

.sketch {
	max-width:600px;
}

.schedule {
	background:rgb(93,0,0);
}




.haiku blockquote {
margin-bottom:3em;
padding-left:15%;
color:#33f0d8;
}

.poet {
	display:block;
	font-size:0.85em;
	padding-top:6px;
}




.flexgrid ul {
list-style:none;
padding-left:0px;
/*display: flex;
flex-direction:row;
  flex-wrap: wrap;
  gap:6px;*/
}


.flexgrid li {
	margin-bottom:6px;
/*	height: 30vh;
  flex-grow: 1;*/
}

/*.flexgrid img {
max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}*/





/* A better looking default horizontal rule */
hr {
    display: block;
    height: 1px;
    border: 0px;
    border-top: 1px solid #ccc;
    margin: 1em 0px;
    padding: 0px;
}


#bruce {
	position:relative; 
	background:#061412 url('../img/grain2.png') no-repeat center;
	background-size:cover;
}

#bruce-img {
	border:1px solid #ccc;
}


/* ========================================
MEDIA QUERIES!
======================================== */


@media all and (min-width: 450px) {
	
header  h2 {
	/*	top:18%; */
	}
	
} /* closes 450px+ */	



@media all and (min-width: 500px) {
	
header {
	height:550px;
}

} /* closes 500px+ */



@media all and (min-width: 575px) {
	
header {
	height:600px;
}
	
} /* closes 575px+ */		



@media all and (min-width: 680px) {


header {
	height:685px;
}


.haiku blockquote {
	width:48%;
	margin-left:0px;
	margin-right:0px;
}

.haiku blockquote:nth-child(odd) {
	float:left;
}

.haiku blockquote:nth-child(even) {
	float:right;
}


.flexgrid ul {
display: flex;
flex-direction:row;
  flex-wrap: wrap;
  gap:6px;
}

.flexgrid li {
	margin-bottom:0px;
height: 20vh;
  flex-grow: 1;
}

.flexgrid img {
max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}


#bruce-neal-lyrics {
font-size:1em;
line-height:1.4em;
padding-left:8%;
}

	
	} /* closes 680px+ */	
	
	


@media all and (min-width: 768px) {
	
body {
	background: #7b3b38 url('../img/cosmic-tissue.png') fixed no-repeat center;
	background-size:cover;
}

	#container {
			padding-top:10px;
		/*background:black;*/
		width:700px;
		margin-left:auto;
		margin-right:auto;
	}
	
	
	
/* darkening header region */
header {
	background-color:black;
}

#staff {
	padding-left:40px;
}

	
	#archives {
	width:420px;
}

#archives img {
	width:200px;
}

/*for Bruce's spider lyrics*/
#moveable {
	position:absolute;
	top:280px;
	left:390px;
}
	
	
} /* closes 768px+ */



@media all and (min-width: 820px) {
	
header  h2 {
	font-size:7vw;

}
	
	
} /* closes 820px+ */


@media all and (min-width: 975px) {



header {
	margin-bottom:20px;
	height:800px;
}

	
header  h2 {

}

#staff {
	left:8%;
}


	#container {
		width:850px;
	}
	
.mobile {
	display:none;
}

.desktop {
	display:block;
}
	
	@keyframes throb {
	0% {box-shadow: 0px 0px 2px 2px rgb(79,36,79);}
	70% {box-shadow: 0px 0px 2px 2px rgb(185,54,185);}
	100% {box-shadow: 0px 0px 2px 2px rgb(255,0,255);}
}


audio {
	box-shadow: 0px 0px 2px 2px black;
	animation-name:throb;
	animation-duration:3s;
	animation-direction:alternate;
	animation-iteration-count: infinite;
}
	
	.flexgrid.niikumi li {
	height: 30vh;
}


/*for Bruce's spider lyrics*/
#moveable {
	top:330px;
	left:450px;
}

	
} /* closes 975px+ */




@media all and (min-width: 1100px) {



#container {
	padding-left:12px;
	padding-right:12px;
}

header  h1 {

}

figure {
/*	width:85%;*/
	margin:auto;
}



.flexgrid li {
	height: 15vh;
}





} /* closes 1100px+ */





@media all and (min-width: 1400px) {


header  h2 {
font-size:70px;
}
	
	} /* closes 1400px+ */
	
	
	
	

@media all and (min-width: 1600px) {
	

figure {
	/*width:80%;*/
}
	
} /* closes 1600px+ */