html, body {
  height: 100%;
  width: 100%;
}

.app-title{
  padding:10px;
  color:#b5e1f7;
  background-color:#00233d;
  width:150px;
}

.invisible{
  display:none;
}

.filter-content{
  display:flex;
}

.filter-content > *{
  width:60px;
  height:60px;
  margin-right:15px;
  padding:10px;
  background-color: #80c8f4;
  border:5px solid white;
  border-radius:50%;
}

/* .filter-content > *:active{
  border:5px solid black;
} */

.filter-content-active{
  border:5px solid black;
}

canvas{
  padding:0px;
  margin:0px;
}

.btn{
  border:1px;
  border-radius:5px;
  padding:10px;
  background:#ffff70;
  color:#242424;
}

.btn:hover{
  background:#dfdf62;
}

.btn:disabled{
  background:#87873b;
  cursor: not-allowed;
}