:root {
	--font-family: "Roboto", sans-serif;
	--corner: 3px;
}

html { min-height: 100%; }
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
body {
	min-height: 100vh;
	font-family: var(--font-family);
	color: rgb(160,186,214);
	color: rgba(207,227,234,0.72);
	font-size: 125%;
	display: flex;
	flex-direction: column;
}
a:link,a:visited {
	color:rgb(160,186,214);
	color:rgba(160,186,214,.75);
}
a:hover,a:active,a:focus {
	color:rgb(160,186,214);
	color:rgba(160,186,214,.95);
}
q, blockquote p {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
q:before, blockquote p:before {
    content: open-quote;
}
q:after, blockquote p:after {
    content: close-quote;
}
blockquote {
	margin: .25em 0 .5em;
	padding-bottom:2.5em;
	transition:background-color 2s ease;
	border-radius: var(--corner);
	display: grid;
	align-content: space-between;
}
blockquote:hover {
	background-color:rgba(139,238,71,0.50);
	transition: all .75s ease;
}
blockquote p {
	font-family: 'Caveat', cursive;
	letter-spacing: 1px;
	font-size: 10vw;
	text-shadow: 1px 1px rgba(72,72,72,0.87);
	margin: 0 3%;
}

blockquote p:before,blockquote p:after {
	font-size:2em;
	line-height:.1em;
	content: "\201C";
	padding-right:.25em;
	display:inline;
}
blockquote p:after {
	font-size:1em;
	content: "\201D";
}
blockquote cite {
	font-style: normal;
	font-weight: 400;
	text-align: center;
	color: rgb(78,155,201);
	color: rgba(78,155,201,1)
}
main { 
	display: grid;
	background-color: inherit; 
	margin-top:1.5em;
	gap: 1em;
	grid-template-areas: 
		"header"
		"einstein"
		"lama"
		"williams"
		"footer";
}
#albert-einstein {
	grid-area: einstein;
}
#dalai-lama {
	grid-area: lama;
}
#robin-williams {
	grid-area: williams;
}
@media (min-width:450px) {
	blockquote p {
		font-size: 8vw;
	}
}
@media (min-width: 30em) {
	main {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
			"header header"
			"einstein lama"
			"williams williams"
			"footer footer";
		column-gap: 1vw;
	}
	blockquote {
		margin: .25em 0 .75em;
	}
	blockquote p {
		font-size: 6vw;
		max-width: 20em;
	}
	#robin-williams p {
		max-width: 90%;
		margin: auto;
	}
}
@media (min-width: 667px) {
	blockquote p {
		font-size: 5vw;
	}
}
@media (min-width: 768px) {
	blockquote p {
		font-size: 4vw;
	}
}
@media (min-width: 60em) {
	main {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: 
			"header header header"
			"einstein lama williams"
			"footer footer footer";
	}
	blockquote {
		margin: .25em 0 0;
	}
	blockquote p {
		max-width: 14em;
		font-size: 3vw;
	}

}
cite:before {
	display: inline;
	content: "-";
	padding-left: 30%;
}
#pageheader,#pagefooter {
	background-color: rgb(60,65,100);
	background-color: rgba(140,156,194,0.5);
	padding: 1.25% 5%;
}

#pageheader {
	grid-area: header;
    background: rgb(0,176,255);
	background: linear-gradient(
	  280deg,
	  hsl(231deg 100% 61%) 0%,
	  hsl(310deg 83% 55%) 12%,
	  hsl(340deg 100% 66%) 27%,
	  hsl(21deg 100% 69%) 41%,
	  hsl(45deg 100% 69%) 55%,
	  hsl(58deg 91% 72%) 67%,
	  hsl(66deg 90% 70%) 78%,
	  hsl(74deg 94% 69%) 88%,
	  hsl(82deg 97% 69%) 95%,
	  hsl(91deg 100% 70%) 100%
	);
	padding: 1% 2.5%;
}
#pageheader h1 {
    text-shadow: 1px 1px rgba(45,45,45,.75),
                 -1px 1px rgba(45,45,45,.75),
                 1px -1px rgba(45,45,45,.75),
                 -1px -1px rgba(45,45,45,.75),
                 2px 2px 2px rgba(225,225,235,.75);
	margin: 0 0 0 .125em;
	letter-spacing:2px;
	font-weight: 700;
	font-size: 6vw;
}
#pageheader a {
	display: block;
	color: rgba(251,251,251,0.75);
	text-decoration: none;
	padding:2% 0 3% 3%;
	transition: all 1s ease-out;
}


#pageheader a:hover {
	cursor: default;
	color: rgba(253,253,253,0.95);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-ms-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;
	letter-spacing: 3px;
}
footer {
	grid-area: footer;
	margin-top: auto;
	font-size: .75em;
	color: rgb(82,93,101);
	color: rgba(82,93,101,1);
}

@media screen and (min-width:1000px) {
	#pageheader h1 {
		font-size: 3em;
	}
}