/* compiler.css */

body {
	background-color: rgb(107, 140, 80);	/* The bottom color of background.jpg. */
	/* background-image: url(../images/background.jpg); */
	background-repeat: repeat-x;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 15pt;
	font-weight: normal;
	font-style: normal;
}

h1 { 
    color: black;
	font-size:   40pt;
	/*line-height: 0pt;*/
	font-weight: normal;
	font-style: normal;	
	margin: auto;
	margin-left: 0px;
}
#header {
	display: flex;
	padding: 5px;
	background-color: rgba(42, 91, 11, 0.3);
}
#title {
	text-align: center;
}
#icon {
	width: 100px;
	height: 100px;
}


h2 {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size:   20pt;
	font-weight: normal;
	font-style: normal;	
	margin-bottom: 0px;
}

/*main containers*/
#container {
	margin-left: auto;
    margin-right: auto;
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px;
    justify-content: center;
}
#left {
	/*flex: 1 1; */
	/* margin-left: 20px; */
	/* background-color: aqua; */
	width: 390px;

	margin-left: auto;
    margin-right: auto;
    display: flex; 
    flex-wrap: wrap; 
}
#tinyLeft {
	margin-top: 10px;
	text-align: left;
	/*background-color: pink;*/
	min-width: 200px;
}
#tinyRight {
	margin-top: 10px;
	margin-left: 20px;
	/*flex: 1 1 200px; 
	min-width: 100px;
	margin-right: 0px;*/
	text-align: right;
	/* background-color: darkolivegreen; */
}
#btnCompile {
	font-size: 30pt;
}
#right {
	/* flex: 1 1 275px;  */
	/* margin-right: 20px; */
	/* background-color: blueviolet; */
	/*max-width: 400px;
    max-height: 400px;*/
	width: 600px;

	margin-left: auto;
    margin-right: auto;
    display: flex; 
    flex-wrap: wrap; 
}

input {
	font-size: 14pt;
}

/* Change tab to 4 spaces, actually lets do 1
https://stackoverflow.com/questions/3379091/is-it-possible-to-change-width-of-tab-symbol-in-textarea */
textarea, pre {
    -moz-tab-size : 1;
      -o-tab-size : 1;
         tab-size : 1;

	font-size: 14pt;
}

#taOutput {
	font-family: monospace;
	font-size: 14pt;
	width: 800px;
	background-color: white;
	height: 600px;
	overflow-y:auto;
	margin-top: 10px;
}
#taOuput #centered {
	text-align: center;
}
#taOutput p {
	margin-bottom: 2px;
	margin-top: 0px;
	padding-left: 5px;
}
#taOutput h1 {
	font-family: monospace;
	font-size: 14pt;
	font-weight: bolder;

	margin-bottom: 2px;
	margin-top: 0px;
	padding-left: 5px;
}
#taOutput h2 {
	font-family: monospace;
	font-size: 14pt;
	font-weight: bold;

	margin-bottom: 2px;
	margin-top: 0px;
	padding-left: 5px;
}

#taOutput mark {
	background-color: white;
	margin-bottom: 2px;
	margin-top: 0px;
}
#taOutput .bracket {
	color:darkblue;
}
#taOutput .info {
	color:darkmagenta;
}
#taOutput .address {
	color:darkorange;
}
#taOutput .label {
	color:darkgreen;
}
#taOutput .debug {
	color:gray;
}
#taOutput .error {
	color:red;
}
#taOutput .warning {
	color:rgb(255, 175, 0);
}
#taOutput .heap {
	color:rgb(80, 80, 80);
}

#btnCopy {
	margin-top: 10px;
	margin-right: 10px;
}
#copied {
	margin-top: 10px;
	transition: 3s;
	color: rgba(255, 255, 255, 0);
}
#copied.flash {
	/* display: none; */
	color: rgb(4, 41, 4);
	transition: 0s;
}



#footer { 
	padding: 10px;
	margin-top: 50px; 
	background-color: rgba(42, 91, 11, 0.3);
}

li {
	list-style-type: none;
}