@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Spectral:400,400i,700&display=swap");
:root {
  --sandy-text: #E6E1DA;
  --wild-sand: #f5f5f1;
  --cararra: #ecede6;
  --snow-drift: #e3e5da;
  --gin: #dadcce;
  --olive-haze: #8e876f;
  --coffee: #6e6856;
  --camouflage: #504937;
  --cocoa-brown: #302a1b;
  --apricot: #e98d72;
  --japonica: #d46c55;
  --mojo: #be4a37;
  --tabasco: #a82714;
  --green: #005a00;
  --fern: #004200;
  --fir: #002900;
  --moss: #001100;
  --pure-snow: #ffffff;
  
  --font-family: "Avenir Next", "Montserrat", sans-serif;
  --font-family-condensed: "Avenir Next Condensed", sans-serif;
  --font-family-alt: "Spectral", serif;
  --font-family-display: var(--font-family);
  --font-family-text: var(--font-family);
  --font-family-system: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  --font-family-mono: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  --text-scale-ratio: 1.125;
  --font-size-xxxx-display: 2.887rem;
  --font-size-xxx-display: 2.887rem;
  --font-size-xx-display: 2.566rem;
  --font-size-x-display: 2.027rem;
  --font-size-display: 1.802rem;
  --font-size-xxxx-large: 1.602rem;
  --font-size-xxx-large: 1.424rem;
  --font-size-xx-large: 1.602rem;
  --font-size-x-large: 1.424rem;
  --font-size-large: 1.266rem;
  --font-size-medium: 1.125rem;
  --font-size: 1rem;
  --font-size-small: 0.889rem;
  --font-size-x-small: 0.79rem;
  --font-size-xx-small: 0.6rem;
  
  --line-height-text: 1.3;
  --line-height-display: 1.125;
  --line-height-alt: 1.25;
  --line-height: 1;
  
  --border-radius-x-small: 0.25rem;
  --border-radius-small: 0.5rem;
  --border-radius-medium: 0.75rem;
  --border-radius-large: 1rem;
  --border-radius-circle: 50%;
  --border-width-hairline: 1px;
  --border-width-thin: 2px;
  --border-width-thick: 4px;
  --border-style-thin: var(--border-width-hairline) solid var(--camouflage);
  --border-style-thick: var(--border-width-thick) solid var(--camouflage);
  --border-style-focus: var(--border-width-hairline) dotted var(--apricot);
  --max-width: 90rem;
  --min-width: 60rem;
  --spacing-xx-small: 0.125rem;
  --spacing-x-small: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing: 0.75rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-x-large: 2rem;
  --spacing-xx-large: 3rem;
  --bp-x-small: 18.75em;
  --bp-small: 30em;
  --bp-medium: 48em;
  --bp-large: 64em;
  --bp-x-large: 75em;
  --bp-xx-large: 87.5rem;
  --standard-left-margin: 2.027rem;
}




	a:link {
	  color: var(--coffee);
	  /* text-decoration: underline; */
	  /* text-decoration-color: white; */
	}

	a:visited {
	  color: var(--moss);
	  text-decoration: underline;
	}

	a:hover,
	a:focus {
	  color: var(--green);
	  text-decoration: underline;
	}

	a:active {
	  color: var(--white);
	
	}

	
.logo {
  margin-top: var(--spacing-medium);
  max-width: 125px;
  /* margin-inline: auto; */
  margin-left:var(--standard-left-margin);
  margin-bottom:0.027rem;
}

@media (min-width: 40em) {
	.logo {
	max-width: 250px;
	}
}

img {
  max-width: 100%;
  height: auto; /* Ensures the image maintains its aspect ratio */
  display: block; /* Removes any extra space that might appear below the image */
}


h1 {
  font-weight: var(--font-weight-extra-bold);
  font-size: var(--font-size-xx-display);
  color: var(--wild-sand);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: darkgreen;
  line-height:.86;
  margin-top:0.5rem;
  margin-bottom:2.027rem;
  margin-left:var(--standard-left-margin);
}

ul {
  list-style:none;
  list-style-type:none;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-small);
  line-height: var(--line-height-alt);
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  
}

.aside_text {
margin-left:var(--standard-left-margin);
color: var(--wild-sand);
}

.footer_text {
font-size: var(--font-size-xx-small);
margin-left:var(--standard-left-margin);
}



@media (min-width: 64em) {
  :root {
    --font-size-xxxx-display: 4.624rem;
    --font-size-xxx-display: 4.11rem;
    --font-size-xx-display: 3.653rem;
    --font-size-x-display: 2.887rem;
    --font-size-display: 2.566rem;
    --font-size-xxxx-large: 2.027rem;
    --font-size-xxx-large: 1.802rem;
    --font-size-xx-large: 1.602rem;
    --font-size-x-large: 1.424rem;
    --font-size-large: 1.266rem;
    --font-size-medium: 1.125rem;
    --font-size: 1rem;
    --font-size-small: 0.889rem;
    --font-size-x-small: 0.79rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* 1 */
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: inherit;
}

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


.montserrat-extra-light {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}


body {
  font-family: var(--font-family-text);
  font-size: var(--font-size);
  line-height: var(--line-height-text);
  color: var(--coffee);
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  }
 
@media (min-width: 40em) { 
	body {
	width: 100vw;
    height: 97vh;
	/* The grid system goes here... */
			display: grid;
			/* min-height: 100vh; */
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-column-gap: 2px;
			grid-row-gap: 2px;
			/* align-content: start; */
			margin: var(--spacing-large);
			align-items: end;
			
		  }
  
		header {
			grid-area: 1 / 1 / 2 / 2;
			align-self: start;
			/* overflow: auto; */
			/* justify-self: start; */
		  }

		nav {
			grid-area:  1 / 4 / 2 / 5;
			justify-self: end;
			align-self: end;
			align-items: baseline;
		  }
  
		main {
			grid-area:  1 / 2 / 4 / 4;
			align-self: start;
			/* overflow: auto; */
		  }
  
		aside {
			grid-area:  2 / 1 / 4 / 2;
			align-self: start;
			/* overflow: auto; */
		  }
  
		footer {
			grid-area: 4 / 1 / 5 / 2;
			align-self: end;
			background-color: #fff;
		
		  }
}
	  
.itin {
margin: auto;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
color: RED;
padding: 2px 14px;
text-align: left;
text-decoration: none;
display: inline-block;
width: 100%;
}

.nav_table {
opacity: 0.7;
display: block;
margin-right:2rem;
padding: 2px;
text-align: right;
background-color: var(--pure-snow);
border: 1px solid var(--snow-drift);
border-radius: 3px;
}

.align_right {
margin-left: auto; 
margin-right: 0;
border: 1px solid #000;
border-radius: 3px;
}

.lede {
 font-family: var(--font-family-text);
  font-size: var(--font-size);
  line-height: var(--line-height-text);
  color: var(--coffee);
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;

}

main > article {
  max-width: 65ch;
  min-height: 70vw;
  margin-left: var(--spacing-large);
}