canvas{
    position: fixed;
    top:0px;
    left:0px;
}

button{
    background: #06b3ff;
    border-radius: 100%;
    width: 200px;
    height: 200px;
    border: none;
    position: fixed;
    padding: 0px;
}


button::-moz-focus-inner {
  border: 0;
}



.submenu button{
    width: 20px;
    height: 20px;
}

#gui button img,
.submenu button img{
    margin-left: -3px;
    margin-top: -1px;
}

#unredo{
    top: -100px;
    left: -100px;
}

#menu-btn{
    top: -100px;
    right: -100px;
}

#tools-btn{
    bottom: -100px;
    left: -100px;
}

#colors-btn{
    bottom: -100px;
    right: -100px;
}

#colors button{
    display: inline;
    position: relative;
    width: 30px;
    height: 30px;
    margin: 2px;
}

#sliders,
#colors{
    position: fixed;
}

#files{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
    z-index: 2;
    overflow-y: scroll;
}

#files > img, #files > div {
    display: inline-block;
    margin: 15px;
    border-radius: 3px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    vertical-align: text-top;
}

#notification{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
}

#notification-msg,
#notification > button{
    width: fit-content; 
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 100px;
    position: relative;
    text-align: center;
}

#notification > button{
    width: 75px;
    height: 40px;
}

/* DRAGDEALER */
/*
.dragdealer {
  position: relative;
  height: 30px;
  background: url("img/line.png");
}

.dragdealer .handle {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.dragdealer .bar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

#red-bar{
  background: #f00;
}

#green-bar{
  background: #0f0;
}

#blue-bar{
  background: #00f;
}
    
.dragdealer .disabled {
  background: #898989;
}*/