.canvas{
    display: flex;
    flex-wrap: wrap;
    width:270px;
    margin: .2px;
    position:absolute;
    left:1rem;
    top:1rem;
    border: dashed 6px #C3CE92;
    padding:25px;
}

.canvas-stitch{
    width: 50px;
    height: 50px;
    background-color:  #C3CE92;
    border-color:  #C3CE92;
    margin:1px;

}

body{
    background-color: beige;
    color:#808C3A;
    font-size: 20px;
    font-family:Georgia, 'Times New Roman', Times, serif;
}
.instructions{
    padding:15px;
}

.stitch{
    width: 15px;
    height: 15px;
    background-color:beige;
    border: solid .2px beige;
}

.hot-dog{
    display: flex;
    flex-wrap: wrap;
    width:1000px;
    margin: .2px;
    position:absolute;
    right:1rem;
    bottom:0px;


}

.dog{
    background-color: #BC7984;
    border: solid .2px #BC7984;
    
}

.face{
    background-color: #7D3847;
    border: solid .2px #7D3847;
}

.hem{
    background-color: #808C3A;
    border: solid .2px #808C3A;
}

.torso, .sweater{
    background-color: #C3CE92;
    border: solid .2px  #C3CE92;
}

#base-colorpicker, #add-colorpicker{
    width:90px;
    height:90px;
    margin:5px;
    background-color: beige;
    border:beige;


}

.colorpickers{
    display:flex;
    flex-direction: row;
   justify-content: center;
}
.fill{
    background-color: #808C3A;
    border: solid .2px #808C3A;
}


a, a:visited { 
    text-decoration: none; 
    color: #808C3A;
    border: dashed 6px #C3CE92;
    padding:15px;

}

.V2{
    position:absolute;
    bottom:1rem;
    left:1rem;
}
@media only screen and (max-width: 600px) {
    body {
    
      font-size: 15px;
    }
    .canvas{
        display: flex;
        flex-wrap: wrap;
        width:160px;
        margin: .2px;
        padding:25px;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .canvas-stitch{
        width: 30px;
        height: 30px;
        background-color:  #C3CE92;
        border-color:  #C3CE92;
        margin:1px;
    
    }
    .fill{
        background-color: #808C3A;
        border: solid .2px #808C3A;
    }
    .stitch{
        width: 5px;
        height: 5px;
        background-color:beige;
        border: solid .2px beige;
    }
    
    .hot-dog{
        display: flex;
        flex-wrap: wrap;
        width:350px;
      
        position:absolute;
        right:1rem;
        bottom:0px;
    
    }
    
.dog{
    background-color: #BC7984;
    border: solid .2px #BC7984;
    
}

.face{
    background-color: #7D3847;
    border: solid .2px #7D3847;
}

.hem{
    background-color: #808C3A;
    border: solid .2px #808C3A;
}

.torso, .sweater{
    background-color: #C3CE92;
    border: solid .2px  #C3CE92;
}

  }