:root {
    --head: "terminal_grotesque";
    --body: "Barecast";

    --maincolor: #ffffff;

    --accent1: #294FDB;
    --accent2: #8391ED;
    --accent3:#D0C0FF;
    --accent4: #A493D9;
    --light: #E1EDDE;
    --dark: #353B67;
    --white: #f3f2f2;
}

.drawboxborder{
        border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
        padding: 14px 14px 1px 14px;
        background-color:var(--accent1);
        border-radius:18px;

        margin-left: auto;
        margin-right: auto;
        display: block;
    }

@media (max-width:649px){
    #drawboxcontainer, .drawboxborder{
        display:none;
    }

    #error{display:block;}
}



@media (max-width: 820px) and (min-width:650px) {
    #error{display:none;}
    canvas {
        width: 500px;
        height: 500px;
        display: block;   /* this is IMPORTANT! */
    }

    .drawboxborder, #drawboxcontainer{
        width: 100%;
    }

    .dbheader {
        grid-area: header;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap:5px;
        height:100px;
        padding:5px;
    }
    .dbtools {
        grid-area: toolbar;
        display: flex;
        flex-direction: row;
        margin: auto;
        overflow:visible;
        gap:10px;
        padding:10px;
    }
        #drawboxcontainer{
        height: auto;
        width: 100%;
        border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
        padding: 14px 14px 10px 14px;
        background-color: #D8CFCA;
        border-radius: 20px;
        display:grid;
        grid-template-areas:
        "header header"
        "content content"
        "toolbar toolbar"
        "footer footer";
        margin-bottom:15px;
    }
    
    
}


@media (min-width: 821px) {
    #error{display:none;}
    canvas{
        width:500px;
        height:500px;
        display: block;
    }
        #drawboxcontainer{
        height: 620px;
        width: 600px;
        border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
        padding: 14px 14px 10px 14px;
        background-color: #D8CFCA;
        border-radius: 20px;
        display:grid;
        grid-template-areas:
        "header header"
        "toolbar content"
        "footer footer";
        margin-bottom:15px;
    }
    .drawboxborder{
        border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
        padding: 14px 14px 1px 14px;
        background-color:var(--accent1);
        border-radius:18px;

        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #drawboxcontainer{
        height: 620px;
        width: 600px;
        border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
        padding: 14px 14px 10px 14px;
        background-color: #D8CFCA;
        border-radius: 20px;
        display:grid;
        grid-template-areas:
        "header header"
        "toolbar content"
        "footer footer";
        margin-bottom:15px;
    }

    .dbheader {
        grid-area: header;
        display: flex;
        flex-direction: row;
        gap:10px;
        height:100px;
        padding:20px;
    }
    .dbtools {
        grid-area: toolbar;
        display: flex;
        flex-direction: column;
        width:80px;
        height:500px;
        margin: auto;
        overflow:visible;
        gap:3px;
        padding:10px;
    }

    input[type="color" i]{
    margin: auto;
    height: 64px;
    width: 64px;
    border:none;
    cursor: pointer;
}
input[type="range"]{
    writing-mode: vertical-lr;
    direction: rtl;
    margin:auto;
}

}



* {box-sizing: border-box;}
canvas {
    border: 1px solid rgb(204, 203, 203);
    cursor: crosshair;
    grid-area: content;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: #ffffff;
}
        * {box-sizing: border-box;}
#gallerycontainer {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    height:250px;
    justify-content:center;
    overflow-y: scroll;
    overflow-x:none;
    text-align-last: center;
}
#gallery {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content:center;
    overflow-y: none;
    overflow-x:none;
    text-align-last: center;
    padding:10px;
}

.flexbox1{
    display:flex;
    flex-direction: row;
}

h4{
    font-weight: 400;
    font-size: 16pt;
    margin: auto;
}

.image-container {
    border: 1px solid #ccc;
    padding: 5px;
    max-width: 180px;
    text-align: center;
    font-weight: 400;
    font-size: 8pt;
}
.image-container img {
    max-width: 100%;
    height: auto;
    display: block;
}





.dbtools div:hover{
cursor: pointer;
}
.dbfooter {
  grid-area: footer;
  height:20px;
}

#pencil{
background-image: url("/drawbox/img/db_pencila.png");
background-size: contain;
}
#pencil:hover{
background-image: url("/drawbox/img/db_pencilb.png");
position: relative;
transform:translateY(3px);}

#pencil:hover:after {
    content: attr(title);
    background: var(--accent2);
    border-radius: 25px;
    font-weight: 400;
    font-size: 8pt;
    padding: 5px 12px;
    position: absolute;
    bottom: 10%;
    left: 110%;
    z-index: 100;
}

