#grid,
#sidePanel {
    /*puts the grid and side panel side by side*/
    display: inline-block;

    /*makes the grid and side panel aligned at the top*/
    vertical-align: middle;
    margin: 0.8px, auto;
}

html {
    text-align: center;
    display: inline-block;
    cursor: default;
}

.brush .square {
    cursor: url("Pencil.cur"), auto
}

.eraser .square {
    cursor: url("Eraser.cur"), auto
}

.dropper .square2 {
    cursor: url("cursor.cur"), auto;
}


#grid {
    /*removes empty space between the squares*/
    font-size: 0px;
    border: 1.3px solid black;
    width:280px;
    height: 392.88px;
    /*puts empty space to the right of the grid to separate it from the side panel*/
    margin-right: 20px;
}

.square {
    /*styling for all squares*/
    /*a dot is used to select all elements with a specified class*/
    /*display: inline-block puts the squares within a row side by side*/
    display: inline-block;
    vertical-align: top;
    /*gives dimensions and a border to a square*/
    width:28px;
    height: 28px;
    border-radius: 0px;

}



.button {
    width: 90px;
    height: 45px;
    border: 2.1px solid black;
    margin: 4px;
    font-weight: bolder;
    font-size: 10px;
    vertical-align: top;
    display: inline-block;
    
}



.square2  {
    /*styling for all squares*/
    /*a dot is used to select all elements with a specified class*/
    /*display: inline-block puts the squares within a row side by side*/
    display: inline-block;
    text-size: 20px;
    /*gives dimensions and a border to a square*/
    width: 29px;
    height: 29px;
    border: 0.7px solid black;
    border-radius: 3px;
}

#brushTool img {
    width: 26px;
    height: 26px;
    cursor: url("cursor.cur"), auto;
    display: inline-block;
}

#eraserTool img {
    width: 26px;
    height: 26px;
    display: inline-block;

    cursor: url("Eraser.cur"), auto
}

h1 {
    font-size: larger;
}

#selected {
    width: 410px;
    height: 24px;
    display: inline-block;
    font-family: monospace;
    font-size: 10px;
}

font {
    text-decoration: underline;
    font-size: 20px
}

#colorPallette {
    margin-top: 7px;
}

#canvas {
    width: 0;
    height: 0;
}

#tool{
    font-family: monospace;
    font-size: 20px;
}