@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=block');

:root {
  --link: #00aaeb;
  --hover: #0087d0;

  --special-font: 'Paytone One';

 	--asu-gold: #ffc627;
  --asu-gold-hover: #ffcf47;
  --asu-maroon: #8c1d40;
  --asu-green: #78be20;
  --asu-orange: #ff7f32;
  --asu-blue: #00A3E0;

  --color-background: #e8e8e8;
  --color-white: #fff;
  --color-black: #000;
  --color-grey-dark: #585858;

  --acc-min-size: 44px;

	}

html { 
	font-size: 100%; 
	scroll-behavior: smooth; 
	}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
	}

body,
input,
button,
a.button,
select,
option,
textarea {
  font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-black);
  background-color: var(--color-white);
  text-align: center;
	}

html, body {
  height: 100%;
  margin: 0;
  }

body {
  display: flex;
  flex-direction: column;
  }

ul { list-style: none; }			


p{ padding: .75rem 0; }


a, .link {
  color: var(--asu-maroon);
  text-decoration: none;
  font-weight: 500;
  text-underline-offset: .25rem;
	}
a:hover, .link:hover{
  color: var(--asu-maroon);
  text-decoration-thickness: 2px;
  text-decoration: underline;
  } 
a:not(:where(p a, h2 a, .leaflet-container a)) {
  min-height: var(--acc-min-size);
  min-width: var(--acc-min-size);
  display: inline-flex;
  align-content: center;
  flex-wrap: wrap;
  }	


button, 
a.button {
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font: inherit;
	}
button:before, 
a.button:before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--asu-maroon);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  justify-content: center;
  }
button:hover:before, 
a.button:hover:before { opacity: 1; }



.print-only{ display: none !important; }



#top{
	padding: 1rem 1rem 2rem 1rem;
	background-color: var(--asu-maroon);
	color: var(--color-white);
	position: relative;
	}
#top::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -1rem;
  height: 1rem;
  background-image: url("../images/wave-border.svg");
  background-repeat: repeat-x;
  background-size: 4rem;
	}
h1{
	margin: 0;
	padding: 1rem 0;
	font-family: var(--special-font);
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: .1rem;
	word-spacing: 0.25rem;
	font-weight: normal;
	}
h2{
	padding: 0;
	margin: 0;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	}


main {
  text-align: center;
  flex: 1;
  padding: 0 1rem 5rem 1rem;
  }

.item-grid{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 0;
	margin: 4rem 1rem 3rem 1rem;
	justify-content: center;
	line-height: 1.25;
	}
.item-grid .title{ font-size: 1.25rem; }
.item-grid img{ 
	display: block;
	width: 12rem; 
	margin: 0 auto .5rem auto;
	}	
.item-grid p{ padding-top: 0; }	

#more-games{
	background-color: var(--asu-maroon);
	color: var(--color-white);
	cursor: pointer;
	padding: 1rem;
	border-radius: .5rem;
	display: inline-block;
	width: 100%;
	font-size: 1.3rem;
	font-weight: 500;
	}
#more-games:hover{ background-color: #e76313; }
#more-games a, #more-games a:link, #more-games a:visited, #more-games a:hover, #more-games a:focus{ color: var(--color-white); }



/* Excludes keyboard focus */
button, input, select, textarea, a, a.button [tabindex]:not([tabindex="-1"]) {
  outline: none;
  position: relative;
  }
/* Default focus-visible ring for keyboard users */
button:focus-visible,
a.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible,
details > summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--asu-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 9px var(--color-black); 
  }



@media print, (min-width:450px) {

	h1{ font-size: 3.5rem; }

	h2{ font-size: 2rem; }

}

@media print, (min-width:650px) {


	#top{ padding: 3rem 1rem; }
	#top::after{ 
		background-size: 6rem; 
		height: 3rem;
		bottom: -3rem;
		}

	h1{
		font-size: 4.5rem;
		line-height: 4rem;
		padding-bottom: 2rem;
		}
	h2{
		font-size: 2.5rem;
		}

	.item-grid{
		max-width: 1000px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
		margin: 4rem auto 4rem auto;
		line-height: 1.5rem;
		justify-items: center;
		}	
	.item-grid img{ width: min(14rem, 100%); }

	#more-games { 
		width: min(100%, 40rem); 
	}


}