@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fira+Code:wght@300..700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kristi&family=Neonderthaw&family=Overpass+Mono:wght@300..700&family=Poiret+One&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sono:wght@200..800&family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&display=swap');

@font-face {
    font-family: "Kristi";
  src: url("('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fira+Code:wght@300..700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kristi&family=Neonderthaw&family=Overpass+Mono:wght@300..700&family=Poiret+One&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sono:wght@200..800&family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&display=swap')");
  font-style: normal;
}

@font-face {
  font-family: "Figtree";
  src: url("./index.html") format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

:root {
	--spacing: 3rem;
    --color-bl:#222222;
    --color-wh:#f7f7f7;
	font-family: "Figtree";
	font-size: 125%;
}

@media (width > 600px) {
	:root {
		font-size: 150%;
		--spacing: 2rem;
	}
}

@media print {
    @page {
    	margin: 1in; 
  	}
    
	:root{
        --color-bl:#222222;
        --color-wh:#f7f7f7;
		filter: grayscale(100%);
		font: 'Figtree', 'Helvetica';
    }
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Printing */

	.gradient {
		display: none !important;
	}
	
	/* So much trial and error and so frustrating, referenced class material https://typography-interaction-2526.github.io/topic/responsive/#other-media-features */
	#project-title {
		color: black;
	}

	#project-sub {
		line-height: .5rem;
	}

	.header-text {
		color: black;
		opacity: 100%;
		align-content: center;
	}

	.header-text p, h2, h3 {
		color: black;
		opacity: 100%;
		align-content: center;
	}

	.footer-text {
		display: none !important;
	}

	footer {
		display: none !important;
	}

	.quote03 {
		page-break-inside: avoid;
        margin-block-end:0;
	}

	.quote03 blockquote {
		font-size: 1rem !important;
		line-height: 1rem !important;
		page-break-inside: avoid;
	}

	.quote04 blockquote {
		font-size: 1rem !important;
		line-height: 1rem !important;
		page-break-inside: avoid;
	}
	
    .time{
        display: none !important;
    }
    .cite-group{
        margin-block:0;
    }
    .grad-container{
        display: none !important;
    }

    #title02{
        margin-block-start:1rem;
    }
	#special-print-par {
		margin-block-end: 1rem;
	}

	#special-print-head01 {
		margin-block-start: 1rem;
	}

	#special-print-head02 { 
		break-before: page;
	}
}

header{
	min-height: 100vh;
    justify-content: space-between;
    position:relative;
    background: linear-gradient(to bottom, #AF184D,#4b2475, #FF5802, #f7f7f7);
	background-size: 500% 500%;
	animation: blend 10s ease infinite;
	color: var(--color-wh);
}

.course{
    letter-spacing:.25rem;
    font-weight: 300;
    font-size: .65rem;
    margin-block-start:0;
}

body {
    background: var(--color-wh);
    max-height: 150vh;
	font-size: .85rem;
	line-height: 1.25rem;
    position:relative;	
}

main {
	color: var(--color-bl);
}

h1 {
	font-family: 'Kristi';
	letter-spacing: 0.5rem;
    font-size: 8rem;
    text-align: center;
    font-weight:800;
	margin-inline: auto;
}

.title-head{
    display:flex;
    flex-direction: column;
    text-align:center;
	width: 100vw;
    height: 100vh;
	padding-inline: 1rem;
	padding-block-start:1.5rem;
	padding-block-end:1rem;
    position:absolute;
	z-index:0;
    color: var(--color-wh);
	bottom:0;
}

#project-sub {
	text-align: center;
	font-size: 1rem;
	line-height: 1.25rem;
	font-family: "Figtree";
	font-weight: 300;
	padding-block-start: 1rem;
	padding-inline:auto;

	@media (width > 600px) {
	font-size: 1rem;
	padding-block-start: 1rem;
	line-height: 1.25rem;
	text-wrap: balance;
	font-weight: 300;
	}

	@media (width > 800px) {
	font-size: 1.5rem;
	padding-block-start: 1rem;
	line-height: 2rem;
	text-wrap: balance;
	font-weight: 300;
	}
}

