@import url('http://fonts.cdnfonts.com/css/nexa-bold');
.top-bar {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 0px; 
    background-color: black;
    z-index: 1;
}
.foot-bar {
    position: absolute;
    bottom: -35%;
    left: 2%;
    /* transform: translate(-50%, 0%); */
    width: 0%;
    height: 50%;
    background-color: black;
    color: white;
    text-align: center;
    transition: bottom 400ms;
    /* background-image: linear-gradient(teal, white); */
    /* linear-gradient(to bottom right, brown, white); */
    z-index: 1;
    /* background-color: gray; */
    /* color: silver; */
}

#renderCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    touch-action: none;
}
#renderCanvas:focus {
    outline: 0;
    border:none;
    color: rgba(0, 0, 0, 0);
}

input[type="checkbox"]:focus{
    outline:0;
}
i{
    color: white;
}

.promptDialog {
    visibility: hidden;
    width: 160px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 3;
    top: -100px;
    left: 50%;
    transform: translate(-50%, 0px);
    /* top: -35%;
    left: 30%; */
    /* top: 120%;
    left: 0%; */
  }
  
.promptDialog::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
  
    
  .icon-button {
    transform: translateX(-10%);
    transition: box-shadow .25s ease, background .25s ease, transform .25s ease;
  }
  
  .icon-button:hover {
    /* color: red; */
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
  }
  
  .icon-button:active {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
    transform: scale(0.9);
  }
  
  .icon-button:focus {
    outline: none;
    box-shadow: none;
  }