/* 25.01.13
/* Remove styling from sonicscribe.html
/* Give a consistent font and font size to the page */
	* {
	font-family: sans-serif;
	font-size: 1em;
	}
/* Give a predicatable body and html element size for further styling */
	body,html {
	width: 99vw;
	height:98vh;
	display: flex;
	margin: 0;
	padding: 5px;
/*	background-color: lightgray; */
	font-size: 16px;
	}
	
	/* Responsive design. Make it work on mobiles and then adjust for wide screen devices later */
	
	/* This sets the flex for the two main sections so that they stack on mobiles */
	.pageContainer {
		width: 97%;
		height: 100vh;
		padding: 0px;
		display: flex; /* use flex to position the two sections below this div */
		flex-direction: column;
		align-content: space-evenly;
		justify-content: space-between; 
/*		background-color: black; */
	}
	
	.pageContainer > section {
		flex-grow: 1;
		width: 100%;
		height:100%;
/*		background-color: lightslategrey; */
/*	   border: solid red 5px; */
	   display: flex;
		flex-direction: column;
		}

	.pageContainer > section > div {
		display: flex;
		align-content: center;
		justify-content: space-between; 
/*		background-color: chocolate; */
/*		border: white solid 3px; */
		flex-grow: 1;
	}
	
	#pickBox {
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly; 
		align-items: center;
		
   }
   
	#pickBox > div {
		min-width:1em;
		height: 1.5em; 
		border-radius: 10px;
		padding: .5em;
		text-align: center;
	}	
	
	#pickButton.orange {
      background-color: orange;
   }
   
   #pickButton.fade-back {
      transition: background-color 2s ease; /* Transition for background color change */
   }
	
	#playBox {
		flex-grow: 2;
		display: flex;
		justify-content: space-evenly; 
		align-items: center;
	}
   #playButton.red {
      background-color: red;
	}
	
	#textBox {
		display: flex; 
		flex-direction: 
		column; align-items: center;
		
	}

   #textBox label {
            display: block;
            margin-bottom: 5px;
        }

    #userText {
            width: 100%;
            max-width: 400px;
        }
	
	button {
		height: 2.5em;
		padding: .125em .125em;
		font-size: 2em;
		border:	black solid 3px;
		border-radius: 10px;
	}
	
	textarea {
		font-size: 2em;
		border: black solid 3px;
		border-radius: 10px;
		width: 75%;
		height: 75%;
		margin: auto;
		vertical-align: middle;
		text-align: center;
	}
	
	.textbutton {
		font-size: 2em;
		border: black solid 3px;
		border-radius: 10px;
		width: 75%;
		height: 75%;
		margin: auto;
		vertical-align: middle;
		text-align: center;
	}
	
	.defButton {
		font-size: 2em;
		border: black solid 3px;
		border-radius: 10px;
		width: 75%;
		height: 75%;
		margin: auto;
		vertical-align: middle;
	}
	
	.green { 
	  background-color: green;
	  color: white;
	  transition: background-color 0.3s;
	}

	.red {
  background-color: red;
  color: white;
	}

/* Notebooks, Tablet and Desktop Screens */
	@media screen and (min-width: 811px) {
		
		body,html {
		width: 99vw;
		height:97vh;
/*		background-color: lightcoral; */
		font-family: sans-serif;
		font-size: 32px;
		}
		.pageContainer {
			flex-direction: row;
			width: 100%;
		}
	}