#project-title{

	color: var(--color-wh);
	font-size: 2rem;
	padding-block-end: .5rem;
	font-weight: 200;
	letter-spacing: 0.2rem;
	align-content: center;
	margin-block-start: 25%;

	@media (width < 600px) {
	font-size: 2rem;
	letter-spacing: 0.2rem;
	font-weight: 200;
	}

	@media (width > 600px) {
	font-size: 2rem;
	letter-spacing: 0.2rem;
	font-weight: 200;
	}

	@media (width > 800px) {
	font-size: 3rem;
	letter-spacing: 0.2rem;
	padding-block-end: 0.5rem;
	font-weight: 200;
	}

	@media (width > 1300px) {
	font-size: 5rem;
	letter-spacing: 0.2rem;
	padding-block-end: 3rem;
	font-weight: 200;
	}
}

.authors{
	margin-inline:auto;    
	align-content:end;
	padding-block-end: 10rem;
	width: 100%;
	
	@media (width > 600px) {
	margin-block-start: 20%;
	}

	@media (width < 600px) {
	font-size: 2rem;
	margin-inline:auto;
	align-content:center;
	margin-block-start: 20%;
	}
}

#author {
	text-align: center;
	font-size: .75rem;
	font-weight: 300;
}

.names {
	font-size: .75rem;
	font-weight: 300;
}

#names {
	font-size: .75rem;
	font-weight: 300;
	text-decoration: underline;
	margin-block-end:2rem;

	@media (width < 600px) {
		margin-block-start:.5rem;
	}
	}

	.art-link {
    	font-size: .75rem;
		font-weight: 300;
		text-decoration: underline;
        place-content: center;
        
		@media (width < 600px) {
        margin-block-start:0rem;
        }
	}

main {
    margin-block-end:2rem;
}

article {
    padding-block-end: 7rem;
    padding-inline: 1.5rem;
    text-wrap: pretty;
    bottom: 30vh;
	top:40vh;
    z-index:10;
    
	@media (width > 800px) {
	padding-inline: 3rem;
	}
}

h2 {
	font-weight: bold;
	font-style: italic;
	font-size: 1.5rem;
    line-height: 105%;
	font-weight: 500;
	text-align: left;
    width:90%;
	text-wrap: pretty;
	padding-block: 0.5rem;
	
	@media (width > 800px) {
	font-size: 2rem;
	text-wrap: pretty;
	text-align: left;
	padding-block: 1rem;
	}

}

h3 {
	font-size: 1rem;
	text-align: left;
}

.title-sub{
    text-align:center;
    margin-block-start:0;
    margin-block-end:auto;
    margin-inline: auto;
    max-width:70%;
}

.art-name h3{
    font-size: 1rem;
    line-height:1.75rem;

    @media (width > 800px) {
	font-size: 1.5rem;
	text-wrap: pretty;
	text-align: left;
	}
}

p {
	margin-block-start: calc(2x * var(--spacing));
}

/* Animation link https://codepen.io/P1N2O/pen/pyBNzX */
@keyframes blend {
	0% {
		background-position: 0% 25%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 25%;
	}
} 

.art-container{
	bottom: 30vh;
}

