html { /*stops browser webkit stupidly scaling up 1col ptags*/
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@font-face{
	font-family: 'mess';
	src: url('../typefaces/CourierStd.otf');
  }
  @font-face{
	font-family: 'messi';
	src: url('../typefaces/CourierStd-Oblique.otf');
  }

:root {
	--mobile: 15px; /* mobile */
	--tablet: 14px; /* tablet */
	--desktop: 13px; /* desktop */
	--desktopL: 16px;/* desktop+ */

	--lineheight: 1.9em;
	/*Border for testing*/
	--border: 0px;
}

body {
	font-size: var(--desktop);
}

h1, h2, h3, h4, p, footer { /*desktop*/
	font-weight: normal;
	margin: 0;
	padding: 0;
	font-family: "mess";
	color: #000000;
	text-align: left;
	font-size: var(--desktop);
	line-height: var(--lineheight); /* same var used in .cssgrid gap*/
	word-spacing: 0.1em;
	letter-spacing: 0.005em;
	border: 0px solid plum;
}


.icon { /*ensure emoticons stay same width*/
	font-size: var(--desktop);
  	display: inline-block; /* lets you give a fixed width */
  	width: 1.5em;           /* force consistent width */
  	text-align: left; 
}
a:link, a:visited {
	text-decoration: none;
	color: black;

}

h1 a {/*special treatment for h1 link to keep it black*/
	color: black;
}

footer {
	color: grey;
}



.italic { /*any element with class="italic"*/
	font-family: "messi";
}
.underline {/*any element with class="underline"*/
	text-decoration: none;
}
.indent {/*any element with class="indent" for p tags*/
	text-indent: 2em;
}

table, tr, td {
	margin-top: 0em;
	padding: 0;
	border-spacing: 0;
}

.plastic-bag {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start; /*aligns items in main axis*/
	align-items: stretch; /*aligns items in cross axis (stretch is default)*/
	/*align-content: flex-center; not needed with jsut 3 items*/
	gap: 3em;/*distance btwn nav and content*/
	margin: 0.8em 0.5em 1em 0.5em;
	border: var(--border) solid purple;
}

.flexbox-1 {
	flex: 0 0 auto;
	border: var(--border) solid cornflowerblue;
}

.flexbox-2 {
	flex: 1 1 auto;/*width of content*/
	display: grid;
	gap: var(--lineheight);/*control gap when grid-1 and grid-2 meet*/

	border: var(--border) solid cornflowerblue;
	width: 60%; /*Important: This must be same value as the max-width, or else layout gets weird when squeezing*/
	max-width: 60vw;
}

.cssgrid { /*container for .grid-1 or .grid-2*/
	display: grid;
	gap: var(--lineheight);
}

.grid-1 { /*1 column content layout (requires 1 .card container to fill .cssgrid)*/
	grid-template-columns: 1fr;
	border: var(--border) solid green;
}

.grid-2 { /*2 column content layout (requires 2 .card containers to fill .cssgrid)*/
/*grid-template-columns: repeat(auto-fit, minmax(25em, 30em));*/
grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
justify-content: start;
border: var(--border) solid red;
}

.card {
	border: var(--border) solid orange;
}

.card table td {
	border: 0px solid sandybrown;
}

img {
	max-inline-size: 100%;
	display: block;
	border: 0px solid sandybrown;

}

.fixed-box {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	position: fixed;
	bottom: 2vw;     /* distance from bottom */
	right: 2vw;      /* distance from right */
	padding: 0em;

	color: white;
	z-index: -1000;    /* keeps it on top of other stuff */

  }

/* mobile/tablet*/
@media screen and (max-width: 900px) {

	body {
	font-size: var(--mobile);
	}

	h1, h2, h3, h4, p, footer {
		font-size: var(--mobile);
		line-height: 180%;
		word-spacing: 0.1em;
		letter-spacing: 0.005em;
		letter-spacing: 0em;
	}

	.icon { 
	font-size: var(--mobile); /*so it doesn't shrink, and gets bigger in mobile*/
	}

	.plastic-bag {
	gap: var(--lineheight);/*distance btwn nav and content*/
	}

	.flexbox-2 {
	width: 100%; /*Important: This must be same value as the max-width, or else layout gets weird when squeezing*/
	max-width: 100vw;
	}

	.cssgrid.grid-2 {
		grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	}

}

/* large screens */
@media (min-width: 1600px) {
	.plastic-bag { /* set max width and center it all */
		max-width: 1200px;
		margin: auto;
	}
}