/* Make sure to vertically center the text that's beside the icon */
#title {
   color: var(--pico-primary);
   display: flex;
   align-items: center;
   gap: 0.5em;
   justify-content: flex-start;
   align-content: flex-start;
}

.chosen-colors > header {
    font-weight: bold;
}

.derived-colors {
    display: flex;
    min-height: 9rem;
    box-shadow: var(--pico-card-box-shadow);
    border-radius: 0.9rem;
}

.gradient {
    display: flex;
    min-height: 1.5rem;
    box-shadow: var(--pico-card-box-shadow);
    border-radius: 0.9rem;
}

.main-color {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 9rem;
    box-shadow: var(--pico-card-box-shadow);
    border-radius: 0.9rem;
    cursor: pointer;
    font-weight: bold;
    transition: all .2s ease-in-out;
}

.sample-color {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 9rem;
    box-shadow: var(--pico-card-box-shadow);
    border-radius: 0.9rem;
    font-weight: bold;
    transition: all .2s ease-in-out;
    margin-bottom: 1em;
}

.main-color:hover,
.main-color:active,
.main-color:focus {
    font-size: 110%;
}

.derived-color {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    transition: flex-grow .2s ease-in-out, background .2s ease-in-out;
    cursor: pointer;
}

.derived-color:hover {
    flex-grow: 2;
}

.derived-color:first-child {
    border-radius: 0.9rem 0 0 0.9rem;
}

.derived-color:last-child {
    border-radius: 0 0.9rem 0.9rem 0;
}

.derived-color:only-child {
    border-radius: 0.9rem;
}

.derived-color > span {
    rotate: 90deg;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all .1s ease-in-out;	
}

.derived-color:hover > span,
.derived-color:active > span,
.derived-color:focus > span {
    rotate: 0deg;
    font-weight: bold;
}

#controls {
    display: flex;
    gap: 0.5em;
}

.save,
#generate,
#picker-label div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

#picker {
    width: 100%;
    margin: 0;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    height: 100%;
}

#picker-label {
    position: relative;
    margin: 0;
    width: 100%;
}

#feedback {
    color: var(--pico-muted-color);
}

#version {
   color: var(--pico-muted-color);
   text-align: center;
}

#version p {
   margin: 0;
}

.license {
   color: var(--pico-muted-color);
   padding-bottom: 0.5em;
}

dialog button {
    width: 100%;
    margin-bottom: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

#saved-colors {
    box-shadow: var(--pico-card-box-shadow);
    border-radius: 0.9rem;
}

.saved-color {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    min-height: 5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.saved-color:first-child {
    border-radius: 0.9rem 0.9rem 0 0;
}

.saved-color:last-child {
    border-radius: 0 0 0.9rem 0.9rem;
}

.saved-color:only-child {
    border-radius: 0.9rem;
}

dialog>article>header .close, dialog>article>header :is(a,button)[rel=prev] {
    margin-top: 5px;
}

.beat-fade {
   animation-name: beatFade;
   animation-duration: 500ms;
   animation-iteration-count: 2;
   animation-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

@keyframes beatFade {
  0% {
      transform: translateY(0px);
  }
  50% {
      transform: translateY(-20px);
  }
  100% {
      transform: translateY(0px);
  }
}

#donate {
    padding: 0;
    background: none;
    border: none;
    color: var(--pico-muted-color);
}