:root {
--bgmain: lightgray; 
--txtmain: black;
--bgcon: #252525; /* 37 37 37 dark gray*/
--txtcon: white;

}


body {
	background-color: var(--bgmain);
	background-image: url("img/dvdr/lacecreambow.png"), url("img/dvdr/lacecreaml.png"), url("img/dvdr/lacecreamr.png"), url("img/dvdr/lacecreamb.png"), radial-gradient(circle, var(--bgcon), 0.8px, transparent 0.8px), radial-gradient(circle, var(--bgcon), 0.8px, transparent 0.8px);
	background-size: auto 65px, 65px auto, 65px auto, auto 65px, 5px 20px, 20px 5px; /*(anything first is on top layer) left runner, right runner, radial circles x, radial circles y*/
	background-position: top center, top left, top right, center bottom, -2.5px -10px, -10px -2.5px;
	background-repeat: repeat-x, repeat-y, repeat-y, repeat-x, repeat, repeat;
	background-attachment: fixed, fixed, fixed, fixed, fixed, fixed; /*fixes bg to viewport, not the page when scrolling */

	/*background: #191919 url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7a5a3db7-fb07-4532-aa4c-93f5a5d5d651/d9y6rvp-08b4238f-9618-4491-b5eb-0c44316bd858.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi83YTVhM2RiNy1mYjA3LTQ1MzItYWE0Yy05M2Y1YTVkNWQ2NTEvZDl5NnJ2cC0wOGI0MjM4Zi05NjE4LTQ0OTEtYjVlYi0wYzQ0MzE2YmQ4NTguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.SmaWsmzK35og1W_5vLk84v3BfGjVc4zfGr1_rzha0Ko") no-repeat fixed center;
	background-size: cover; /*scales bg proportionally, parts will be cropped*/
	justify-content: center;
	overflow: auto;
	margin: 1%;
	align-items: center; /*centers items on the cross-axis (y by default)*/
	font: 15px / 18px, Arial;
	text-align: center;
	color: blue;
	
	
}	







a:link {
  text-decoration: none;
  color: LightCoral;
}
a:visited {
  text-decoration: none;
 color: blue;
}

a:hover {
  text-decoration: underline;
  color: mediumspringgreen;
}

a:active {
  text-decoration: underline;
  background-color: Gold;
}




.window {
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--bgcon);
	}

/*title bar on all windows*/
.bar {
	background-image: linear-gradient(to right, rgb(0 0 0 / 75%), rgb(0 0 0 / 75%));
	padding: 0px;
	font: 15px/18px 'Courier New';

	color: var(--txtcon);
}



/*content text box, center aligned*/
.cbox {
	background-image: linear-gradient(to right, rgb(211 211 211 / 80%), rgb(211 211 211 / 80%));
	padding: 10px;
	font: 15px/18px Arial;

	text-align: center;
	color: var(--txtmain);
}


.promptbox {
	background-image: linear-gradient(to right, rgb(211 211 211 / 80%), rgb(211 211 211 / 80%));
	padding: 10px;
	font: 15px/18px 'Courier New';

	text-align: left;
	
	color: var(--txtmain);
}



.txtpadl {
	padding: 0px 0px 0px 2px;
}

.txtpadr {
	padding: 0px 2px 0px 0px;
}

.txtalignl {
	text-align: left;
	}

.txtalignr {
	text-align: right;
	}

img {
  max-width: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
}


.flex {
  display: flex;
  flex-flow: row wrap; 
  justify-content: center; /*horizonal axis align items to the center of page*/
  align-items: center; /*vertical aligns content inside this flex to the center*/
}


.grid {  
display: grid;
  grid-template-columns: 1fr 3fr 1fr; /*adds #cols based on frame size*/
  grid-template-rows: auto; /*1fr 1fr .1fr 1fr #rows, add as many as you want*/
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
/*	"lbg header header header rbg" */
/*	"lbg nav nav nav rbg" */
	"top top top"
    "left main right"
    "left2 . . "
    "footer footer footer";
  width: 100%;
  height: 100%;
}

/*header {grid-area: header; } */
/*nav { grid-area: nav; } */
.top { grid-area: top; }
footer { grid-area: footer; }


main { grid-area: main; }

.left { grid-area: left; }
.left2 { grid-area: left2; }

.right {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  /* gap: 0px 0px; */
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". . ."
    ". . .";
  grid-area: right;
}



	

ul.navbar {

	list-style-type: none; /*removes bullets*/
	margin: 0; /*removes margin to outside of this whole list*/
	padding: 0; /*padding between/around the item*/
	position: static; /*stays inside theis containr, fixed makes it sticky*/
	overflow: hidden; /*prevents list from spilling out*/
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: center;
}

.navbar li {
	/* float: left; smooshes everything to each other towards the left */
	padding: 2px 2px;
}	

.navbar li a {
	text-decoration: none;
	font: 15px/18px 'Courier New';

	background-color: var(--bgcon);
	color: var(--txtcon);
	

}

.navbar ul li a:hover:not(.active) {
  	background-color: var(--bgcon);
	color: var(--txtcon);
}

ul.navbar li a:hover:not(.active) {background-color: #111;}

ul.navbar li a.active {
  background-color: var(--bgmain);
  color: var(--txtmain);
  border: 1px;
}

ul.navbar li.right {float: right;}

@media screen and (max-width: 500px) {
  ul.navlist li.right, ul.navlist li {float: left;}
	.grid {grid-template-columns: repeat(1,1fr);

}





/*

.navlist {
	list-style-type: none; /*removes bullets*
	margin: 0; /*removes margin to outside of this list*
	padding: 0; /*padding between/around the item*
	justify-content: center; 
	overflow: hidden; /*prevents list from spilling out*
}	



.navlist li {float: left;}

.navlist li a {
  display: block; /*Allows us to specify padding, height, width, and margins to <a>*
  color: white;
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
}

ul.navlist li a:hover:not(.active) {background-color: #111;}

ul.navlist li a.active {background-color: #04AA6D;}











/*
pre {
	font-family: 'Courier New', monospace;
	font-weight: lighter;
	}
*/


	/*fake popup text click, center aligned*/

/*
button {
	border-width: 2px;
	border-style: outset;
	border-color: black;
	background-color: #4424D6;
	padding: 5px;
	text-align: center;
	 stable;
	color: Silver;
}
*/

/*

.divider {
  justify-content: center; 
  align-items: center; 
  object-fit: cover;
 }

*/


/*
.flexcol {
  display: flex;
  flex-flow: column wrap;
  justify-content: center; /*horizonal axis align items to the center of page*/
  align-items: center; /*vertical aligns content inside this flex to the center*/
}