footer{
	min-height: 100vh;
    justify-content: flex-end;
    position:relative;
    background: linear-gradient(to top, #AF184D,#4b2475, #FF5802, #f7f7f7);
	background-size: 500% 500%;
	animation: blend 10s ease infinite;
}

.footer-text{
	display:flex;
    flex-direction: column;
    text-align:center;
	width: 100vw;
    height: 100vh;
	padding-inline: 1rem;
	padding-block-start:1.5rem;
	padding-block-end:1rem;
    position:absolute;
	z-index:0;
    color: var(--color-wh);
	bottom:0;
}

.header-text {
	display:flex;
    flex-direction: column;
    text-align:center;
	width: 100vw;
    height: 100vh;
	padding-inline: 1rem;
	padding-block-start:1.5rem;
	padding-block-end:1rem;
    position:absolute;
	z-index:0;
    color: var(--color-wh);
	bottom:0;
}

footer p{
    text-align: center;
	font-size: .75rem;
	font-weight: 300;
    
    @media (width < 600px){
    margin-block-end:.5rem;
    }
}

.p2{
    letter-spacing:.25rem;
    font-weight: 300;
	font-size: 0.65rem;
}

#p3{
    margin-block-end:.5rem;
}

.msg{
    font-family: 'Kristi';
	letter-spacing: 0.25rem;
    font-size: 1.7rem;
    text-align: center;
    font-weight:500;
    top:0;
    margin-block:auto;
    margin-inline: auto;
    
	@media (width > 800px){
    font-size: 3rem;
    }
}

.msg-top{
    font-family: 'Kristi';
	letter-spacing: 0.25rem;
    font-size: 1.7rem;
    text-align: center;
    font-weight:500;
    top:0;
    margin-block-start:auto;
    margin-inline: auto;
    
	@media (width > 800px){
    font-size: 3rem;
    }
}

.author1{
    font-size: .75rem;
	font-weight: 300;  
}

.author2{
    font-size: .75rem;
	font-weight: 300;

    a{
        text-decoration: underline;
    }
}
.original{
    font-size: .75rem;
	font-weight: 300;
    margin-block-end:1rem;
    
	a{
        text-decoration: underline;
    }
}

.cite-group{
    display:grid;
    grid-template-columns: 1fr;
    margin-block:1rem;
    position:relative;
    min-height: 25vh;
    align-items:start;

    @media (width > 800px) {
	grid-template-columns: 1fr 2.5fr;
    column-gap: 2rem;
	}
}

.title-text{
    display:grid;
    grid-template-columns: 1fr ;

    @media (width > 800px) {
    border-block-start: 2px solid var(--color-bl);
    padding-block-start: 1rem;
    column-gap: 1rem;	
    }
 }

