<style>
	
	/* Star is the universal CSS selector and it applies to all elemments */
	* { box-sizing: border-box;}      /*Combine all padding and edges */
	
	body {
		background-color: #1aa3ff ;
	}
	
	/* dot to start indicates an HTML class selector */
	.myButton {
		background-color: lightblue;
		color: black;
		padding: 1px;
		box-shadow: 0px 3px 5px #333;
		text-align: center;
		height: 60px;
		font-size: 3vw;
		width: 8vw;
		display: inline-block;
	}
	
	.startButton {
		background-color: lightblue;
		color: black;
		padding: 1px;
		box-shadow: 0px 3px 5px #333;
		text-align: center;
		height: 60px;
		font-size: 2vw;
		width: 20vw;
	}
	
	.endButton {
		background-color: lightblue;
		color: black;
		padding: 1px;
		box-shadow: 0px 3px 5px #333;
		text-align: center;
		height: 40px;
		font-size: 2vw;
		width: 14vw;
		display: inline-block;
	}
	
	.modeButton {
		background-color: lightgreen;
		color: black;
		padding: 1px;
		box-shadow: 0px 3px 5px #333;
		text-align: center;
		height: 40px;
		font-size: 2vw;
		width: 14vw;
		display: inline-block;
	}
	
		
	.guesses {
		background-color: white;
		color: black;
		text-align: center;
		height: 40px;
		font-size: 2vw;
	}
	
	.grid {
		display: grid;
		grid-template-columns: 9vw 9vw 9vw 9vw;
		grid-template-rows: 6vw;
		background-color: lightblue;
		padding: 1vw;
		width: 55vw;
		justify-content: center;
		grid-gap: 2vw 2vw;
	}	
	
	.grid-item {
		background-color: yellow;
		border: 0.5vw solid darkblue;
		padding: 1vw;
		font-size: 1.8rem;
		text-align: center;
		color: black;
		width: 4rem;		/* width based on browser default size */
		font-size: 3vw

	}
	
	/* Hash to start indicates an id selector */
	#keyboard {
      position: relative;
	  margin: auto;
	  margin-top: 15px;
      width: 60%;
      height: 550px;
      border: 3px solid green;
      background-color: white;
      padding: 15px;
      box-shadow: 5px 10px;
      text-align: center;
	  float: center;
  }
  
  @media only screen and (max-width: 400px){
	
		#keyboard {width: 95%}
		
		.myButton {font-size: 3rem;
					width: 14vw;}
		
		.startButton {font-size: 5vw;
						width: 50vw}
						
		.endButton {font-size: 5vw;
				width: 33vw}
				
		.modeButton {font-size: 5vw;
			width: 33vw}
				
		.guesses {font-size: 1.5rem; }
		
		.grid { width: 80vw; 
				grid-template-columns: 15vw 15vw 15vw 15vw;
				grid-template-rows: 17vw;}
				
		.grid-item { width: 3rem;
					font-size: 3rem; }
		
	}	
	
	</style>