* {
    box-sizing: border-box;

}

h1
{
  display:none
}

.container
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.control {
    display: inline-block;
}

.palettecontainer {
    display: inline-block;
}

#palette {
    width: 160px;
    height: 700px;
}

#paletField {
    height: 815px;
    width : 160px;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 80px 80px;
    grid-template-rows: 80px;
}

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

.tools{
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: white;
    position: relative;
    border-radius: 100px;
}

button {
    border-radius: 0px;
}

.color {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    background-color: #0f0f0f;
}

.drawWidth{
    width: 50px;
    height: 50px;
    background-color: grey;
}

#color {

    display: inline-block;
    vertical-align: top;
    width: 70px;
    height: 70px;


}

#fieldColor {
   width: 80px;
   padding-right: 4px;
}

#ardoise {
    display:inline-block;
    vertical-align: top;
}

#ardoise_container {

    display:inline-block;
}

#blackcolor {
    background-color: black;
}

#whitecolor {
    background-color: white;
}

#pinkcol {
    background-color: pink;
}

#purplecol {
    background-color: purple;
}

#redcol {
    background-color: red;
}

#orangecol {
    background-color: orange;
}

#yellowcol {
    background-color: yellow;
}

#lightgreen {
    background-color: lightgreen;
}

#greencol {
    background-color: green;
}

#lightblue {
    background-color: lightblue;
}

#bluecol {
    background-color: blue;
}

#browncol {
    background-color: brown;
}

#darkbrown {
    background-color: #5f3131;
}

#greycol {
    background-color: grey;
}

#lightgrey {
    background-color: lightgrey;
}


#penwidth {
    position: relative;
    left: 40px;
    top: 80px;
    transform: rotate(90deg);
    width: 150px;
}

#penwidthvalue {
    top: -20px;
    font-size: 2em;
}

legend {
    color: white;
}

.field {
    max-width:195px;
    width:195px;

}

#pickedcolor {



}

#taille {
    display: inline-block;
    height: 210px;
    min-width: 0;

}

#contact {

}

#socialField {

   height:95px;
}

#fieldLoad {
 
  height: 95px;

}

#popinput {
  display:none; 
  position: relative;
  left: 40px;
  top: -30px;
  height: 35px;
  z-index: 1;

}

#inputBar {
 
   width:400px;
   position: absolute;
}

#toload {

    display: inline-block;
    position: relative;
    top: 35px;
    width: 50px;
    height: 25px;
    background-color: white;

}

#popSocial {

  display:none;
  position: relative;
  left: 90px;
  top: -80px;
  z-index: 1;

}