* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

html, body {
	/*font-family: Arial;*/
	height: 100%;
	/*width: 100%;
	margin: 0;*/
    /*overflow: hidden;  Prevent scrollbars */
}

#log {
	height: 200px;
	width: 600px;
	overflow: scroll;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.container {
		display: flex;
		height: 100vh;
		width: 100vw;
		min-height: 0; /* Allow children to shrink */
		min-width: 0;
	}

/*
	Canvas {
		flex-grow: 1;
		flex-shrink: 1;
		min-width: 0;
		min-height: 0;
		background-color: white;
		display: block;
	}*/

canvas {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    min-height: 0;
    background-color: white;
    display: block;
    width: 100vw;      /* Add this */
    height: 100vh;     /* Add this */
    touch-action: none; /* Add this to prevent browser gestures on touch devices */
}

	.toolbar {
		width: 80px; /* Fixed width for toolbars */
		background-color: #2d2d2d; /* Dark gray background for toolbars */
		display: flex; /* Flexbox for arranging buttons */
		flex-direction: column; /* Vertical arrangement of buttons in toolbar */
		justify-content: space-between; /* Space buttons evenly */
		z-index: 1; /* Float above the canvas */
	}
	.left {
		width: 80px;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.right {
		width: 80px;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.toolbar-button {
		width: 100%;
		height: 80px;
		border-radius: 12px;
		box-sizing: border-box;
		background: #222; /* Default background for all buttons */
		border: 2px solid #444; /* Default border for all buttons */
		color: #fff; /* Icon color */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2em;
		flex: 1 1 0; /* Make buttons fill available space in toolbar */
	}

	.toolbar-button:hover {
		background-color: #666; /* Change button color on hover */
	}
  
.toolbar-button.selected {
    background-color: #444;   /* Lighter than #222, darker than #666 */
    /* You can tweak this value for your preferred shade */
    box-shadow: 0 0 0 2px #888 inset;
}


@media (max-width: 700px) {
  .container {
			flex-direction: column; /* Stack toolbars vertically */
			min-height: 0; /* Allow children to shrink */
			height: 100vh;
		}

		.left {
			order: 1; /* Top */
			width: 100%; /* Full width at the bottom */
			height: 80px;
			position: relative; /* Change to relative positioning for stacking */
		}

		.right {
			order: 3; /* Keep right toolbar at the top */
			width: 100%; /* Full width at the top */
			height: 80px;
			position: relative; /* Change to relative positioning for stacking */
		}

		.toolbar {
			flex-direction: row; /* Keep buttons horizontal */
			height: 60px;
			width: 100%;
		}

		canvas {
			order: 2;
			flex-grow: 1;
			flex-shrink: 1;
			width: 100%;
			min-height: 0;
			margin: 0;
			display: block;
		}
    
}

.toolbar.left .toolbar-button.color-blue   { border-color: #2196f3; }
	.toolbar.left .toolbar-button.color-red    { border-color: #f44336; }
	.toolbar.left .toolbar-button.color-green  { border-color: #4caf50; }
	.toolbar.left .toolbar-button.color-cyan   { border-color: #00bcd4; }
	.toolbar.left .toolbar-button.color-purple { border-color: #9c27b0; }
	.toolbar.left .toolbar-button.color-gray   { border-color: #888; }
	.toolbar.left .toolbar-button.color-orange { border-color: #ff9800; }
	.toolbar.left .toolbar-button.color-yellow { border-color: #ffeb3b; }

  /* Lighter hover colors for left toolbar buttons */
.toolbar.left .toolbar-button.color-blue:hover   { background-color: #6ea8fe; }
.toolbar.left .toolbar-button.color-red:hover    { background-color: #ff7961; }
.toolbar.left .toolbar-button.color-green:hover  { background-color: #80e27e; }
.toolbar.left .toolbar-button.color-cyan:hover   { background-color: #4fd8eb; }
.toolbar.left .toolbar-button.color-purple:hover { background-color: #d05ce3; }
.toolbar.left .toolbar-button.color-gray:hover   { background-color: #bdbdbd; }
.toolbar.left .toolbar-button.color-orange:hover { background-color: #ffd180; }
.toolbar.left .toolbar-button.color-yellow:hover { background-color: #fff59d; color: #222; }

/* --- Place these at the very end of your CSS file --- */
.toolbar.left .toolbar-button.color-blue.selected   { background-color: #2196f3 !important; border-color: transparent !important; box-shadow: none !important; }
.toolbar.left .toolbar-button.color-red.selected    { background-color: #f44336 !important; border-color: transparent !important; box-shadow: none !important; }
.toolbar.left .toolbar-button.color-green.selected  { background-color: #4caf50 !important; border-color: transparent !important; box-shadow: none !important; }
.toolbar.left .toolbar-button.color-cyan.selected   { background-color: #00bcd4 !important; border-color: transparent !important; box-shadow: none !important; }
.toolbar.left .toolbar-button.color-purple.selected { background-color: #9c27b0 !important; border-color: transparent !important; box-shadow: none !important; }
.toolbar.left .toolbar-button.color-gray.selected   { background-color: #888    !important; border-color: transparent !important; box-shadow: none !important; }
.toolbar.left .toolbar-button.color-orange.selected { background-color: #ff9800 !important; border-color: transparent !important; box-shadow: none !important; }
.toolbar.left .toolbar-button.color-yellow.selected { background-color: #ffeb3b !important; border-color: transparent !important; color: #222 !important; box-shadow: none !important; }