body {
  text-align: center;
  font-family: sans-serif;
  display: grid;
  place-items: center; /* gridの時に縦横を一気に指定する */
  height: 100vh;
  background: #000;
}

header {
  width: 100%;
  height: 150px;
  &
  img {
    width: 300px;
    height: 120px;
  }
}



div.colorPicker, div.mix-btn, .color-picker-box {
  background: #fff;
  padding: 2em;
  border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
  width: 12.5em;
  box-shadow: 0 0 1rem #ddd;
}

div.mix-btn {
  margin-top: 4em;
  padding: .5em 2em;
  &
  a {
    color: black;
  }
}

div.mix-btn {
  margin: 5em auto;
  transition: transform .3s ease;
}

div.mix-btn:hover {
  transform: scale(1.05) rotate(.5deg);
}

div > button.copy-btn {
  display: none;
}

div.mix-btn > a {
  text-underline-offset: .5em;
  text-decoration-thickness: .03em;
}

/* /mix-color/index.html */
p.plus {
  /* scale: 3; */
  font-size: 3em;
  color: #fff;
}

div.color-box {
  display: flex;
  align-items: center;
  gap: 4em;
}

div.circle, div.back-btn {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 1rem #ddd;
}

div.back-btn {
  margin: 5em auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .3s ease;
  &
  a {
    text-decoration: none;
    color: #276ab7;
    font-weight: 700;
    font-size: 1.2em;
    
  }
}

div.back-btn:hover {
  transform: scale(1.1) rotate(.9deg);
}