@media (prefers-reduced-motion: no-preference) {



	main {
		timeline-scope: --trackedElem, --trackedElem2, --trackedElem3, --trackedElem4, --trackedElem5, --trackedElem6, --trackedElem7, --trackedElem8, --trackedElem9, --trackedElem10, --trackedElem11;
	}

	footer{
		position: relative;
		z-index: 88;
	}
	.footerDiv
	{
		display: flex;
		justify-content: center;
		align-items: center; 
	}

	.timelineBar
	{
		height: 28px;
		background-color: var(--ualrMint);
		transform-origin: left center;
		animation: expand linear;
		animation-timeline: scroll();
		margin-top: 16px;
	}
	.timelineUI
	{
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		right: 0;
		height: 72px;
		//background: var(--ualrDGrey);
		background-color: white;
	}

	.timelineNode
	{
		display: block;
	}

	.arrowDeco
	{
		height: 80%;
		position: absolute;
		z-index: 5;
		margin-top: 2px;
	}

	.content20s {
		view-timeline: --trackedElem;
	}
	.content30s {
		view-timeline: --trackedElem2;
	}
	.content40s {
		view-timeline: --trackedElem3;
	}
	.content50s {
		view-timeline: --trackedElem4;
	}
	.content60s {
		view-timeline: --trackedElem5;
	}
	.content70s {
		view-timeline: --trackedElem6;
	}
	.content80s {
		view-timeline: --trackedElem7;
	}
	.content90s {
		view-timeline: --trackedElem8;
	}
	.content00s {
		view-timeline: --trackedElem9;
	}
	.content10s {
		view-timeline: --trackedElem10;
	}
	.content2020s {
		view-timeline: --trackedElem11;
	}

	@supports (animation-timeline: view()) {
		.imageDecoration {
			animation: fadeIn backwards, fadeOut forwards;
			animation-range: entry, exit;
		}
	}

	@supports not (animation-timeline: view()) {
		.imageDecoration {

			opacity: 0;
			visibility: hidden;
			transition: opacity 0.5s ease, visibility 0.5s ease;
		}

		.imageDecoration.fadeVisible {
			opacity: 1;
			visibility: visible;
		}
	}

	.imageDecoration{
		margin-left: 50px;
		margin-right: 50px;
	}

	.image20s {
		animation-timeline: --trackedElem, --trackedElem;
	}
	.image30s {
		animation-timeline: --trackedElem2, --trackedElem2;
	}
	.image40s {
		animation-timeline: --trackedElem3, --trackedElem3;
	}
	.image50s {
		animation-timeline: --trackedElem4, --trackedElem4;
	}
	.image60s {
		animation-timeline: --trackedElem5, --trackedElem5;
	}
	.image70s {
		animation-timeline: --trackedElem6, --trackedElem6;
	}
	.image80s {
		animation-timeline: --trackedElem7, --trackedElem7;
	}
	.image90s {
		animation-timeline: --trackedElem8, --trackedElem8;
	}
	.image00s {
		animation-timeline: --trackedElem9, --trackedElem9;
	}
	.image10s {
		animation-timeline: --trackedElem10, --trackedElem10;
	}
	.image2020s {
		animation-timeline: --trackedElem11, --trackedElem11;
	}

	


	@keyframes fadeIn {
		0% {
		 opacity: 0;
		}
		100% {
		 opacity: 1;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@keyframes expand {
		from {
			transform: scaleX(0);
		}
	}

	body {
		--boxSize: 600px;
		--ualrMaroon: #6e2639;
		--ualrSilver: #a7a9ac;
		--ualrLGrey: #eeeeee;
		--ualrDGrey: #333333;
		--ualrOcean: #245d7a;
		--ualrMint: #91d9c6;
		--ualrPumpkin: #d5410b;
		--ualrGrass: #99cc33;
		--ualrGold: #ffbf00;

		background: white;
		color: black;

	}


	.startPage{
		display: flex;
		justify-content: center;
		align-items: center;
		height: -50vh;

		background: white;
	}

	main {
		display: flex;
		background: var(--ualrDGrey);


		//background-image: url(squares.png);
	    //background-position: bottom right;
	   /* -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
	    /*mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.0) 100%);*/
	    //background-color: var(--ualrDGrey);
	    //background-repeat: repeat-y;
	}

	.bgImg {
		position: fixed;
	  bottom: 0;
	  right: 0;
	  z-index: 1;
	  pointer-events: none;
	}

	.menuBar
	{
		position: absolute;
		top: 0;

		display: flex;
		width: 100%;

		justify-content: center;

		flex-direction: row;

		//background: var(--ualrLGrey);
	}

	.anchor{
		//display: block;
		//height: 115px; /*same height as header*/
		//margin-top: -115px; /*same height as header*/
		//visibility: hidden;
		position: absolute;
	  	transform: translateY(-10vh);
	}

	.hero-home-container
	{
		z-index: 2;
		background: white; !important

		padding-bottom: 0px 0px 5vh 5px;

	}

	.promo-box-home
	{
		padding: 0px 0px 5vh 0px;
	}

	.menuItem
	{
		//padding: 4px;
		//margin-right: 8px;
		padding-top: 16px;
	}
	.menuItem a
	{
		color: var(--ualrMaroon);
	}

	.menuSpacer
	{
		flex-grow: 1;
		flex-basis: 0;
		background: url(timelineline.png);
		z-index: 4;
		background-repeat: repeat-x;
		margin-top: 16px;
	}

	.left.col {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 16px;

		z-index: 2;
	}

	.right.col {
		flex: 1;
		z-index: 2;
	}

	.decadeTitle
	{
		text-align: center;
		color: var(--ualrMaroon);
	}

	.imageDecoration
	{
		position: sticky;
		top: calc(50vh - var(--boxSize) / 2);
		width: var(--boxSize);
		height: var(--boxSize);
		max-width: 50vw;
		aspect-ratio: 1 / 1;
		
	}

	.imageDecoration.imageMobile
	{
		position: relative !important;
		//top: auto;
		display: none;
	}



	.imageDecoration img
	{
		width: 100%;
		height: 100%;
		object-fit: fill;
	}

	.image20s {
		background: var(--ualrPumpkin);
		box-shadow: 5px 5px 1px var(--ualrPumpkin);
	}
	.image30s {
		background: var(--ualrGold);
		box-shadow: 5px 5px 1px var(--ualrGold);
	}
	.image40s {
		background: var(--ualrGrass);
		box-shadow: 5px 5px 1px var(--ualrGrass);
	}
	.image50s {
		background: indianred;
	}
	.image60s {
		background: palegoldenrod;
	}
	.image70s {
		background: lightblue;
	}
	.image80s {
		background: lawngreen;
	}
	.image90s {
		background: orangered;
	}
	.image00s {
		background: darkgoldenrod;
	}
	.image10s {
		background: darkblue;
	}
	.image2020s {
		background: limegreen;
	}

	.content
	{
		//height: 50vh;
		align-items: center;
		margin-block: 110vh;
		padding-inline: 16px;
		//border: 2px solid;
		//border-radius: 4px;
		margin-right: 48px;
		background: var(--ualrLGrey);
		color: black;
		padding: 24px;
	}

	.content20s
	{
		box-shadow: 5px 5px 1px var(--ualrPumpkin);
	}
	.content30s
	{
		box-shadow: 5px 5px 1px var(--ualrGold);
	}
	.content40s
	{
		box-shadow: 5px 5px 1px var(--ualrGrass);
	}

	.content h2, .content h3{
		color:white;
		color: var(--ualrMaroon);
	}
	.content h3{
		text-decoration: underline;
	}
	a:has(p), .content p{
		text-decoration: none;
	}

	.content1 {
		min-height: var(--boxSize);
	}
	.content2 {
		min-height: var(--boxSize);
	}

	.imageDecoration.imageMobile
	{
		position: relative !important;
		//top: auto;

	}
}


@media (prefers-reduced-motion: reduce) {


main {
		timeline-scope: --trackedElem, --trackedElem2, --trackedElem3, --trackedElem4, --trackedElem5, --trackedElem6, --trackedElem7, --trackedElem8, --trackedElem9, --trackedElem10, --trackedElem11;
	}

	.timelineBar
	{
		height: 30px;
		background-color: var(--ualrMint);
		transform-origin: left center;
		animation: expand linear;
		animation-timeline: scroll();
	}
	.timelineUI
	{
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
		//background: var(--ualrDGrey);
		background-color: white;
	}

	.timelineNode
	{
		display: block;
	}

	.content20s {
		view-timeline: --trackedElem;
	}
	.content30s {
		view-timeline: --trackedElem2;
	}
	.content40s {
		view-timeline: --trackedElem3;
	}
	.content50s {
		view-timeline: --trackedElem4;
	}
	.content60s {
		view-timeline: --trackedElem5;
	}
	.content70s {
		view-timeline: --trackedElem6;
	}
	.content80s {
		view-timeline: --trackedElem7;
	}
	.content90s {
		view-timeline: --trackedElem8;
	}
	.content00s {
		view-timeline: --trackedElem9;
	}
	.content10s {
		view-timeline: --trackedElem10;
	}
	.content2020s {
		view-timeline: --trackedElem11;
	}

	.imageDecoration{
		animation: fadeIn backwards, fadeOut forwards;
		animation-range: entry, exit;
		margin-left: 50px;
		margin-right: 50px;
	}

	.imageDecoration.imageMobile
	{
		position: relative; !important
		top: auto;
		display: none;
	}

	.image20s {
		animation-timeline: --trackedElem, --trackedElem;
	}
	.image30s {
		animation-timeline: --trackedElem2, --trackedElem2;
	}
	.image40s {
		animation-timeline: --trackedElem3, --trackedElem3;
	}
	.image50s {
		animation-timeline: --trackedElem4, --trackedElem4;
	}
	.image60s {
		animation-timeline: --trackedElem5, --trackedElem5;
	}
	.image70s {
		animation-timeline: --trackedElem6, --trackedElem6;
	}
	.image80s {
		animation-timeline: --trackedElem7, --trackedElem7;
	}
	.image90s {
		animation-timeline: --trackedElem8, --trackedElem8;
	}
	.image00s {
		animation-timeline: --trackedElem9, --trackedElem9;
	}
	.image10s {
		animation-timeline: --trackedElem10, --trackedElem10;
	}
	.image2020s {
		animation-timeline: --trackedElem11, --trackedElem11;
	}


	@keyframes fadeIn {
		0% {
		 opacity: 0;
		}
		100% {
		 opacity: 0;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}

	@keyframes expand {
		from {
			transform: scaleX(0);
		}
	}

	body {
		--boxSize: 600px;
		--ualrMaroon: #6e2639;
		--ualrSilver: #a7a9ac;
		--ualrLGrey: #eeeeee;
		--ualrDGrey: #333333;
		--ualrOcean: #245d7a;
		--ualrMint: #91d9c6;
		--ualrPumpkin: #d5410b;
		--ualrGrass: #99cc33;
		--ualrGold: #ffbf00;

		background: white;
		color: black;

	}


	.startPage{
		display: flex;
		justify-content: center;
		align-items: center;
		height: -50vh;

		background: white;
	}

	main {
		display: flex;
		background: var(--ualrDGrey);


		//background-image: url(squares.png);
	    //background-position: bottom right;
	   /* -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
	    /*mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.0) 100%);*/
	    //background-color: var(--ualrDGrey);
	    //background-repeat: repeat-y;
	}

	.bgImg {
		position: fixed;
	  bottom: 0;
	  right: 0;
	  z-index: 1;
	  pointer-events: none;
	}

	.menuBar
	{
		position: absolute;
		top: 0;

		display: flex;
		width: 100%;

		justify-content: center;

		flex-direction: row;

		//background: var(--ualrLGrey);
	}

	.anchor{
		//display: block;
		//height: 115px; /*same height as header*/
		//margin-top: -115px; /*same height as header*/
		//visibility: hidden;
		position: absolute;
	  	transform: translateY(-10vh);
	}

	.hero-home-container
	{
		z-index: 2;
		background: white; !important

		padding-bottom: 0px 0px 5vh 5px;

	}

	.promo-box-home
	{
		padding: 0px 0px 5vh 0px;
	}

	.menuItem
	{
		//padding: 4px;
		//margin-right: 8px;
	}
	.menuItem a
	{
		color: var(--ualrMaroon);
	}

	.menuSpacer
	{
		flex-grow: 1;
		flex-basis: 0;
		background: url(timelineline.png);
		z-index: 4;
		background-repeat: repeat-x
	}

	.left.col {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 16px;

		z-index: 2;
	}

	.right.col {
		flex: 1;
		z-index: 2;
	}

	.decadeTitle
	{
		text-align: center;
		color: var(--ualrMaroon);
	}

	.imageDecoration
	{
		position: sticky;
		top: calc(50vh - var(--boxSize) / 2);
		width: var(--boxSize);
		height: var(--boxSize);
		max-width: 50vw;
		aspect-ratio: 1 / 1;
		
	}

	.imageDecoration.imageMobile
	{
		position: relative; !important
		top: auto;
		display: none;
	}

	.imageDecoration img
	{
		width: 100%;
		height: 100%;
		object-fit: fill;
	}

	.image20s {
		background: var(--ualrPumpkin);
		box-shadow: 5px 5px 1px var(--ualrPumpkin);
	}
	.image30s {
		background: var(--ualrGold);
		box-shadow: 5px 5px 1px var(--ualrGold);
	}
	.image40s {
		background: var(--ualrGrass);
		box-shadow: 5px 5px 1px var(--ualrGrass);
	}
	.image50s {
		background: indianred;
	}
	.image60s {
		background: palegoldenrod;
	}
	.image70s {
		background: lightblue;
	}
	.image80s {
		background: lawngreen;
	}
	.image90s {
		background: orangered;
	}
	.image00s {
		background: darkgoldenrod;
	}
	.image10s {
		background: darkblue;
	}
	.image2020s {
		background: limegreen;
	}

	.content
	{
		//height: 50vh;
		align-items: center;
		margin-block: 110vh;
		padding-inline: 16px;
		//border: 2px solid;
		//border-radius: 4px;
		margin-right: 48px;
		background: var(--ualrLGrey);
		color: black;
		padding: 24px;
	}

	.content20s
	{
		box-shadow: 5px 5px 1px var(--ualrPumpkin);
	}
	.content30s
	{
		box-shadow: 5px 5px 1px var(--ualrGold);
	}
	.content40s
	{
		box-shadow: 5px 5px 1px var(--ualrGrass);
	}

	.content h2 a, .content a {
		color:white;
		color: var(--ualrMaroon);
	}

	.content1 {
		min-height: var(--boxSize);
	}
	.content2 {
		min-height: var(--boxSize);
	}


}


@media (max-width: 1280px) {
	body {
	 --boxSize: 450px;
	 padding: 0;
	}
	.imageDecoration.imageMobile
	{
		display: none;
	}
}

@media (max-width: 1070px) {
	body {
	 --boxSize: 350px;
	 padding: 0;
	}
	.imageDecoration.imageMobile
	{
		display: none;
	}
}

@media (max-width: 1010px) {

	#image20sMobile
	{
		opacity: 1;
		visibility: visible;
	}

	@supports (animation-timeline: view()) {
		#image20sMobile{
			animation: none;
			animation-range: none;
		}
	}

	.startPage
	{
		height: -30vh;
	}

	.hero-home-image img
	{
		height: 20rem;
	}

	body {
	 --boxSize: 550px;
	 padding: 0;
	}

	p
	{
		font-size:1.5rem;
	}

	.promo-box-home
	{
		top: 8vh;
	}

	.content {
		margin-block: 25vh !important;
		margin-left: 48px;
	}

	.imageDecoration.imageMobile
	{
		display: block;
	}

	.left.col
	{
		display: none !important;
	}
	.imageDecoration
	{
		margin-left: auto;
		margin-right: auto;
		top: calc(var(--boxSize) - 15vh - 8vw);
		max-width: 80vw;
		visibility: visible;
		opacity: 1;
	}
}

@media (max-width: 860px) {
	.startPage
	{
		height: -30vh;
	}

		p
	{
		font-size:1.5rem;
	}

	.hero-home-image img
	{
		height: 20rem;
	}

	body {
	 --boxSize: 550px;
	 padding: 0;
	}

	.promo-box-home
	{
		top: 8vh;
	}

	.content {
		margin-block: 25vh !important;
		margin-left: 48px;
	}

	.imageDecoration.imageMobile
	{
		display: block;
	}

	.left.col
	{
		display: none !important;
	}
	.imageDecoration
	{
		margin-left: auto;
		margin-right: auto;
		top: calc(var(--boxSize) - 50px);
		max-width: 80vw;
		visibility: visible;
		opacity: 1;
	}
}

@media (max-width: 770px) {
	body {
	 --boxSize: 550px;
	 padding: 0;
	}

		p
	{
		font-size:1.5rem;
	}

	.promo-box-home
	{
		top: 20vh;
	}

	.content {
		margin-block: 66vh !important;
		margin-left: 48px;
	}

	.imageDecoration.imageMobile
	{
		display: block;
	}

	.left.col
	{
		display: none !important;
	}
	.imageDecoration
	{
		margin-left: auto;
		margin-right: auto;
		top: var(--boxSize);
		max-width: 80vw;
		visibility: visible;
		opacity: 1;
	}
}

@media (max-width: 650px) {
	body {
	 --boxSize: 400px;
	 padding: 0;
	}

		p
	{
		font-size:1.5rem;
	}

	.promo-box-home
	{
		top: 20vh;
	}

	.content {
		margin-block: 66vh !important;
		margin-left: 48px;
	}

	.imageDecoration.imageMobile
	{
		display: block;
	}

	.left.col
	{
		display: none !important;
	}
	.imageDecoration
	{
		margin-left: auto;
		margin-right: auto;
		top: var(--boxSize);
		max-width: 80vw;
		visibility: visible;
		opacity: 1;
	}
}