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

body{
	background-color: none;
}

h1, h2, h3, h4, p{ /*mobile first*/
	font-weight: normal;
	margin: 0;
	padding: 0;
	/*all: unset;*/
	font-family: "mess";
	color: #000000;
	text-align: left;
	font-size: 16px;
	line-height: 1.8;
	word-spacing: -0.15rem;
	letter-spacing: -0.01rem;
	border: 0px solid plum;
}


a:link, a:visited{
	text-decoration: none;
	color: none;

}

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

.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: 0;
	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: 1rem;/*distance btwn nav and content*/
	margin: 1rem 0.5rem 1rem 0.5rem;
	border: 0px solid teal;
}

.flexbox-1 {
	flex: 0 0 auto;

	  border: 0px solid cornflowerblue;
}

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

	border: 0px solid cornflowerblue;

	width: 75%;
	max-width: 75vw;
}

.cssgrid {
	display: grid;
	gap: 1rem;
}

.grid-1 {
	grid-template-columns: 1fr;
	border: 0px dotted green;
}

.grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	border: 0px dotted palevioletred;
}

.card {
	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: 0rem;

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

  }

/* phones/tablet*/
@media screen and (max-width: 900px) {
	/*h1, h2, h3, h4, p {
		font-size: 14px;
		line-height: 1.8;
		word-spacing: -0.15rem;
		letter-spacing: 0rem;
	}*/

	.flexbox-2 {
		width: 100%;
	max-width: 100vw;
	border: 0px solid green;
	}
	body{
	background-color: none;
}
.cssgrid.grid-2 {
			grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	}

}