.middle {
  display: flex;
  justify-content: center;
}

.pencil_box{
	height: 20vmin;
}

.outer{
  width:100%;
  height:80%;
  position:relative;
  
}
.inner{
  height:100%;
  width:100%;

}
.triangle-down{
  height:25%;
  width:100%;
  position:relative;
}
.triangle-down svg{
  height:80%;
  width:100%;
  position:absolute;
  top:0;
}
svg .triangle-path-red{
  fill:red;
}


svg .triangle-path-deeppink{
  fill:deeppink;
}

svg .triangle-path-coral{
  fill:coral;
}

svg .triangle-path-orange{
  fill:orange;
}

svg .triangle-path-yellow{
  fill:gold;
}



svg .triangle-path-darkkhaki{
  fill:darkkhaki;
}


svg .triangle-path-purple{
  fill:purple;
}



svg .triangle-path-lime{
  fill:lime;
}



svg .triangle-path-green{
  fill:green;
}


svg .triangle-path-blue{
  fill:blue;
}


svg .triangle-path-brown{
  fill:brown;
}


svg .triangle-path-gray{
  fill:gray;
}
.test {
	width: 100%;
}


.red {
background: #D31027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EA384D, #D31027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EA384D, #D31027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.pink {
background: #ee9ca7;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffdde1, #ee9ca7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.coral {
background: #ff9966;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff5e62, #ff9966);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ff5e62, #ff9966); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.orange {
background: #fc4a1a;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  
}

.yellow {
background: #fceabb;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f8b500, #fceabb);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f8b500, #fceabb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}

.darkkhaki {
background: #544a7d;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ffd452, #544a7d);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ffd452, #544a7d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  
}

.purple {
background: #ff00cc;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #333399, #ff00cc);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #333399, #ff00cc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}

.lime {
background: #56ab2f;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}

.green {
background: #52c234;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #061700, #52c234);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #061700, #52c234); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}

.blue {
background: #5C258D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4389A2, #5C258D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4389A2, #5C258D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  
}

.brown {
background: #EB5757;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #000000, #EB5757);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #000000, #EB5757); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  
}

.gray {
background: #BBD2C5;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #536976, #BBD2C5);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #536976, #BBD2C5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}










.box_background {

  border: 2px solid steelblue;
  border-radius: 10px;
}

.item {
  display: flex;
  align-items: center;
}



.frame {
  background-color:MintCream;
  height: 50vmin;
/*  padding: 10px;
  margin:  10px;*/
  border:solid 5vmin #eee;
  border-bottom-color:#fff;
  border-left-color:#eee;
  border-radius:2px;
  border-right-color:#eee;
  border-top-color:#ddd;
  box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  box-sizing:border-box;
  display:inline-block;
/*  margin:10vh 10vw;
  height:80vh;
  padding:8vmin;*/
  position:relative;
  text-align:center;
  &:before {
    border-radius:2px;
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
    content:"";
    left:-2vmin;
    position:absolute;
    right:-2vmin;
    top:-2vmin;
  }
  &:after {
    border-radius:2px;
    bottom:-2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content:"";
    left:-2.5vmin;
    position:absolute;
    right:-2.5vmin;
    top:-2.5vmin;
  }
}


.crayon {
  padding: 0px;
  margin:  0px;
}


.circle {
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%  
}

.fill-red{
  background:red;
}


.fill-deeppink{
  background:deeppink;
}

.fill-coral{
  background:coral;
}

.fill-orange{
  background:orange;
}

.fill-yellow{
  background:gold;
}



.fill-darkkhaki{
  background:darkkhaki;
}


.fill-purple{
  background:purple;
}



.fill-lime{
  background:lime;
}



.fill-green{
  background:green;
}


.fill-blue{
  background:blue;
}


.fill-brown{
  background:brown;
}


.fill-gray{
  background:gray;
}


.my_canvas {

}


.circle_row {
  height: 10vmin;
  display: flex;
  align-items: center;
  justify-content: center;
}

.helper_image {
  height: 20%;
  position: absolute;
  left:  80%;
}