fffiloni/simple-animation-doodle

1html, body {2  background: #0e1320;3  margin: 0;4  padding: 0;5  color: white;6  font-family: monospace;7}8h1{9  color: white;10  font-family: monospace;11  text-align: center;12}13div#main-container{14  margin-top: 160px;15  display: flex;16  justify-content: center;17}18div#left-panel, div#right-panel{19  /*border: 1px solid white;*/20  border-radius: 10px;21  display: flex;22  flex-direction: column;23  justify-content: center;24  align-items: center;25  height: auto;26  margin: 20px;27  width: 100px;28}29i{30  font-size: 30px;31}32span.spec-onions {33  display: flex;34  justify-content: center;35  align-items: center;36}37 38span.spec-onions > i.fa-solid.fa-circle {39  margin-left: -14px; 40}41button#hide-onion-btn {42  border-color: #ef70ff !important;43  color: #ef70ff !important;44}45button.tool-active {46  border-color: #70c9ff !important;47  color: #70c9ff !important;48}49 50div#right-panel > button, div#left-panel > button{51  background: none;52  border: 4px solid rgb(181,181,181);53  border-radius: 10px;54  color: rgb(181,181,181);55  cursor: pointer;56  height: 70px;57  margin-bottom: 10px;58  text-align: center;59  width: 70px;60}61 62div#right-panel > button:hover, div#left-panel > button:hover{63  color:white;64  border-color:white;65}66 67button#play-btn{68  border: 4px solid #6bff6f !important;69  color: #6bff6f !important;70}71button#stop-btn {72  border: 4px solid #ff303b !important;73  color: #ff303b !important;74}75div#timeline-ctn{76  align-items: center;77  /*border: 1px dashed white;*/78  border-radius: 10px;79  display: flex;80  height: 60px;81  justify-content: center;82  margin: 4px 0;83}84div#canvas-ctn{85  /*background: white;*/86  /*border: 1px solid white;*/87  /*border-radius : 10px;*/88  /*padding: 20px;*/89  /*width: 512px;*/90}91 92canvas {93  cursor: crosshair;94  display: block;95  border: 1px solid #dbdbdb;96  border-radius: 4px;97}98 99.aframe{100  display: flex;101  align-items: center;102  color: black;103  font-family: monospace;104  justify-content: center;105  width: 30px;106  height: 30px;107  background: white;108  border: 2px solid #ffffff;109  border-radius: 20px;110  cursor: pointer;111  margin: 0 2px;112}113 114.current-frame{115  background: #ffcf1e;116  border: 2px solid #ff9d0c;117  color: #422700;118  font-weight: bold;119}120 121#timeline, #ui-container{122  display: flex;123}