.sec-title {
    z-index:0;
	position:sticky;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 1.5rem;
    position:sticky;
    top: 7rem;
    padding-block: 1rem 2rem;
    width:100%;
    min-height:max-content;
    background: linear-gradient(to top,#f7f7f7 0%, #f7f7f7 50%, #f7f7f7 100%, #f7f7f7 100%);    
    backdrop-filter: blur(5px);
    mask: linear-gradient(to bottom, #f7f7f7, #f7f7f7, #f7f7f7, #f7f7f7, transparent);

    h4{
        font-size: 1.5rem;
    }

    @media (width > 800px) {
    	top:0rem;
	}
}

.title-container {
	display:grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
	row-gap:0;
    margin-block:1rem 0;
	text-align: center;

    @media (width > 800px) {
	grid-template-columns: 1fr;
	}
}

.empty {
	opacity: 0;
}

.grad-container{
    
    position:sticky;
    min-height: 5em;
    min-width: 15em;
     top:0;
     display:flex;
     flex-direction: column;
}

.gradient{
    z-index:2;
	position:sticky;
    min-height: 5em;
    min-width: 15em;
    border-radius:5px;
    top:0;
    font-weight: 600;
    letter-spacing: -7px;
	background-color: white;

	p {
        height: 1em;
 		text-align:center;
		color: var(--color-wh);
		font-size: 3rem;
        line-height: 5rem;
        letter-spacing: .01rem;

	@media (width > 800px) {
    line-height: 10rem;
	font-size: 5rem;
	}
	}
}

#g01{
    background: linear-gradient(to bottom, #256E81,#010D28);
    position:sticky;
    min-height: 5rem;
    top:0;

    @media (width > 800px) {
    min-height: 10rem;
	}
}

.time {
    z-index:2;
	color: black;
    background:var(--color-wh);
    position:sticky;
    min-height: 5em;
    min-width: 15em;
     top:50;
    padding-block:.5rem 0;
	font-size: 0.75rem;
	letter-spacing: 0.03rem;
	text-align: left;
}

#g02 {
	background: linear-gradient(to bottom, #F4836D, #D66195, #953D7A, #652D66, #301A4B);
	position:sticky;
    min-height: 5rem;
    top:0;

	.time {
	color: black;
	font-size: 0.6rem;
	letter-spacing: 0.03rem;
	text-align: left;
	padding-block-start: 1rem;
	}
	
	@media (width > 800px) {
    min-height: 10rem;
	}
}

#g03 {
	background: linear-gradient(to bottom, #DF291E,#FC6337,#FC7641,#9F5D6E,#404974);
	position:sticky;
    min-height: 5rem;
    top:0;

	.time {
	color: black;
	font-size: 0.6rem;
	letter-spacing: 0.03rem;
	text-align: left;
	padding-block-start: 1rem;
	}

    @media (width > 800px) {
    min-height: 10rem;
	}
}

#g04 {
	background: linear-gradient(to bottom, #9aecff,#26B1D0,#29618E,#242F4D);
	position:sticky;
    min-height: 5rem;
    top:0;

	.time {
	color: black;
	font-size: 0.6rem;
	letter-spacing: 0.03rem;
	text-align: left;
	padding-block-start: 1rem;
	}

    @media (width > 800px) {
    min-height: 10rem;
	}
}

.citation{
    font-size: 0.5rem;
    line-height: 110%;
    text-align: left;
    margin-block-start:.25rem;
    order:3;

    @media (width > 800px) {
	order:1;
	}
}

.cite-text{
    padding-block-end:2rem;

	p {
		margin-block-end: 1rem;
	}

    a {
        color:#FF5802;
        padding:2.5px;
    }
    em{
        font-weight: 700;
    }

    .link01:hover{
        background:linear-gradient(to bottom, #256E81,#010D28);
        color: var(--color-wh);
        border-radius:5px;
    }

    .link02:hover{
        background:linear-gradient(to bottom, #F4836D, #D66195, #953D7A, #652D66, #301A4B);
        color: var(--color-wh);
        border-radius:5px;
    }

    .link03:hover{
        background:linear-gradient(to bottom,#FC6337,#FC7641,#9F5D6E,#404974);
        color: var(--color-wh);
        border-radius:5px;
    }

    .link04:hover{
        background:linear-gradient(to bottom,#26B1D0,#29618E,#242F4D);
        color: var(--color-wh);
        border-radius:5px;
    }
}

.cite-text a{
    text-decoration: underline;
    text-decoration-style: dotted;
}

.cite{
    font-style: italic;
    line-height: .85rem;
    font-size: .75rem;
    font-weight: 250;
	padding-block-start: 1rem;
}

.quote03 {
	border-inline-start: 10px solid transparent;
	border-image: linear-gradient(#DF291E,#FC6337,#FC7641,#9F5D6E,#404974) 1;
	padding-inline-start: 1.5rem;
	margin-inline-start: 2rem;
	margin-block: 2rem;
}

.quote03 blockquote {
	font-size: 1.3rem;
	line-height: 1.6rem;
	font-weight: 500;
	color: var(--color-bl);
	background-clip:text;
	text-align: left;
}

.quote04 {
	border-inline-start: 10px solid transparent;
	border-image: linear-gradient(#26B1D0,#29618E,#242F4D) 1;
	padding-inline-start: 1.5rem;
	margin-inline-start: 2rem;
	margin-block: 2rem;
}

.quote04 blockquote{
    font-size: 1.3rem;
	line-height: 1.6rem;
    font-weight: 500;
	color: var(--color-bl);
    background-clip:text;
}

#lastquote {
	margin-block-end: 3rem;
	padding-inline-end: 2rem;
}