@charset "UTF-8";
/* CSS Document */
/*search on "skin", then change values*/

.top_container{
	display:grid;
	grid-template-rows: 1fr, 1fr;
	background-color: rgb(100,100,100);
}

#h1_inline_center{
	grid-row: 1/2
}

#displayButtons{
	grid-row: 2/2
}

.capture{
	display:grid;
	grid-template-areas: "overlay";
	width: 100%;
	height: 100%;
	grid-template-columns: minmax(0, 20%) minmax(0, 60%) minmax(0, 20%);
	grid-template-rows: 1fr;
	background-color: rgb(200,200,200);
	align-items: center;
}

#holder_1{
	grid-column: 1/2; 
	margin-right:13%;
	min-width: 0;
	max-width: 100%;
	background-color: rgb(175,175,175);
	height: 98%;
	align-self: center;
}

#gridSurrounder{
	grid-area: overlay;
	grid-column: 2/3;
	z-index: 2;
}

.grid-div-h1{
	width: 100%;
	align-self: center;
	justify-self: center;
}

#image{
	opacity: 0.3; 
	place-items: center;
}

#picture-holder{
	grid-area: overlay;
	grid-column: 2/3; /* Place this item in the second column of the parent grid */ 
	margin: auto;
	min-width: 0;
	max-width: 100%;
	height: 98%
	align-self: center;
	justify-content: center;
}

.grid-div-picture-holder{
	width: 100%;
	height: 100%;
	align-self: center;
	justify-self: center;
}

#grid-container-20 
{
	grid-area: overlay;
	grid-column: 2/3; /* Place this item in the second column of the parent grid */ 
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(20, 3fr);
	grid-template-rows: repeat(20, 3fr);
	column-gap: 8px;
	row-gap: 6px;
	background-color: white;
	padding: 0px;
	place-items: center;
	z-index: 2;
}

#grid-container-20 > div 
{
	background-color: rgb(255, 255, 255);
	border: 1% solid rgba(125,125,125,0.3);
	text-align: top;
	text-align: center;
	padding-bottom: 2px;
	font-size: 0.1%;
	font-family:monospace;
}

#grid-container-15
{
	grid-area: overlay;
	grid-column: 2/3; /* Place this item in the second column of the parent grid */  
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(15, 3fr);
	grid-template-rows: repeat(15, 3fr);
	column-gap: 8px;
	row-gap: 8px;
	background-color: white;
	padding: 0px;
	place-items: center;
	z-index: 2;
}

#grid-container-15 > div 
{
	background-color: rgb(255, 255, 255);
	border: 1% solid rgba(125,125,125,0.3);
	text-align: top;
	text-align: center;
	padding-bottom: 2px;
	font-size: 0.1%;
	font-family:monospace;
}

#grid-container-12 
{
	grid-area: overlay;
	grid-column: 2/3; /* Place this item in the second column of the parent grid */  
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(12, 3fr);
	grid-template-rows: repeat(12, 3fr);
	column-gap: 10px;
	row-gap: 10px;
	background-color: white;
	padding: 0px;
	place-items: center;
	z-index: 2;
}

#grid-container-12 > div 
{
	background-color: rgb(255, 255, 255);
	border: 1% solid rgba(125,125,125,0.3);
	text-align: top;
	text-align: center;
	padding-bottom: 2px;
	font-size: 0.1%;
	font-family:monospace;
}

#grid-container-10 
{
	grid-area: overlay;
	grid-column: 2/3; /* Place this item in the second column of the parent grid */
	width: 100%;
	height: 100%;
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, 3fr);
	grid-template-rows: repeat(10, 3fr);
	column-gap: 10px;
	row-gap: 10px;
	background-color: white;
	padding: 0px;
	place-items: center;
	z-index: 2;
}

#grid-container-10 > div 
{
	background-color: rgb(255, 255, 255);
	border: 1% solid rgba(125,125,125,0.3);
	text-align: top;
	text-align: center;
	padding-bottom: 2px;
	font-size: 0.1%;
	font-family:monospace;
}

.grid-div
{
	align-self: center;
	justify-self: center;
	height: 100%;
	width:100%;
	color:black;
	background-color:transparent;
}

.grid-item 
{
	/*align-self: center;*/
	overflow: auto; /* Required for resize to work */
	resize: both; /* Enables resizing in both directions */
}

#holder_2{
	grid-area: overlay;
	grid-column: 3/4; /* Place this item in the second column of the parent grid */ 
	margin-left:13%;
	background-color: rgb(175,175,175);
	min-width: 0;
	max-width: 100%;
	align-self: center;
	height: 98%;
}

.grid-div-h2{
	width: 100%;
	align-self: center;
	justify-self: center;
	margin-left:1%;
}

#wordsToFind{
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(20%, 1fr));
	width: 78%;
	/*background-color:#009; /*skin color*/
	background-color:rgb(100,100,100);
	row-gap: 0.1%;  
}

#wordsToFind2{
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(100%, 1fr));
	width: 100%;
	height: 500px;
	/*background-color:#009; /*skin color*/
	background-color:rgb(100,100,100);
	margin-top:0px;
	overflow: auto; 
	row-gap: 0.1%; 
}

#grid-container{
	width:100%;
	padding-left:0.5%;
	background-color:black;
	margin-left:0%;
	padding-bottom:1.0%;
	height: 70%;
	overflow:auto;
}

.grid-container ::selection {
  background-color: transparent; /* Or match the cell's background color */
  color: inherit; /* Maintain original text color */
}

.grid-div {
    user-select: none;
    -webkit-user-select: none; /* For WebKit browsers */
    -moz-user-select: none;    /* For Firefox */
    -ms-user-select: none;     /* For Internet Explorer/Edge */
}

#wrap{
	/*background-color:#009;*/
	background-color:rgb(100,100,100);
	display:inline;
	width:77%;
	height: 500px;
	margin-left:10%;
	overflow: auto; 
}

#wrap2{
	/*background-color:#009;*/
	background-color:rgb(100,100,100);
	width:100%;
	height: 500px;
	margin-left:0%;
	margin-top: 0%;
	overflow: auto; 
}

body {
	width:100%;
	height:90%;
	/*background-color:#000000;*/
	background-color:rgb(100,100,100);
}

div.displayButtons{
	display:inline-block;
	margin-left:2%;
	margin-right:4%;
	margin-bottom:10px;
	padding:1%;
	width:90.5%;
	height:6%;
	float:left;
	background-color:#000000;
}


h1{
	color: #000000;
	text-align: left;
	padding-left: 1%;
}

h2{
	color: #FFFF00;
	text-align: center;
}