html { font-family:sans-serif }
body { margin:0;color:black;font-family:sans-serif;font-size:18px;line-height:1.5 }
h1,h2,h3 { text-align:center;margin:0;padding:1em 0 }
p { margin: 0;padding:1em 0 }
img { display:block; border:0; max-width:100%;height:auto }
.table, .row, .cell { display:block }

/* .page-nav { grid-column:1/-1; background:#ffffff; padding:0; text-align:center } */

.navbar img { padding:0px; max-width:200px;height:auto;margin-top:0px;margin-bottom:0px;margin-right:auto;margin-left:auto }

.navbar a { display:block;color:#007298; text-decoration:none;background:white; width:100%; padding:1rem; text-align:center; text-decoration:none; text-transform:uppercase; border-top:1px solid #e7e7e7; border-right:1px solid #e7e7e7; border-left:1px solid #e7e7e7 }

.navbar a:link { color:#670180}
.navbar a:visited { color:#670180}
.navbar a:hover { background:#670180; color:white }
.navbar a.selected {background:#670180; color:white }

/* Splash section */

.splash { margin-top:2em;background:#6495ed;padding-bottom:2em; box-shadow: inset 0 8px 6px -6px black }
.splash-content { padding: 1.5em }

@media screen and (min-width: 600px) {
/* .splash-text { columns:2;column-gap:2em } */
.splash-text p { padding-top:0 }
}

/* Buckets section */

.buckets { padding:2em; background:#670180; box-shadow: inset 0 8px 6px -6px black }
.buckets ul { margin:0; padding:0 }
.buckets li { background:white; list-style-type:none;margin-bottom:20px;box-shadow: black 1.95px 1.95px 2.6px }
.bucket { padding:1.5em }

/* More section */

.more { padding:2em }

/* Twins section */

.twin { padding:2em;background:#8fbc8f;color:white }
.twin:last-of-type { background:#483d8b }

/* Colophon section */
.colophon { padding:.5em;background:#000000;color:white;text-align:center }
.colophon a { color:white }
.colophon a:hover,.colophon a:focus { border-bottom:1px solid white }

/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	.grid { max-width:50em;margin:0 auto }
}

/*--------------------------------------------------------------
Use flex to create a three-bucket layout 
--------------------------------------------------------------*/

@media screen and (min-width: 700px) {
  @supports (display: flex) {
      .buckets ul { display:flex;justify-content:space-between }
		.buckets li { width:31% }
	}
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@media screen and (min-width: 600px) {
	/* Layout with CSS Grid */
	@supports (display: grid) {

		/* Four-column layout. Two center columns have a total max width of 50em: */
		.grid { display: grid;grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr }

		/* Center items by placing them in the two center columns: */
		.splash-content,.more-content,.buckets ul { grid-column: 2/4 }

		/* Use automatic grid placement + span to let each item span two columns:*/
		.twin,.colophon aside { grid-column: span 2 }
	}
}


/********************************************************************* For large sizes */
@media only screen and (min-width: 1000px) {
.navbar {
  width:100%;
  height: 200px;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
  align-items: center;
  justify-content: center;
}

.navbar img  { width:200%;height:auto;padding:1rem }
.navbar a { padding:1rem;color:#670180; text-decoration:none;background:transparent; border:none }
.navbar a:link { color:#670180}
.navbar a:visited { color:#670180}
.navbar a:hover { background:#670180; color:white;border-radius:10px }
.navbar a.selected {background:#670180; color:white;border-radius:10px }
.navbar a:nth-child(6) { border-bottom:none }
}