body, html {
    background-color: #f6f6f6;
}

/*This is the white-ish surface that we will fill with boxes, rows, and columns*/

#painting {
    background-color: #fff4db;
    width: 400px;
    height: 400px;

   
    /*box-shadow: 10px 10px 1px #8d8d8d;*/
    transform:
    
}

/*These are the rows that will divide the the painting into three horizontal sections*/

#toprow {
    height: 290px;
}

#middlerow {
    height: 10px;
}

#bottomrow {
    height: 100px;
}

/*These are the two columns within the rows that help hold an additional subset of boxes*/

#lefttopcolumn {
    width: 100px;
}

#bottomrightcolumn{
    width: 20px;
}

/*These are the boxes that give the painting its shape, including the black dividers*/

#bigbox {
    height: 290px;
    width: ;
    border-bottom: solid;
    border-width: 10px;
    border-color: black;
    background color: 
}

#mediumbox {
    width: 100px;
    height: 140px;
    color:
}

#smallbox {
    width: 100px;
    height: 100px;
    background color:
}

#widebox {
    width: 0px;
    height: 100px;
}

#tinybox {
    width: 20px;
    height: 45px;
}

#tinybox2 {
    width: 20px;
    height: 45px;
    background-color:
}

#divider1 {
    height: 290px;
    width: 10px;
}

#divider2 {
    height: 10px;
    width: 100px;
}

#divider3 {
    height: 100px;
    width: 10px;
}

#divider4 {
    height: 10px;
    width: 20px;
}

#divider5 {
    height: 100px;
    width: 10px;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PAINTING DIV #2*/

#painting2 {
    background-color: #fff4db;

  /*  border-top: solid;
    border-width: 10px;
    border-color: #393939;*/
    width: 400px;
    height: 400px;
    
    /*box-shadow: 10px 10px 1px #8d8d8d;*/
    transform:



    
}

/*These are the rows that will divide the the painting into three horizontal sections*/

#toprow2 {
    height: 290px;
}

#middlerow2 {
    height: 10px;
}

#bottomrow2 {
    height: 100px;
}

/*These are the two columns within the rows that help hold an additional subset of boxes*/

#lefttopcolumn2 {
    width: 100px;
}

#bottomrightcolumn2 {
    width: 20px;
}

/*These are the boxes that give the painting its shape, including the black dividers*/

#bigbox2 {
    height: 290px;
    width: ;
    border-bottom: solid;
    border-width: 10px;
    border-color: black;
    background color: 
}

#mediumbox2 {
    width: 100px;
    height: 140px;
    color:
}

#smallbox2 {
    width: 100px;
    height: 100px;
    background color:
}

#widebox2 {
    width: 0px;
    height: 100px;
}

#tinybox3 {
    width: 20px;
    height: 45px;
}

#tinybox4 {
    width: 20px;
    height: 45px;
    background-color:
}

#divider6 {
    height: 290px;
    width: 10px;
}

#divider7 {
    height: 10px;
    width: 100px;
}

#divider8 {
    height: 100px;
    width: 10px;
}

#divider9 {
    height: 10px;
    width: 20px;
}

#divider10 {
    height: 100px;
    width: 10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PAINTING DIV #3*/

#painting3 {
    background-color: #fff4db;
   /* border-top: solid;
    border-width: 10px;
    border-color: #393939;*/
    width: 400px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;

    /*box-shadow: 10px 10px 1px #8d8d8d;*/
    transform:


    
}

/*These are the rows that will divide the the painting into three horizontal sections*/

#toprow3 {
    height: 290px;
}

#middlerow3 {
    height: 10px;
}

#bottomrow3 {
    height: 100px;
}

/*These are the two columns within the rows that help hold an additional subset of boxes*/

#lefttopcolumn3 {
    width: 100px;
}

#bottomrightcolumn3 {
    width: 20px;
}

/*These are the boxes that give the painting its shape, including the black dividers*/

