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

:root {

  --background-primary: #F4F5FB;
  --background-secondary: #FFFFFF;

  --color-brand: #CA3884;
  --color-brand-hover: #A52C6B;
  --color-danger: #C93847;

  --content-primary: #080B12;
  --content-secondary: #374151;
  --content-tertiary: #9CA3AF;
  --always-white: #FFFFFF;

  --border-primary: #D1D5DB;
  --border-hover: #B9C2D0;


  --ff: "Inter", sans-serif;
  --title: 700 1.5rem/2rem var(--ff);
  --label: 600 1rem/1.25rem var(--ff);
  --paragraph: 500 1rem/1.25rem var(--ff);
  --link: 500 .875rem/1rem var(--ff);
  --input: 400 1rem/1.25rem var(--ff);

  --px: 2rem;
}

html {
  background-color: var(--background-primary);
}

header {
  display: flex;
  padding: 1.56rem;
  margin-bottom: 2.31rem;
  width: 100%;
  justify-content: center;
}

main {
  --max-width: 375px;
  width: min(var(--max-width), 100% - var(--px) * 2);
  margin-inline: auto;
}

h1 {
  font: var(--title);
  color: var(--content-primary);
  margin-top: 1rem;
}

a {
  text-decoration: none;
  font: var(--link);
  color: var(--color-brand);

  &:hover {
    color: var(--color-brand-hover);
  }
}

.desktop-only {
  display: none;
}

.add-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-top: 2.75rem;
}

input[type="text"] {
  height: 2.75rem;
  padding: 0.687rem 1.125rem;
  border-radius: .75rem;
  border: 2px solid var(--border-primary);
  background-color: var(--background-secondary);
  font: var(--input);
  color: var(--content-tertiary);
  flex: 1;

  &:hover {
    border-color: var(--border-hover);
  }

  &:focus {
    outline: none;
    color: var(--content-primary);
    border-color: var(--color-brand);
  }
}

button {
  all: unset;
  cursor: pointer;
}

.add {
  background-color: var(--color-brand);
  padding: 0.687rem 1.125rem;
  font: var(--label);
  color: var(--always-white);
  border-radius: .75rem;
  border: none;

  &:hover {
    background-color: var(--color-brand-hover);
  }
}

ul {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin-top: 2.5rem;

  & li {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    align-items: center;
    background-color: var(--background-secondary);
    border-radius: .75rem;
    position: relative;

    & input[type="checkbox"] {
      all: unset;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 85%;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        margin-block: auto;
        width: 1rem;
        height: 1rem;
        border: 1px solid var(--border-primary);
        border-radius: 0.375rem;
        display: flex;
      }

      &:hover::before {
        border: 1px solid var(--border-hover);
      }

      &:checked::before {
        border-color: var(--color-brand);
        background: var(--color-brand) url(assets/selected.svg) no-repeat center;
      }
    }

    & label {
      font: var(--paragraph);
      color: var(--content-secondary);
      margin-left: 1.75rem;
    }

    & button {
      margin-left: auto;
    }
  }
}

.removed {
  display: flex;
  align-items: center;
  padding: .75rem;
  margin-block: 2.25rem;
  border-radius: .75rem;
  gap: .5rem;
  font: var(--label);
  color: var(--always-white);
  background-color: var(--color-danger);
}

.warning {
  padding: 0;
  margin-left: auto;
}

.hide {
  display: none;
}

@media (width > 627px) {

  main {
    --max-width: 627px;
  }

  .desktop-only {
    display: initial;
  }

  .add-item {
    flex-direction: row;

  }
}