/* © 2024 gparap */

:root {
  --custom-padding: 1rem;
  --custom-width: 256px;
  --custom-height: 256px;
}

body {
  background-color: var(--bs-secondary-color);
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column; /* stack children vertically */
  height: 100vh;          /* take up the full height of the viewport */
}

header {
  display: flex;
  background-color: var(--bs-secondary-color);
  width: calc(var(--custom-width) + var(--custom-padding));
  justify-content: center;
  align-items: center;
  color: var(--bs-light); /* vertically align content */
}

img {
  width: 2rem;
  height: 2rem;
  margin: 0.5rem;
}

h3 {
  line-height: 32px;
  margin: 0;
}

#container-color {
  width: calc(var(--custom-width) + var(--custom-padding));
  height: calc(var(--custom-height) * 2);
  background-color: #FFF;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

#overlay {
  justify-content: center;
  align-items: center;
  display: flex;
  padding-top: 1rem;
  max-width: fit-content;
  max-height: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  cursor: pointer;
}

#color {
  color: var(--bs-light);
}

button {
  color: var(--bs-light);
  margin-top: calc(
    var(--custom-height) * 1.75 - 
    var(--custom-padding) * 1.25);  /* move the button to the bottom */
}