* {
  font-family:  -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  display:flex;
  min-height:100vh;
  justify-content: center;
  align-items: center;
  font-size:10vmin;
  margin:0;
  color:white;
}

/* canvas# {
  border:2px solid black;
  box-shadow: 2px 2px 0 black;
  border-radius:4px;
} */


canvas {
  background-color: red;;
}

body:not(.edit) #lumCanvas {
  opacity:0.0;
}


#hueCanvas {
  /* border-radius: 8px; */
  border-top: 16px solid currentColor;
}
body:not(.edit) #hue {
  height:0;
}


#info {
  display:
  flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

div#rectangle {
    width: 256px;
    height: 256px;
    border: 16px solid currentColor;
    overflow:
    hidden;
    display: flex;
    flex-direction: column;
    transition: height 218ms;
}

.edit div#rectangle {
  height: 288px;
}
#hue {
  height:48px;
  overflow:
  hidden;
  background-color: yellow;
  transition:
  height 1s;
  border:16px solid green;
  /* border-top:
  none; */
  /* box-sizing:
  border-box; */
  /* width:256px; */
}

div#title {
    font-size: 32px;
    flex-grow:1;
    /* color: white; */
}

#copy, #edit {
  font-size:12px;
  font-weight:
  bold;
  text-transform: uppercase;
  margin-left:1em;
  cursor:
  default;
  height: 2.5em;
}

#edit:before {
  content:"edit"
}
.edit #edit:before {
  content:"done"
}

.edit #lumCanvas {
  opacity:1.0;
  transition: opacity 1s ease-out;

  pointer-events: all;
}
canvas#lumCanvas {
    /* border-bottom: 16px solid white; */
    transition: opacity 200ms linear;
    pointer-events: none;
    opacity:0.0;
    /* box-shadow: inset 0 0 10px  1px black; */
    /* border: 1px solid rgba(0,0,0,0.1); */
}