/* Import Google Font - Poppins */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

    /* Reset default margin, padding, dan mengatur box-sizing ke border-box untuk konsistensi layout */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins sebagai font utama */
    }

    /* Styling untuk elemen body */
    body {
        display: flex;              /* Mengatur body sebagai flexbox untuk tata letak */
        align-items: center;        /* Pemosisian secara vertikal di tengah */
        justify-content: center;    /* Pemosisian secara horizontal di tengah */
        min-height: 100vh;          /* Menentukan tinggi minimum 100% tinggi viewport */
        background: #4A98F7;        /* Warna latar belakang */
    }

    /* styling untuk container utama */
    .container{
        display: flex;
        width: 100%;
        gap: 10px;
        padding: 10px;
        max-width: 1050px;
    }

    /* Styling untuk section utama */
    section {
        background: #fff;
        border-radius: 7px;
    }

    /* Styling untuk setiap elemen dalam aplikasi */
    .tools-board {
        width: 210px;  /* Menentukan lebar tetap untuk panel alat */
        padding: 15px 22px 0;
    }

    /* Styling untuk bagian alat gambar */
    .tools-board .row {
        margin-bottom: 20px;        /* Memberikan jarak antar baris */
    }

    .row .options {
        list-style: none;           /* Menghilangkan bullet list */
        margin: 10px 0 0 5px;
    }

    .row .options .option {
        display: flex;
        cursor: pointer;
        align-items: center;
        margin-bottom: 10px;
    }

    /* Efek hover dan active pada ikon alat */
    .option:is(:hover, .active) img{
        filter: invert(17%) sepia(90%) saturate(3000%) hue-rotate(900deg) brightness(100%) contrast(100%);
    }

    /* Styling teks dalam opsi alat */
    .option :where(span, label) {
        color: #5A6168;
        cursor: pointer;
        padding-left: 10px;
    }

    .option:is(:hover, .active)  :where(span, label) {
        color: #4A98F7;
    }

    /* Styling untuk checkbox fill-color */
    .option #fill-color {
        cursor: pointer;
        height: 14px;
        width: 14px;
    }

    /* Warna label berubah saat checkbox dicentang */
    #fill-color:checked ~ label {
        color: #4A98F7;
    }

    /* Styling untuk slider ukuran alat */
    .option #size-slider {
        width: 100%;
        height: 5px;
        margin-top: 10px;
    }

    /* Styling untuk pemilihan warna */
    .colors .options {
        display: flex;
        justify-content: space-between;
    }

    .colors .option {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        margin-top: 10px;
        position: relative;
    }

    /* Warna default yang tersedia */
    .colors .option:nth-child(1) {
        background-color: #fff;
        border: 1px solid #bfbfbf;
    }

    .colors .option:nth-child(2) {
        background-color: #000;
    }

    .colors .option:nth-child(3) {
        background-color: #e02020;
    }

    .colors .option:nth-child(4) {
        background-color: #6DD400;
    }

    .colors .option:nth-child(5) {
        background-color: #4A98F7;
    }

    /* Efek tampilkan pada warna yang dipilih */
    .colors .option.selected::before {
        position: absolute;
        content: "";
        left: 50%;
        top: 50%;
        height: 12px;
        width: 12px;
        background: inherit;
        border-radius: inherit;
        border: 2px solid #fff;
        transform: translate(-50%, -50%);
    }

    /* Styling tambahan untuk warna putih yang dipilih */
    .colors .option:first-child.selected::before {
        border-color: #ccc;
    }

    /* Styling untuk color picker */
    .option #color-picker {
        opacity: 0;
        cursor: pointer;
    }

    /* Styling tombol di dalam tools-board */
    .buttons button {
        width: 100%;
        color: #fff;
        border: none;
        outline: none;
        padding: 11px 0;
        font-size: 0.9rem;
        margin-bottom: 13px;
        background: none;
        border-radius: 4px;
        cursor: pointer;
    }

    /* Styling tombol Clear Canvas */
    button.clear-canvas {
        color: #6C757D;
        border: 1px solid #6C757D;
        transition: all 0.3s ease;
    }

    .clear-canvas:hover {
        color: #fff;
        background: #6C757D;
    }

    /* Styling tombol Save Image */
    .buttons .save-img {
        background: #4A98F7;
        border: 1px solid #4A98F7;
    }

    /* Styling untuk drawing board (tempat menggambar) */
    .drawing-board {
        flex: 1;
        overflow: hidden;
    }

    .drawing-board canvas {
        width: 100%;
        height: 100%;
    }