@charset "UTF-8";
.color-values p {
  margin: 0;
  text-align: start !important;
  word-wrap: normal;
}

html {
  background-image: url(../images/LOGO_PMHS_RGB.jpg);
  background-size: cover;
}

.color-view {
  width: 90%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

#color-window {
  height: 107px;
  width: 200px;
  border-radius: 1px;
  border: 2px solid hsl(0, 0%, 10%);
  background-color: hsl(190, 100%, 50%);
}

img {
  height: 200px;
  width: 200px;
}

form {
  display: flex;
  flex-direction: column;
}

.html > article > form > label {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 5px;
  margin-top: 20px;
}

input {
  width: calc(100% - 0.5rem);
  margin: 0.25rem;
  padding: 0;
}

.sliderBox {
  border: 1px solid #000;
  border-radius: 2px;
}

.hue {
  /* TODO: Hue saturation / lightness bei Änderungen auch aktualisieren */
  background-image: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(30, 100%, 50%) 8.3%, hsl(60, 100%, 50%) 16.6%, hsl(90, 100%, 50%) 25%, hsl(120, 100%, 50%) 33.3%, hsl(150, 100%, 50%) 41.6%, hsl(180, 100%, 50%) 50%, hsl(210, 100%, 50%) 58.3%, hsl(240, 100%, 50%) 66.6%, hsl(270, 100%, 50%) 75%, hsl(300, 100%, 50%) 83.3%, hsl(330, 100%, 50%) 91.6%, hsl(0, 100%, 50%) 100%);
}

.saturation-color {
  background-color: hsl(190, 100%, 50%);
}

.alpha-color {
  /* background-color: hsla(190, 100%, 50%, 1); */
}

.saturation {
  background-image: linear-gradient(to right, hsl(190, 0%, 50%) 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 0%);
}

.lightness {
  background-image: linear-gradient(to right, #000, hsl(190, 100%, 50%), transparent 100%);
}

.alpha {
  background-image: linear-gradient(to right, hsla(190, 100%, 100%, 0), hsl(190, 100%, 50%));
}

.alphaImg {
  background-image: url(../images/LOGO_PMHS_RGB.jpg);
  background-size: contain;
  background-repeat: repeat-x;
}

#resetButton {
  margin-top: 20px;
  text-align: center;
}

.glow-on-hover {
  height: 50px;
  outline: none;
  color: #fff;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.color-wheel-overlay {
  background-color: #fff;
  position: absolute;
  top: 35px;
  left: 35px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 1px solid black;
}

.color-wheel-bg {
  position: relative;
  background-image: url(../images/LOGO_PMHS_RGB.jpg);
  background-size: contain;
  width: 150px;
  margin-bottom: 10px;
  border-radius: 100%;
}

#color-wheel {
  width: 150px;
  height: 150px;
  background: conic-gradient(hsl(0, 100%, 50%) 0%, hsl(30, 100%, 50%) 8.3%, hsl(60, 100%, 50%) 16.6%, hsl(90, 100%, 50%) 25%, hsl(120, 100%, 50%) 33.3%, hsl(150, 100%, 50%) 41.6%, hsl(180, 100%, 50%) 50%, hsl(210, 100%, 50%) 58.3%, hsl(240, 100%, 50%) 66.6%, hsl(270, 100%, 50%) 75%, hsl(300, 100%, 50%) 83.3%, hsl(330, 100%, 50%) 91.6%, hsl(0, 100%, 50%) 100%);
  border-radius: 50%;
  border: 1px solid black;
}

.pin {
  position: absolute;
  border-radius: 100%;
  background-color: #5A5A5A;
  border: 3px solid white;
  cursor: pointer;
  width: 23px;
  height: 23px;
  left: 61px;
  top: 120px;
}

/*# sourceMappingURL=hsl-helper.css.map */