html, body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: transparent !important;
}

h1 {
    margin-bottom: 20px;
}

#drawCanvas {
    border: 2px solid #000;
    cursor: crosshair;
    position: absolute;
    background-color: transparent !important;
}

#canvasContainer {
    position: relative; 
    width: 800px; 
    height: 600px; 
    margin-bottom: 20px; 
    display: flex; 
    justify-content: center;
    align-items: center;
    background-color: transparent !important;
}

canvas {
    background-color: transparent !important;
}

#infobar {
    display: flex;
    margin-bottom: 30px;
}

#infobar button {
    background-color: #e1e1e188;
    color: rgb(96, 96, 96);
    border: none;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
}

#toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: rgba(84, 190, 255, 0.613);
    padding: 20px;
    border-radius: 10px;
}

#toolbar button {
    background-color: #ffffff;
    color: rgb(12, 115, 179);
    border: none;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
}