* {
	box-sizing: border-box;
	}
	
body { 
	margin: 0; 
	padding: 0;
	background: #f4f4f4;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
	color: #000;
line-height: 1.4;	

}
.btn {
background-color: #eee; 
color: #333;
padding: 2px;
margin-left: 10px;  
border: 1px solid;
border-radius: 5px;
/* cursor: pointer;  */
}

.dark-mode {
filter: invert(100%)
}

a {
	text-decoration: none;
}
.content { 
background: #f4f4f4;
	color: #000; 
	margin: 0 auto; 
	padding: 0 50px;
width: 100vw;	

}
.container-joe {
	margin: 0 auto;
	width: 960px;
}

	.wrapper {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1rem;
		grid-template-areas:
		'header'
		'subheader'
		'article'
		'footer';
	}

	
		header {
		grid-area: header;
	}
	
		subheader {
		grid-area: subheader;
	}
	
		article {
		grid-area: article;
	}
	
		footer {
		grid-area: footer;
	}
	
/* header {  */
	/* margin: 0;  */
	/* background: #526 url(../images/header.jpg) no-repeat center top;   */
	/* height: 100px;  */
	/* margin: auto; */

/* } */

header {
	background: linear-gradient(to right,    #1F1C2C  , #fff, #928DAB  );
border-top: 2.5px solid white;
border-left: 2.5px solid white;
border-right: 2.5px solid white;
	height: 50px; 
    display:flex;
    align-items: center;
    justify-content: center;
}
header h1 {
margin: 0;
/* padding-top: 10px; */
	font-family: 'Roboto', sans-serif;
	font-size: 2rem;
	font-weight: bold;
	word-spacing: 5px;
}	
.push {
	font-style: italic;
		color: brown;
}
.fort {
	font-size: 2rem;
	color: #555;
}
.porter {
	color: black;
}

.subheader { 
margin: 0 auto;
	height: 65px;
	/* border-top: 5px solid #333; */
  background: linear-gradient(#333, #fff, #aaa);
border-left: 2.5px solid white;
border-right: 2.5px solid white;
border-bottom: 3px solid #333;
font-size: 3rem;
color: brown;
	text-align: center;
	letter-spacing: 5px;
}
.subheader a {
	text-decoration: none;
	
}
.BIGR {
	float: right;
	background: linear-gradient(#333, #fff, #aaa);
border: 2px solid black;
border-radius: 5px;
padding: 0 10px 0 5px;
	font-size: 1.4rem;
	color: brown;
	font-weight: bold;
	font-style: italic;
margin-left: 1rem;
}

img[alt="izquierda"] {
	float: left;
	padding: 1rem;
}
img[alt="derecha"] {
	float: right;
	padding: 1rem;
}


.subheader img:hover {
transform: scale(1.2);
}

article h2 {
	padding: 0;
margin: 0;
	font-size: 1.5rem;
	color: #797;
}

.story {
	max-width: 50%;
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
		color: #111;
	text-align: left;
	background: #ffe;
	padding: 2rem;
	line-height: 2;
	border-radius: 1rem;
}
.listen {
	font-size: 1.3rem;
	color:000;
	font-weight: bold;
	font-style: italic;
}

.tub {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	background: teal;
	color: white;
	border: 1px solid yellow;
	border-radius: 1rem;
	padding: 0.5rem;
	position: relative;
	transition: top ease 0.5s;
}

.tub a{
	text-decoration: none;
}

.tub:hover {
		background: blue;
			border: 1px solid black;
			top: 1px;
}
.notefrombrendan {
	margin: 0 auto;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1rem;
	/* font-weight: bold; */
	color: grey;
	font-style: italic;

	
}
.poem {
	background: #fffff0;
	font-size: 1.2rem;
    font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-weight: 500;
	color: #111;
	line-height: 1.6;
}

.quotation {
	font-style: italic;
	font-weight: 300;
		color: #456;
}
.darker {
	font-weight: bold;
}
.underline {
	text-decoration: underline;
	font-weight: bold;
	color: navy;
}


p.isteach {
	background: white;
	border: 1px solid #789;
	border-radius: 1rem;
	padding: 1rem;
	text-align: center;
}


em {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


article { 
border: 3px double #ddd;
border-radius: 1rem;
margin: 10px;
background: #eff url(../images/paper1.jpg); 
margin-top: 20px;
color: #000; 
text-align: center;
padding-top: 10px;
word-wrap: normal;
box-shadow: 7px 7px 5px #aaa;
}

article .poem{ 
border: 3px double #ddd;
border-radius: 1rem;
margin: 10px;
background: #fffff0; 
margin-top: 20px;
color: #000; 
text-align: center;
padding-top: 10px;
word-wrap: normal;
box-shadow: 7px 7px 5px #aaa;
}
article h2 {
	padding: 0 0 10px 0;
	margin: 0;
	font-size: 1.5rem;
	color: GREEN;
}
article em {

	font-size: 1.3rem;
 color: #369;
 }

article h3{
	background: yellow;
	border: 1px solid #333;
	border-radius: 1rem;
	padding: 10px;
	margin: 0 auto;
	font-size: 1.5rem;
	color: Blue;
}

article a{
	text-decoration: underline;
}
img[alt~="sheetmusic"] {
    border: 1px solid #555;
	border-radius: 1rem;
	margin: 10px 0;

box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
 	width: 800px;
	max-width: 100%;
height: auto;
}
 article i {
	 font-style: italic;
	font-size: 1.1rem;
 color: #123;
 }
 
p {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}
.diff {
	font-weight: bold;
}
p:first-letter{
  color: red;
font-family: 'Open Sans', cursive;
font-size:150%;
font-weight: bold;
line-height: .5;
padding-right: 3px;
}

.spoken {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: bold;
}

strong {
	font-size: 150%;
	font-weight: bold;
	color: blue;
}
hr {
  margin-top: 100px;
  border: none;
}
.column {
	padding-top: 10px;
	column-count: 2;
	column-gap: 30px;
	column-rule: 1px dotted #789;
	}

.column3 {
		padding-top: 10px;
	column-count: 3;
	column-gap: 30px;
	column-rule: 1px dotted #789;

	}
.column4 {
		padding-top: 10px;
	column-count: 4;
	column-gap: 30px;
	column-rule: 1px dotted #789;

	}
.standout {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	font-style: normal;
	color: brown;
}	

.grey {
	font-style: italic;
	font-weight: 300;
	color: grey;
}
img[class="HUP"] {
	margin: 0 auto;
	}
.liam_moore {
	margin: 0 auto;
}
audio {
	background: #333;
	   width:90px; 
  height:35px;
  border: 3px solid red;
  border-radius: 1rem;
 	display: inline-block;
	margin-top: 20px;
	box-shadow: 2px 2px 2px #555;
}
 audio:hover {
	 border:  3px solid teal;
	 transform: scale(1.1);
 }	
footer { 
margin-top: 5px;
	height: 40px;
	color:#333;  
	font-size: 1rem; 
	padding: 0; 
	text-align:center; 
	padding-top: 10px;

}

.performer {
	font-weight: bold;
	font-size: 1.2rem;
	color: brown;
  background: linear-gradient(#aaa, #fff, #aaa);
	border-top: 1px solid black;
		border-bottom: 1px solid black;
	/* border-radius: 1rem; */
	padding: 3px 10px;
	margin-right: 5px;
}

@media only screen 
  and (min-device-width: 820px) 
  and (max-device-width: 1180px) 
{
				.content {
			width: 100%;
			padding: 0px;
		}
		header {
			width: 100%;
		}
.subheader {
padding-top: 0.5rem;
font-size: 1.5rem;
color: brown;
font-weight: 600;
}

	
.subheader img {
	padding-left: 20px;
	padding-right: 20px;
}
		.column {
	column-count: 2;
    }
.column3 {
	column-count: 2;
	column-gap: 30px;


	}	
article {
	text-align: center;
}

img[class="HUP"] {
	margin: 0 auto;
	}
.story {
	max-width: 100%;
}
footer { 
font-size: 1rem;
}
}



@media screen and (max-width: 667px) and (min-width: 375px) {
		.content {
			width: 100%;
			padding: 0px;
		}
header h1 {
font-size: 2rem;
	}

.subheader {
padding-top: 0.5rem;
font-size: 1.2rem;
color: brown;
font-weight: 600;
}

		.column {
	column-count: 1;
    }
.column3 {
	column-count: 1;
	}
.column4 {
	column-count: 1;
}	
article {
	text-align: center;
	padding-left: 10px;
	font-size: 100%;
}
img[class="HUP"] {
margin: auto;
	}
.story {
	max-width: 100%;
}
footer { 
font-size: 0.8rem;
}
}