* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* transformar a unidade rem em 10px em vez de 16px */
  font-size: 62.5%;

  /* definindo as variáveis css padrão do site */
  --gray-100: #151515;
  --gray-200: #222;
  --gray-300: #313131;
  --text-color: #d9d9d9;
  --text-color-100: #9d9d9e;

  /* a iluminação da aplicação vai ser baseada em HSL (Hue, Saturation, Lightness) */
  /* definindo a variável css global de hue, saturation e lightness de 273 (cada unidade do hsl)
    no qual haverá pra cada medida (hue,saturation,lightness) um input range
    que o usuário mudará na aplicação
  */
  --hsl-hue: 273;
  --hsl-saturation: 98%;
  --hsl-lightness: 50%;

  /* definindo a variável global hsl */
  --hsl-current-color: hsl(
    var(--hsl-hue),
    var(--hsl-saturation),
    var(--hsl-lightness)
  );

  /* essa cor vai ser usada no thumb do input range do hue (botão do input range) */
  --hue-range-current-color: hsl(var(--hsl-hue), 100%, 50%);

  /* definindo as variáveis que vão ser utilizadas no esquema de cores embaixo dos inputs  */
  --hsl-current-color-current: var(--hsl-current-color);
  --hsl-current-color-extra-light: hsl(
    var(--hsl-hue),
    var(--hsl-saturation),
    90%
  );
  --hsl-current-color-lighter: hsl(var(--hsl-hue), var(--hsl-saturation), 75%);
  --hsl-current-color-light: hsl(var(--hsl-hue), var(--hsl-saturation), 60%);
  --hsl-current-color-normal: hsl(var(--hsl-hue), var(--hsl-saturation), 45%);
  --hsl-current-color-dark: hsl(var(--hsl-hue), var(--hsl-saturation), 30%);
  --hsl-current-color-darker: hsl(var(--hsl-hue), var(--hsl-saturation), 15%);

  /* fazendo a cor arco-iris do input range (input de hue do hsl) */
  --rainbow-color: linear-gradient(
    124deg,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
}
body {
  font-weight: 300;
  font-family: "Raleway", sans-serif;
}

button {
  cursor: pointer;
}

/* utility classes */
/* estilização para screen readers para indicar o input de range */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* main css */
body {
  min-height: 100vh;
  width: 100%;
  background-color: var(--gray-200);
  color: var(--text-color);
  display: grid;
  place-content: center;
}

.app {
  background-color: var(--gray-100);
  width: 40rem;
  min-height: 100vh;

  display: flex;
}

.light {
  background-color: var(--hsl-current-color);
  opacity: 0.9;
  position: absolute;
  top: -60rem;
  box-shadow: 0px 0px 53px 13px var(--hsl-current-color);
  border-radius: 100%;
  right: calc(50% - 40rem);

  width: 80rem;
  height: 80rem;
}

.light-adjustment {
  position: relative;
  width: 100%;
  padding: 4.8rem;
  width: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 3.2rem;
}

.title {
  font-weight: 300;
  font-size: 3rem;
}

.system-color {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.system-color {
  width: 100%;
}

.range-wrapper {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
}
.range-wrapper i {
  font-size: 2.4rem;
}

.range-wrapper input {
  width: 100%;
}

.color-description {
  font-size: 1.2rem;
  color: var(--text-color-100);
}

.scheme-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.color-schemes {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  align-items: center;
}

.color-schemes .color-current {
  border-radius: 4px;
  border: 1px solid var(--text-color-100);
}

.color-group {
  display: flex;
  border-radius: 4px;
  border: 1px solid var(--text-color-100);
  overflow: hidden;
}

.color-schemes .color {
  background: #231322;
  width: 3.2rem;
  height: 4rem;
  transition: width 300ms 100ms ease-in-out;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.color-schemes .color:hover {
  width: 8rem;
}
.color-schemes .color span {
  opacity: 0;
  transition: opacity 300ms;
  transition-delay: 100ms;
  background-color: #00000077;
}
.color-schemes .color:hover span {
  opacity: 1;
}

.color-schemes .color-current {
  background-color: var(--hsl-current-color);
}
.color-schemes .color-extra-light {
  background: var(--hsl-current-color-extra-light);
}
.color-schemes .color-lighter {
  background: var(--hsl-current-color-lighter);
}
.color-schemes .color-light {
  background: var(--hsl-current-color-light);
}
.color-schemes .color-normal {
  background: var(--hsl-current-color-normal);
}
.color-schemes .color-dark {
  background: var(--hsl-current-color-dark);
}
.color-schemes .color-darker {
  background: var(--hsl-current-color-darker);
}