body,
header {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f4f4f4;
}

.navbar {
    background-color: #2c3e50;
    overflow: hidden;
}

.navbar-item {
    float: left;
    display: block;
    color: #ecf0f1;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.navbar-current-item {
    background-color: #3498db;
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 5px;
}

.navbar-item:hover {
    background-color: hwb(204 0% 15%);
    color: white;
    box-shadow: inset 0 0 1px black;
}

.navbar-current-item:hover{
    background-color: hwb(204 0% 45%);
    color: white;
    box-shadow: inset 0 0 1px black;
}


.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.canvas-container {
  margin: 0; /* Remove default margin */
     padding: 0; /* Remove default padding */
 }
 
 #drawing-canvas {
     border: 1px solid black;
     background-color: white;
     box-sizing: border-box; /* Include border in width and height calculations */
 }

.toolbox button {
  margin-bottom: 10px;
}

.toolbox label {
  margin-left: 10px;
}

.tools-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.toolbox {
  padding: 20px;
  background-color: #f0f0f0; /* Light gray color */
  border: 1px solid black;
  border-radius: 10px;
  margin-right: 20px;
}

.color-palette {
  border: 1px solid black;
  cursor: crosshair;
  width: 400px; /* Increased width */
}