body {
            font-family: Arial, sans-serif;
            text-align: left;
            background-image: url(img/bg.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
            user-select: none;
        }

        h1 {
            margin-top: 20px;
        }

        #canvas-container {
            width: 90%;
            max-width: 500px;
        }

        .quBox {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            background-color: #f4f4f4;
            margin-top: 10px;
            font-size: 20px;
            background: #fff;
            padding: 20px 0px;
            border-radius: 10px;
            border: 2px solid #52d1e8;
            height: auto;
        }

        canvas {
            border: 1px solid #000;
            width: 100%;
            height: auto;
        }

        #palette {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        #colorPicker {
            margin-bottom: 20px;
        }

        #brush-size-container {
            margin: 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #brush-size-slider {
            width: 200px;
            margin-left: 10px;
        }

        @media (max-width: 600px) {
            #brush-size-slider {
                width: 150px;
            }
        }

        #buttons-container {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        .action-button {
            background-image: url(img/button-bg.png);
            width: 108px;
            height: 38px;
            border-style: none;
            font-size: 20px;
            cursor: pointer;
            margin-right: 5px;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        .start-button {
            background-image: url(img/startBtn.png);
            background-color: #00000000;
            width: 100px;
            height: 101px;
            border-style: none;
            cursor: pointer;
        }

        .heading {
            background: #fff;
            color: #000;
            padding: 10px 10px;
            border-radius: 10px;
            margin-bottom: 10px;
            border: 2px solid #52d1e8;
        }