body{
background-image:url('/site/Gam2/images/Mar_Desenhar_Top_background.png');
background-size:cover;
background-attachment:fixed;
height:100%;
width:100%;
overflow:hidden;
margin:0;
padding:0;
position:fixed;
user-select:none;
}

#main{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100%;
}

.canvas-container{
position:relative;
width:450px;
height:450px;
border:10px solid #3d3c3c;
border-radius:12px;
background:#fff;
overflow:hidden;
}

canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

#imgCanvas{z-index:1;}
#gridCanvas{z-index:2;}

.menu-bar{
display:flex;
flex-direction:column;
width:450px;
background:#3d3c3c;
padding:8px;
border-radius:5px;
margin-top:10px;
color:#fff;
font-family:Open Sans;
gap:3px;   /* antes era 8px */
}

.menu-row{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
min-height:30px;   /* antes era 40px */
}

.logo{
height:40px;
}

button{
height:32px;
border:none;
border-radius:6px;
cursor:pointer;
background:#555;
color:#fff;
padding:0 10px;
font-size:10px;
}

button:hover{
background-color:#777;
}

.grid-presets{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.grid-label{
font-size:13px;
}

.grid-presets button{
width:36px;
height:28px;
padding:0;
}

.save-buttons button{
width:50px;
height:50px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
padding:0;
font-size:0;
background-color:transparent;
}

.btn-save-png{
background-image:url('/site/Gam2/images/save-png_1.svg');
}

.btn-save-png:active{
background-image:url('/site/Gam2/images/save-png_2.svg');
}

.btn-save-jpg{
background-image:url('/site/Gam2/images/save-jpg_1.svg');
}

.btn-save-jpg:active{
background-image:url('/site/Gam2/images/save-jpg_2.svg');
}

@media(max-width:600px){

.canvas-container{
width:90vw;
height:90vw;
max-width:450px;
max-height:450px;
}

.menu-bar{
width:90vw;
max-width:450px;
}
}