/* reset */
/* from https://alligator.io/css/minimal-css-reset/ */

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  width: 100%;
  height: auto;
}
/* / reset */
a {
  cursor:pointer;
}
html, body {
  height:100%;
}
body {
  overscroll-behavior-y: contain;
}
body {
  background-color:#93DEFE;
  background:-webkit-gradient(linear, left top, left bottom, from(#b7eaff), to(#94dfff));
  background:linear-gradient(to bottom, #b7eaff 0%, #94dfff 100%);
  background-repeat:no-repeat;
  background-attachment: fixed;
}

.elem {
  /*border: solid #6AC5AC 1px;*/
}

#main {
  padding:10px;
  width:100%;
  position:relative;
  margin:0 auto;
}

#container {
  overflow:hidden;
  text-align:center;
}
#drawing svg,
.border {
  border: 8px solid black;  
  border-radius: 5px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#drawing svg {
  border-color:#fff;
  margin-top:40px;
}
#drawing {
  display:inline;
}
.box {
  display: inline-block;
  width: calc(100% / 2);
  padding:2%;
}

img.animated {
  /*animation-duration: 3s;*/
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.tools--first {
  position:absolute;
  top:0;
  display:inline-block;
}
.tools.animated {
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}
.tools--second ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.tools ul li {
  width:50px;
  height:50px;
  margin:5px 10px 10px 10px;
  display:inline-block;
}
.tools--second ul li a {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border:2px solid white;
  -webkit-box-shadow: 00 2px 4px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 00 2px 4px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor:pointer;
}
.tools ul li a.active {
  border-style: solid;
  border-color:black;
  border-width:6px;
}

.tools--first .btn {
  width: 100%;
  height: 100%;
  background-position:50% 50%;
  background-size: 80%;
  background-repeat:no-repeat;
  display: block;
  background-color: #00FF00;
  border-radius: 2px;
  -webkit-box-shadow: 00 2px 4px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 00 2px 4px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn--back {
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTIgNDkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTIgNDkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ2NC4zNDQsMjA3LjQxOGwwLjc2OCwwLjE2OEgxMzUuODg4bDEwMy40OTYtMTAzLjcyNGM1LjA2OC01LjA2NCw3Ljg0OC0xMS45MjQsNy44NDgtMTkuMTI0ICAgIGMwLTcuMi0yLjc4LTE0LjAxMi03Ljg0OC0xOS4wODhMMjIzLjI4LDQ5LjUzOGMtNS4wNjQtNS4wNjQtMTEuODEyLTcuODY0LTE5LjAwOC03Ljg2NGMtNy4yLDAtMTMuOTUyLDIuNzgtMTkuMDE2LDcuODQ0ICAgIEw3Ljg0NCwyMjYuOTE0QzIuNzYsMjMxLjk5OC0wLjAyLDIzOC43NywwLDI0NS45NzRjLTAuMDIsNy4yNDQsMi43NiwxNC4wMiw3Ljg0NCwxOS4wOTZsMTc3LjQxMiwxNzcuNDEyICAgIGM1LjA2NCw1LjA2LDExLjgxMiw3Ljg0NCwxOS4wMTYsNy44NDRjNy4xOTYsMCwxMy45NDQtMi43ODgsMTkuMDA4LTcuODQ0bDE2LjEwNC0xNi4xMTJjNS4wNjgtNS4wNTYsNy44NDgtMTEuODA4LDcuODQ4LTE5LjAwOCAgICBjMC03LjE5Ni0yLjc4LTEzLjU5Mi03Ljg0OC0xOC42NTJMMTM0LjcyLDI4NC40MDZoMzI5Ljk5MmMxNC44MjgsMCwyNy4yODgtMTIuNzgsMjcuMjg4LTI3LjZ2LTIyLjc4OCAgICBDNDkyLDIxOS4xOTgsNDc5LjE3MiwyMDcuNDE4LDQ2NC4zNDQsMjA3LjQxOHoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)
}
.btn--bucket {
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSItMzIgMCA1MTEgNTEyIiB3aWR0aD0iNTEycHgiPjxwYXRoIGQ9Im0xOTIuMjM0Mzc1IDUxMmMtNDkuMjY5NTMxIDAtOTUuODQ3NjU2LTguODM5ODQ0LTEzMS4xNTIzNDQtMjQuODg2NzE5LTM5LjA2NjQwNi0xNy43NTc4MTItNjAuNTgyMDMxLTQyLjc3MzQzNy02MC41ODIwMzEtNzAuNDQ1MzEydi0zMjEuMzM1OTM4YzAtOC4yODEyNSA2LjcxNDg0NC0xNSAxNS0xNWgzNTMuNDY0ODQ0YzguMjg1MTU2IDAgMTUgNi43MTg3NSAxNSAxNXYzMjEuMzM1OTM4YzAgMjcuNjcxODc1LTIxLjUxNTYyNSA1Mi42ODc1LTYwLjU4MjAzMiA3MC40NDUzMTItMzUuMzA0Njg3IDE2LjA0Njg3NS04MS44Nzg5MDYgMjQuODg2NzE5LTEzMS4xNDg0MzcgMjQuODg2NzE5em0wIDAiIGZpbGw9IiNmZmUxMDAiLz48cGF0aCBkPSJtMzgzLjk2NDg0NCA5NS4zMjgxMjV2MzIxLjM0Mzc1YzAgMjcuNjY3OTY5LTIxLjUxOTUzMiA1Mi42ODc1LTYwLjU3ODEyNSA3MC40NDkyMTktMzUuMzEyNSAxNi4wMzkwNjItODEuODc4OTA3IDI0Ljg3ODkwNi0xMzEuMTUyMzQ0IDI0Ljg3ODkwNnYtNDMxLjY3MTg3NWgxNzYuNzMwNDY5YzguMjgxMjUgMCAxNSA2LjcyMjY1NiAxNSAxNXptMCAwIiBmaWxsPSIjZWNiNDAyIi8+PHBhdGggZD0ibTE1LjUgODAuMzMyMDMxYy04LjI4NTE1NiAwLTE1IDYuNzE4NzUtMTUgMTV2MTE0Ljc4MTI1YzAgMjkuNjgzNTk0IDIwLjU2NjQwNiA1NC42NDg0MzggNDguMTk5MjE5IDYxLjQwMjM0NHY1MS4wNjI1YzAgMjYuMDMxMjUgMjEuMDU4NTkzIDQ3LjEzNjcxOSA0Ny4xMzI4MTIgNDcuMTM2NzE5IDI1Ljk4ODI4MSAwIDQ3LjEzMjgxMy0yMS4xNDg0MzggNDcuMTMyODEzLTQ3LjEzNjcxOXYtMjQyLjI0NjA5NHptMCAwIiBmaWxsPSIjZmY3ZDAwIi8+PHBhdGggZD0ibTE5Mi4yMzQzNzUgMTkwLjY2Nzk2OWMtMTAwLjM0NzY1NiAwLTE5MS43MzQzNzUtMzcuNTAzOTA3LTE5MS43MzQzNzUtOTUuMzM1OTM4IDAtNTguOTQxNDA2IDkzLjY5OTIxOS05NS4zMzIwMzEgMTkxLjczNDM3NS05NS4zMzIwMzEgMTAwLjM2MzI4MSAwIDE5MS43MzA0NjkgMzcuNTExNzE5IDE5MS43MzA0NjkgOTUuMzMyMDMxIDAgNTkuNTExNzE5LTk0LjkzNzUgOTUuMzM1OTM4LTE5MS43MzA0NjkgOTUuMzM1OTM4em0wIDAiIGZpbGw9IiNlY2I0MDIiLz48cGF0aCBkPSJtMTkyLjIzNDM3NSAwdjE5MC42NzE4NzVjOTYuNzkyOTY5IDAgMTkxLjczMDQ2OS0zNS44MzIwMzEgMTkxLjczMDQ2OS05NS4zNDM3NSAwLTU3LjgxNjQwNi05MS4zNjcxODgtOTUuMzI4MTI1LTE5MS43MzA0NjktOTUuMzI4MTI1em0wIDAiIGZpbGw9IiNiYjg5MDEiLz48cGF0aCBkPSJtMTkyLjIzNDM3NSAzMGMtOTUuODk0NTMxIDAtMTYxLjczNDM3NSAzNS4wODU5MzgtMTYxLjczNDM3NSA2NS4zMzIwMzEgMCAzMC4zNTkzNzUgNjYuMTcxODc1IDY1LjMzNTkzOCAxNjEuNzM0Mzc1IDY1LjMzNTkzOCA5NS44NTkzNzUgMCAxNjEuNzMwNDY5LTM1LjA3MDMxMyAxNjEuNzMwNDY5LTY1LjMzNTkzOCAwLTMwLjM0NzY1Ni02Ni4xNDg0MzgtNjUuMzMyMDMxLTE2MS43MzA0NjktNjUuMzMyMDMxem0wIDAiIGZpbGw9IiNlZmY2ZmUiLz48cGF0aCBkPSJtMzUzLjk2NDg0NCA5NS4zMjgxMjVjMCAzMC4yNzM0MzctNjUuODY3MTg4IDY1LjM0Mzc1LTE2MS43MzA0NjkgNjUuMzQzNzV2LTEzMC42NzE4NzVjOTUuNTgyMDMxIDAgMTYxLjczMDQ2OSAzNC45ODgyODEgMTYxLjczMDQ2OSA2NS4zMjgxMjV6bTAgMCIgZmlsbD0iI2QyZGNlNyIvPjxwYXRoIGQ9Im00MjcuMzcxMDk0IDI1Ni4yNDIxODgtNDMuNDA2MjUtNDMuNDAyMzQ0djQyLjQyNTc4MWwyMi4xOTE0MDYgMjIuMTkxNDA2YzcuNzg5MDYyIDcuNzg1MTU3IDEyLjA3NDIxOSAxOC4xNDA2MjUgMTIuMDc0MjE5IDI5LjE1NjI1djEuNjE3MTg4YzAgMTYuNzMwNDY5LTkuOTg4MjgxIDMxLjY4MzU5My0yNS40NDkyMTkgMzguMDg5ODQzLTE1LjQ2NDg0NCA2LjQwNjI1LTMzLjEwNTQ2OSAyLjg5NDUzMi00NC45NDE0MDYtOC45NDE0MDZsLTEwOC44MDA3ODItMTA4Ljc5Njg3NWMtNS44NTU0NjgtNS44NTkzNzUtMTUuMzUxNTYyLTUuODU5Mzc1LTIxLjIxMDkzNyAwLTUuODU5Mzc1IDUuODU1NDY5LTUuODU5Mzc1IDE1LjM1NTQ2OSAwIDIxLjIxMDkzOGwxMDguODAwNzgxIDEwOC44MDA3ODFjMTMuNjYwMTU2IDEzLjY2MDE1NiAzMS43OTY4NzUgMjAuODk4NDM4IDUwLjMwNDY4OCAyMC44OTg0MzggOS4xODM1OTQgMCAxOC40NjQ4NDQtMS43ODUxNTcgMjcuMzI4MTI1LTUuNDUzMTI2IDI2LjcxMDkzNy0xMS4wNzAzMTIgNDMuOTcyNjU2LTM2Ljg5ODQzNyA0My45NzI2NTYtNjUuODA4NTkzdi0xLjYxNzE4OGMtLjAwMzkwNi0xOS4wMjczNDMtNy40MTAxNTYtMzYuOTE3OTY5LTIwLjg2MzI4MS01MC4zNzEwOTN6bTAgMCIgZmlsbD0iIzAwOWI5MSIvPjxwYXRoIGQ9Im0xOTIuMjM0Mzc1IDgwLjMzMjAzMWMtNjAuNzM0Mzc1IDAtMTE2LjI0MjE4NyAxMy4zMDQ2ODgtMTUxLjg2NzE4NyAzNS45ODgyODEgMjEuODA0Njg3IDIzLjQ4NDM3NiA3OC4wNjY0MDYgNDQuMzQ3NjU3IDE1MS44NjcxODcgNDQuMzQ3NjU3IDczLjk5MjE4NyAwIDEzMC4xMDU0NjktMjAuODk0NTMxIDE1MS44NjMyODEtNDQuMzQ3NjU3LTM1LjYyNS0yMi42ODM1OTMtOTEuMTMyODEyLTM1Ljk4ODI4MS0xNTEuODYzMjgxLTM1Ljk4ODI4MXptMCAwIiBmaWxsPSIjZmY3ZDAwIi8+PHBhdGggZD0ibTE5Mi4yMzQzNzUgMTYwLjY2Nzk2OWM3My45OTIxODcgMCAxMzAuMTA1NDY5LTIwLjg5NDUzMSAxNTEuODYzMjgxLTQ0LjM0NzY1Ny0zNS42MjUtMjIuNjgzNTkzLTkxLjEyODkwNi0zNS45ODgyODEtMTUxLjg2MzI4MS0zNS45ODgyODF6bTAgMCIgZmlsbD0iI2YxMzgwMCIvPjwvc3ZnPgo=)
   
}
.btn--pen {
  background-image:     url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4Ij48cGF0aCBkPSJtMTUgNTEyYy0zLjk0MTQwNiAwLTcuNzY5NTMxLTEuNTU0Njg4LTEwLjYwNTQ2OS00LjM5NDUzMS0zLjQ4MDQ2OS0zLjQ4MDQ2OS01LjAzMTI1LTguNDQ1MzEzLTQuMTUyMzQzLTEzLjI4OTA2M2wzMi4xMzI4MTItMTc2LjczNDM3NWMuNTQ2ODc1LTMgMS45OTYwOTQtNS43NjU2MjUgNC4xNTIzNDQtNy45MjE4NzVsMjgyLjU0Njg3NS0yODIuNTQ2ODc1YzE3LjQ4MDQ2OS0xNy40ODQzNzUgNDAuNzMwNDY5LTI3LjExMzI4MSA2NS40NTcwMzEtMjcuMTEzMjgxIDI0LjczMDQ2OSAwIDQ3Ljk3NjU2MiA5LjYyODkwNiA2NS40NjA5MzggMjcuMTEzMjgxbDM0Ljg5MDYyNCAzNC44OTQ1MzFjMTcuNDg0Mzc2IDE3LjQ4NDM3NiAyNy4xMTMyODIgNDAuNzMwNDY5IDI3LjExMzI4MiA2NS40NTcwMzIgMCAyNC43MzA0NjgtOS42Mjg5MDYgNDcuOTc2NTYyLTI3LjExMzI4MiA2NS40NjA5MzdsLTI4Mi41NDI5NjggMjgyLjU0Njg3NWMtMi4xNTYyNSAyLjE2MDE1Ni00LjkyMTg3NSAzLjYwNTQ2OS03LjkyMTg3NSA0LjE1MjM0NGwtMTc2LjczNDM3NSAzMi4xMzI4MTJjLS44OTQ1MzIuMTY0MDYzLTEuNzkyOTY5LjI0MjE4OC0yLjY4MzU5NC4yNDIxODh6bTAgMCIgZmlsbD0iI2ZmZTEwMCIvPjxwYXRoIGQ9Im00OTQuMjY5NTMxIDczIC4wMDc4MTMtLjAxMTcxOWMtLjM0NzY1Ni0uNDc2NTYyLS43MTA5MzgtLjk1NzAzMS0xLjA3MDMxMy0xLjQzNzVzLS43MzA0NjktLjk0OTIxOS0xLjA5NzY1Ni0xLjQyMTg3NWMtLjM3MTA5NC0uNDY4NzUtLjc1LS45Mzc1LTEuMTMyODEzLTEuMzk4NDM3LS4zNzg5MDYtLjQ2ODc1LS43Njk1MzEtLjkyOTY4OC0xLjE2MDE1Ni0xLjM5MDYyNS0uMzg2NzE4LS40NjA5MzgtLjc4OTA2Mi0uOTEwMTU2LTEuMTg3NS0xLjM1OTM3NS0uMzcxMDk0LS40MjE4NzUtLjc1LS44Mzk4NDQtMS4xNDA2MjUtMS4yNjE3MTktLjMzOTg0My0uMzY3MTg4LS42Nzk2ODctLjczMDQ2OS0xLjAzMTI1LTEuMDk3NjU2LS41MTk1MzEtLjU1MDc4Mi0xLjAzOTA2Mi0xLjA4MjAzMi0xLjU3MDMxMi0xLjYwOTM3NWwtMTcuNDQ5MjE5LTE3LjQ1MzEyNS0zMDcuNSAzMDcuNTExNzE4aC0uMDA3ODEybC0xNTUuNTMxMjUgMTU1LjUzMTI1di4wMDc4MTNjMi44Mzk4NDMgMi44MzIwMzEgNi42NjAxNTYgNC4zOTA2MjUgMTAuNjAxNTYyIDQuMzkwNjI1Ljg4NjcxOSAwIDEuNzg5MDYyLS4wNzgxMjUgMi42Nzk2ODgtLjIzODI4MWw0Ni4yMzgyODEtOC40MTAxNTcgNDkuNzYxNzE5LTkuMDUwNzgxYy4wNzAzMTItLjAxMTcxOS4xNDg0MzctLjAxOTUzMS4yMTg3NS0uMDM5MDYybC41ODk4NDMtLjEwMTU2MyA3OS45Mjk2ODgtMTQuNTM5MDYyYzMtLjU0Mjk2OSA1Ljc2MTcxOS0xLjk5MjE4OCA3LjkyMTg3NS00LjE1MjM0NC4wMTk1MzEtLjAxOTUzMS4wNzgxMjUtLjA3MDMxMi4xNjAxNTYtLjE0ODQzOC4xNDg0MzgtLjEyODkwNi4zNTkzNzUtLjMzOTg0My42Mjg5MDYtLjYyODkwNi4wMzEyNS0uMDMxMjUuMDU4NTk0LS4wNjI1LjA3ODEyNS0uMDg5ODQ0bDI4MS42Nzk2ODgtMjgxLjY3MTg3NGMxNy40ODA0NjktMTcuNDg4MjgyIDI3LjExMzI4MS00MC43MzA0NjkgMjcuMTEzMjgxLTY1LjQ2ODc1IDAtMTkuODUxNTYzLTYuMjIyNjU2LTM4Ljc0MjE4OC0xNy43MzA0NjktNTQuNDYwOTM4em0wIDAiIGZpbGw9IiNlY2I0MDIiLz48cGF0aCBkPSJtNDk0LjI4MTI1IDcyLjk4ODI4MWMtMi44MjQyMTktMy44NTkzNzUtNS45NDkyMTktNy41MzUxNTYtOS4zOTQ1MzEtMTAuOTgwNDY5bC0zNC44OTQ1MzEtMzQuODk0NTMxYy0zLjQ0NTMxMy0zLjQ0NTMxMi03LjEyMTA5NC02LjU3NDIxOS0xMC45ODA0NjktOS4zOTQ1MzFsLTQzMC4zNjMyODEgNDMwLjM1OTM3NS04LjQwNjI1IDQ2LjIzODI4MWMtLjg3ODkwNyA0Ljg0Mzc1LjY3MTg3NCA5LjgwODU5NCA0LjE1MjM0MyAxMy4yODkwNjMgMi44MzU5MzggMi44Mzk4NDMgNi42NjQwNjMgNC4zOTQ1MzEgMTAuNjA1NDY5IDQuMzk0NTMxLjg5MDYyNSAwIDEuNzg5MDYyLS4wNzgxMjUgMi42ODM1OTQtLjI0MjE4OGw0Ni4yMzgyODEtOC40MDYyNXptMCAwIiBmaWxsPSIjZWNiNDAyIi8+PHBhdGggZD0ibTQ5NC4yNzczNDQgNzIuOTg4MjgxLTQzMC4zNTkzNzUgNDMwLjM2MzI4MS00Ni4yMzgyODEgOC40MTAxNTdjLS44OTA2MjYuMTYwMTU2LTEuNzkyOTY5LjIzODI4MS0yLjY3OTY4OC4yMzgyODEtMy45NDE0MDYgMC03Ljc2MTcxOS0xLjU1ODU5NC0xMC42MDE1NjItNC4zOTA2MjV2LS4wMDc4MTNsMTU1LjUzMTI1LTE1NS41MzEyNWguMDA3ODEybDMwNy41LTMwNy41MTE3MTggMTcuNDQ5MjE5IDE3LjQ1MzEyNWMuNTMxMjUuNTI3MzQzIDEuMDUwNzgxIDEuMDU4NTkzIDEuNTcwMzEyIDEuNjA5Mzc1LjM1MTU2My4zNjcxODcuNjkxNDA3LjczMDQ2OCAxLjAzMTI1IDEuMDk3NjU2LjM5MDYyNS40MjE4NzUuNzY5NTMxLjgzOTg0NCAxLjE0MDYyNSAxLjI2MTcxOS4zOTg0MzguNDQ5MjE5LjgwMDc4Mi44OTg0MzcgMS4xODc1IDEuMzU5Mzc1LjM5MDYyNS40NjA5MzcuNzgxMjUuOTIxODc1IDEuMTYwMTU2IDEuMzkwNjI1LjM4MjgxMy40NjA5MzcuNzYxNzE5LjkyOTY4NyAxLjEzMjgxMyAxLjM5ODQzNy4zNjcxODcuNDcyNjU2LjczODI4MS45NDE0MDYgMS4wOTc2NTYgMS40MjE4NzVzLjcyMjY1Ny45NjA5MzggMS4wNzAzMTMgMS40Mzc1em0wIDAiIGZpbGw9IiNiYjg5MDEiLz48cGF0aCBkPSJtMzcuNDY4NzUgMzA4LjcxMDkzOC0uNzg5MDYyLjc4OTA2MmMuMTQ4NDM3LS4xNzE4NzUuNDEwMTU2LS40NDkyMTkuNzg5MDYyLS43ODkwNjJ6bTAgMCIgZmlsbD0iI2ZmZGRkMiIvPjxwYXRoIGQ9Im0yMDYuNzM0Mzc1IDQ2NC44NjcxODhjMC04OC4wMDM5MDctNzEuNTk3NjU2LTE1OS42MDE1NjMtMTU5LjYwMTU2My0xNTkuNjAxNTYzLTcuMDQ2ODc0IDAtMTAuMzc1IDQuMTY0MDYzLTEwLjYwNTQ2OCA0LjM5NDUzMS0yLjE1NjI1IDIuMTU2MjUtMy42MDU0NjkgNC45MjE4NzUtNC4xNDg0MzggNy45MjU3ODJsLTMyLjEzNjcxOCAxNzYuNzMwNDY4Yy0uODc4OTA3IDQuODQzNzUuNjcxODc0IDkuODA4NTk0IDQuMTUyMzQzIDEzLjI4OTA2MyAyLjgzNTkzOCAyLjgzOTg0MyA2LjY2NDA2MyA0LjM5NDUzMSAxMC42MDU0NjkgNC4zOTQ1MzEuODkwNjI1IDAgMS43ODkwNjItLjA3ODEyNSAyLjY4MzU5NC0uMjQyMTg4bDE3Ni43MzQzNzUtMzIuMTMyODEyYzMtLjU0Njg3NSA1Ljc2NTYyNS0xLjk5MjE4OCA3LjkyMTg3NS00LjE1MjM0NC4yNTM5MDYtLjI1MzkwNiA0LjM5NDUzMS0zLjU3NDIxOCA0LjM5NDUzMS0xMC42MDU0Njh6bTAgMCIgZmlsbD0iI2ZmZGRkMiIvPjxwYXRoIGQ9Im0yMDYuNzI2NTYyIDQ2NC44NzEwOTRjMCA1LjE2MDE1Ni0yLjIyNjU2MiA4LjMyMDMxMi0zLjUxOTUzMSA5LjczMDQ2OC0uMDE5NTMxLjAyNzM0NC0uMDQ2ODc1LjA1ODU5NC0uMDc4MTI1LjA4OTg0NC0uMjY5NTMxLjI4OTA2My0uNDgwNDY4LjUtLjYyODkwNi42Mjg5MDYtLjA4MjAzMS4wNzgxMjYtLjE0MDYyNS4xMjg5MDctLjE2MDE1Ni4xNDg0MzgtMi4xNjAxNTYgMi4xNjAxNTYtNC45MjE4NzUgMy42MDkzNzUtNy45MjE4NzUgNC4xNTIzNDRsLTc5LjkyOTY4OCAxNC41MzkwNjItLjU4OTg0My4xMDE1NjNjLS4wNzAzMTMuMDE5NTMxLS4xNDg0MzguMDI3MzQzLS4yMTg3NS4wMzkwNjJsLTQ5Ljc2MTcxOSA5LjA1MDc4MS00Ni4yMzgyODEgOC40MTAxNTdjLS44OTA2MjYuMTYwMTU2LTEuNzkyOTY5LjIzODI4MS0yLjY3OTY4OC4yMzgyODEtMy45NDE0MDYgMC03Ljc2MTcxOS0xLjU1ODU5NC0xMC42MDE1NjItNC4zOTA2MjV2LS4wMDc4MTNsMTU1LjUzMTI1LTE1NS41MzEyNWguMDA3ODEyYzkuMjg5MDYyIDkuMjg5MDYzIDE3LjQ0MTQwNiAxOS43MTA5MzggMjQuMjIyNjU2IDMxLjAzOTA2MyAxNC4zMjgxMjUgMjMuOTIxODc1IDIyLjU2NjQwNiA1MS44OTA2MjUgMjIuNTY2NDA2IDgxLjc2MTcxOXptMCAwIiBmaWxsPSIjZWFhODk4Ii8+PHBhdGggZD0ibTk4Ljg3ODkwNiA0ODcuODI0MjE5YzAtNDEuMTkxNDA3LTMzLjUxMTcxOC03NC43MDMxMjUtNzQuNzAzMTI1LTc0LjcwMzEyNS00LjM1OTM3NSAwLTguMTQwNjI1IDIuMzQzNzUtMTAuMjE4NzUgNS43NzczNDRsLTEzLjcxNDg0MyA3NS40MTc5NjhjLS44Nzg5MDcgNC44NDM3NS42NzE4NzQgOS44MDg1OTQgNC4xNTIzNDMgMTMuMjg5MDYzIDIuODM1OTM4IDIuODM5ODQzIDYuNjY0MDYzIDQuMzk0NTMxIDEwLjYwNTQ2OSA0LjM5NDUzMS44OTA2MjUgMCAxLjc4OTA2Mi0uMDc4MTI1IDIuNjgzNTk0LS4yNDIxODhsNzUuNDE0MDYyLTEzLjcxMDkzN2MzLjQ0MTQwNi0yLjA4NTkzNyA1Ljc4MTI1LTUuODc1IDUuNzgxMjUtMTAuMjIyNjU2em0wIDAiIGZpbGw9IiNmZjdkMDAiLz48cGF0aCBkPSJtOTguODc4OTA2IDQ4Ny44MjQyMTljMC0yMC41OTc2NTctOC4zNzg5MDYtMzkuMjc3MzQ0LTIxLjkxMDE1Ni01Mi44MDQ2ODhsLTcyLjU4MjAzMSA3Mi41ODIwMzFjLjAwMzkwNiAwIC4wMDM5MDYuMDAzOTA3LjAwNzgxMi4wMDM5MDcgMi44MzU5MzggMi44Mzk4NDMgNi42NjQwNjMgNC4zOTQ1MzEgMTAuNjA1NDY5IDQuMzk0NTMxLjg5MDYyNSAwIDEuNzg5MDYyLS4wNzgxMjUgMi42ODM1OTQtLjI0MjE4OGw3NS40MTQwNjItMTMuNzEwOTM3YzMuNDQxNDA2LTIuMDg1OTM3IDUuNzgxMjUtNS44NzUgNS43ODEyNS0xMC4yMjI2NTZ6bTAgMCIgZmlsbD0iI2YxMzgwMCIvPjwvc3ZnPgo=)
}

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

.rainbow {
	background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
	background-size: 100% 100%;
}

@media screen and (min-width:700px) {
  #main {
    width:700px;
  }
}

/* Landscape */
@media only screen and (orientation: landscape) {
  #drawing svg {
    max-width:80vh; /* max-height:80vh makes svg scale crazy */
    margin-top:0;
  }
  .tools--second {
      display: inline-block;
      position: absolute;
      top: 0;
  }
  .tools--first { 
    left:0;
  }
  .circle.back {
    margin:10px 0 0 0;
  }
  .tools--second ul li {
    margin:10px;
  }
  .tools--first ul li {
    display:block;
    margin:10px 10px 20px 10px;
  }
}