#paletteswatch1{
background-image: url("/drawbox/img/DB_pattern1.png");
background-size: contain;
transition: .2s;
}
#paletteswatch1:hover{
position: relative;
transform:translateY(3px);
background-image: url("/drawbox/img/DB_pattern1b.png");}
#paletteswatch1:hover:after, #paletteswatch2:hover:after, #paletteswatch3:hover:after {
    content: attr(title);
    background: var(--accent2);
    border-radius: 25px;
    font-weight: 400;
    font-size: 8pt;
    width:60px;
    padding: 5px 12px;
    position: absolute;
    bottom: 10%;
    left: 110%;
    z-index: 100;
    text-align: center;
}

#paletteswatch2{
background-image: url("/drawbox/img/DB_pattern2.png");
background-size: contain;
transition: .2s;
}
#paletteswatch2:hover{
position: relative;
transform:translateY(3px);
background-image: url("/drawbox/img/DB_pattern2b.png");}


#paletteswatch3{
background-image: url("/drawbox/img/DB_pattern3.png");
background-size: contain;
transition: .2s;
}
#paletteswatch3:hover{
position: relative;
transform:translateY(3px);
background-image: url("/drawbox/img/DB_pattern3b.png");}

#erase{
    background-image: url("/drawbox/img/db_erasea.png");
    background-size: contain;
}
#erase:hover{
    background-image: url("/drawbox/img/db_eraseb.png");
    position: relative;
    transform:translateY(3px);}
#erase:hover:after {
    content: attr(title);
    background: var(--accent2);
    border-radius: 25px;
    font-weight: 400;
    font-size: 8pt;
    padding: 5px 12px;
    position: absolute;
    bottom: 10%;
    left: 110%;
    z-index: 100;
}

#undo{
    background-image: url("/drawbox/img/db_undoa.png");
    height: 32px;
    width: 32px;
    position: relative;
    left:20px;
    background-size: fill;
    background-repeat: no-repeat;
    margin:auto;
    transition: .2s;
}
#undo:hover{
    background-image: url("/drawbox/img/db_undob.png");
    cursor:pointer;
    position: relative;
    transform:translateY(3px);
    
}
#undo:hover:after {
    content: attr(title);
    background: var(--accent2);
    border-radius: 25px;
    font-weight: 400;
    font-size: 8pt;
    padding: 5px 12px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10%);
}

#clear{
    background-image: url("/drawbox/img/db_cleara.png");
    height: 32px;
    width: 170px;
    background-size: fill;
    background-repeat: no-repeat;
    margin:auto;
    position: relative;
    left:20px;
}
#clear:hover{
    background-image: url("/drawbox/img/db_clearb.png");
    cursor:pointer;
    position: relative;
    transform:translateY(3px);
    transition: .2s;
}

#submit{
    background-image: url("/drawbox/img/db_submita.png");
    height: 32px;
    width: 192px;
    background-size: fill;
    background-repeat: no-repeat;
    margin:auto;
    transition: .2s;
}
#submit:hover{
    background-image: url("/drawbox/img/db_submitb.png");
    cursor:pointer;
    position: relative;
    transform:translateY(3px);
}

.dbtool{
    height:32px;
    width:32px;
    margin: auto;
    transition: .2s;
}

#dbicon{
    height:64px;
    width:64px;
    background-image: url("/drawbox/img/db_icona.png");
    background-size: contain;
    margin-left:0px;
    cursor:help;
    position: relative;
    left:-8px;
    transition: .4s;
}
#dbicon:hover{
    background-image: url("/drawbox/img/db_iconb.png");
    position: relative;
    transform:translateY(3px);

}
#dbicon:hover:after {
    content: attr(title);
    background: var(--accent2);
    border-radius: 25px;
    font-weight: 400;
    font-size: 8pt;
    width:100px;
    padding: 5px 12px;
    position: absolute;
    top:-40%;
    left: 0;
    z-index: 100;
    text-align: center;
}

#dblogo{
  height:64px;
  padding: 5px;
  align-content: center;
  text-align: center;
}

.dbheader button {
  height:32px;
  margin: auto;
}

#popupDialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: var(--accent3);
    border-radius: 25px;
    font-weight: 400;
    font-size: 8pt;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    text-align: center;
    margin:auto;
    }

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}


#status {
    position: absolute;
    top:100px;
    left:300px;
    font-weight: 400;
    font-size: 8pt;
}

#popupDialogDB {
    display: none;
    z-index: 900;
    margin:auto;
    }