*{
	box-sizing: border-box;
	
}

body {
	font-size:100%;
  background: white;
}

.cont {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
  max-width: 960px;
  margin: 0 auto;
}

.instructions {
	width:100%;
	font-family: "Open Sans";
	font-size: 1.25em;
	letter-spacing: .025em;
	font-weight: 100;
	text-align: center;
	margin:0px auto 10px;

}

.gridCont {
	width: 50%;
  aspect-ratio: 3/4;
	background-color: mistyrose;
	display: flex;
	flex-wrap: wrap;
	align-content:flex-start;
	border: 5px solid black;
	margin-bottom: 20px;
}

.gridRow {
	/*height:25%;*/
	border-bottom:5px solid black;
	width: 100%;
	margin:0;
	padding: 0;
	display: flex;			
}

.cell{
	position: relative;
	height: 100%;
	background: white; 
	border-right:5px solid black;
	/*gold*/
}

.cell:last-child {
	border-right: 0px; 
}

.gridRow:last-child {
	border-bottom: 0px;
}

.slidersCont {
	margin-left:40px;
	width: 40%;
}

.slidersCont  p {
	font-family: "Open Sans";
	margin: 0;
	font-size: 1em;
}

.slidersCont  p {
	font-family: "Open Sans";
	margin-top:20px;
	font-size: 1em;
}

.slidersCont  p:first-child {
	margin-top: 0px;
} 

.note{
	font-size: .75em;
	color: #aeaeae;
}

#rowVal, #colVal {
	font-weight: 700;
}

.slider {
  width: 100%;
  margin: 20 0 0 0;
  appearance: none;
  -webkit-appearance: none;  /* Override default CSS styles */

  height: 5px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.6; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    border-radius: 100%;
    background: #5e6864; /* Grey background */
    cursor: pointer; /* Cursor on hover */


}

.slider::-moz-range-thumb {
    width: 5px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    background: #5e6864; /* Grey background */
    cursor: pointer; /* Cursor on hover */
}

.labels {
	width: 400px;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	font-family: "Open Sans";
	font-size: .75em;
	font-weight: 100;
	color: #5e6864;	
	opacity: .6;
}

.slider:hover + .labels {
	opacity: 1;
}

h1 {
	font-family: "Open Sans";
	font-size: 4em;
	margin-bottom: 0px;
	margin-top: 0;
	padding: 0;
	display: flex;
	justify-content: center;	
}

#generate {
  background-color: #346caf;
  border: 0;
  border-radius: 4px;
  color: rgba(252, 252, 252, .95);
  margin-top: 2rem;
  font-size: 1.125em;
  font-family: "Open sans";
  padding: 0.75em 1em;
}

#generate:hover {
  background-color: #2A578D;
}

#generate:active {
  background-color: #172E4A;
}

@media screen and (max-width: 970px) {
	
	h1 {
		font-size:3.25em;
		margin: 0;

	}

	.cont {
		margin: 0px;
	}

	.instructions {
		font-size: 1em;
		margin: 0px 10px 10px	 ;
	}
	

	.slidersCont {
		width: 80%;
		margin: 15px ;
	}

	.labels {
		width: 100%;
	}


} 


@media screen and (max-width: 728px) {
	.gridCont {
		width: 450px;
		height: 675px;
	}

	.slidersCont  p {
	font-family: "Open Sans";
	margin-top:20px;
	font-size: .95em;
	}


}

@media screen and (max-width: 600px) {
	.gridCont {
		width: 300px;
		height: 450px;
	}

	.slidersCont  p {
	font-family: "Open Sans";
	margin-top:20px;
	font-size: .95em;
	}


}