#bigbox3 {
    height: 290px;
    width: ;
    border-bottom: solid;
    border-width: 10px;
    border-color: black;
    background color: 
}

#mediumbox3 {
    width: 100px;
    height: 140px;
    color:
}

#smallbox3 {
    width: 100px;
    height: 100px;
    background color:
}

#widebox3 {
    width: 0px;
    height: 100px;
}

#tinybox5 {
    width: 20px;
    height: 45px;
}

#tinybox6 {
    width: 20px;
    height: 45px;
    background-color:
}

#divider11 {
    height: 290px;
    width: 10px;
}

#divider12 {
    height: 10px;
    width: 100px;
}

#divider13 {
    height: 100px;
    width: 10px;
}

#divider14 {
    height: 10px;
    width: 20px;
}

#divider15 {
    height: 100px;
    width: 10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PAINTING DIV #4*/

#painting4 {
    background-color: #fff4db;
    /*border-top: solid;*/
/*    border-width: 10px;
    border-color: #393939;  */
    width: 400px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    /*box-shadow: 10px 10px 1px #8d8d8d;*/
    transform:


    
}

/*These are the rows that will divide the the painting into three horizontal sections*/

#toprow4 {
    height: 290px;
}

#middlerow4 {
    height: 10px;
}

#bottomrow4 {
    height: 100px;
}

/*These are the two columns within the rows that help hold an additional subset of boxes*/

#lefttopcolumn4 {
    width: 100px;
}

#bottomrightcolumn4 {
    width: 20px;
}

/*These are the boxes that give the painting its shape, including the black dividers*/

#bigbox4 {
    height: 290px;
    width: ;
    border-bottom: solid;
    border-width: 10px;
    border-color: black;
    background color: 
}

#mediumbox4 {
    width: 100px;
    height: 140px;
    color:
}

#smallbox4 {
    width: 100px;
    height: 100px;
    background color:
}

#widebox4 {
    width: 0px;
    height: 100px;
}

#tinybox7 {
    width: 20px;
    height: 45px;
}

#tinybox8 {
    width: 20px;
    height: 45px;
    background-color:
}

#divider16 {
    height: 290px;
    width: 10px;
}

#divider17 {
    height: 10px;
    width: 100px;
}

#divider18 {
    height: 100px;
    width: 10px;
}

#divider19 {
    height: 10px;
    width: 20px;
}

#divider20 {
    height: 100px;
    width: 10px;
}



/*Border divs that go inbetween the paintings:*/

#borderHorizontal {
    height: 10px;
    width: 810px;
    background-color: #393939;
    float:left;

}

#borderVertical1 {
    height: 400;
    width: 10px;
    background-color: #393939;
    float: left;
}

/*Giant Containers:*/

#MasterTopRow {
    height: 400;
    width: 810;
    margin-right: auto;
    margin-left: auto;
}
#MasterBottomRow {
    height: 400;
    width: 810;
    margin-right: auto;
    margin-left: auto;
}
#MasterContainer {
    height: 800;
    width: 810;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    margin-bottom: auto;
    box-shadow: 20px 20px 20px #888888;
    border: 20px solid;
    border-bottom: 20px solid;
    -webkit-border-image: url(data:image/jpeg;base64,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)
    10 stretch;
    border-radius: 10px;
}

body {

    background: -webkit-linear-gradient(grey, white);
    background-position: right top;
}

html {

    background: grey
}

#generate {
    margin-left: 10vw;
    margin-top: 1vh;
    font-size: 5vw;
    border-radius: 3vw;
}





/*color classes. These are the CSS classes that will color in the blocks*/

.red {
    background-color: #cc3333;   
}

.blue {
    background-color: #2f7fd8;   
}

.yellow {
    background-color: #feda09;   
}

.black {
    background-color: #393939;   
}

/*position class. This class helps make sure the elements line up next to each other*/

.right {
    float: right;   
}

.left {
    float: left;
}

.select {
    
}