@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --Check-Background: linear-gradient(
    to right,
    hsl(192, 100%, 67%),
    hsl(280, 87%, 65%)
  );
  --Bright-Blue: hsl(220, 98%, 61%);
  --background-color: hsl(235, 24%, 19%);
  --text-color: hsl(233, 14%, 35%);
}
a {
  text-decoration: none;
}
body.light {
  --background-color: #fff;
}
body {
  font-family: "Josefin Sans", sans-serif;
  width: 100vw;
  min-height: 100vh;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding-top: 120px;
  background-color: var(--background-color);
  .todo {
    input {
      background-color: var(--background-color);
    }
    .task {
      background-color: var(--background-color);
    }
    footer {
      background-color: var(--background-color);
      a {
        &:not(:first-child):hover {
          color: var(--background-color);
        }
      }
      .clear {
        &:hover {
          color: var(--background-color);
        }
      }
    }
    .mob-status {
      background-color: var(--background-color);
    }
  }

  &.dark {
    background-image: url(images/bg-desktop-dark.jpg);
    background-color: hsl(235, 21%, 11%);
  }
  &.light {
    background-image: url(images/bg-desktop-light.jpg);
    .todo {
      .task {
        color: hsl(235, 21%, 11%);
        border-bottom-color: hsl(233, 11%, 84%);
      }
    }
    .mob-status {
      color: hsl(235, 21%, 11%);
    }
  }
  .todo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36rem;
    .title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      margin-bottom: 30px;
      h1 {
        font-size: 35px;
        letter-spacing: 15px;
      }
    }
    input[type="text"] {
      width: 100%;
      padding: 15px;
      outline: none;
      border: none;
      box-shadow: 0 0 20px #00000047;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      caret-color: var(--Bright-Blue);
      color: var(--text-color);
      font-size: 15px;
      margin-bottom: 30px;
    }
    .tasks {
      width: 100%;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      box-shadow: 0 0 20px #00000047;
      margin-bottom: 30px;
      overflow: hidden;
      .task {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 30px;
        padding: 15px;
        font-size: 16px;
        color: hsl(234, 39%, 85%);
        border-bottom: 1px solid var(--text-color);
        input[type="checkbox"] {
          appearance: none;
          -webkit-appearance: none;
          left: 15px;
          position: relative;
          cursor: pointer;
          &:checked + p {
            text-decoration: line-through;
          }
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border: 2px solid var(--text-color);
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
          }
          &:checked::before {
            background-image: var(--Check-Background);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border: none;
          }
          &:checked::after {
            content: url(images/icon-check.svg);
            position: absolute;
            top: -7px;
            left: -4px;
          }
        }
        p {
          margin-left: 20px;
          color:var(--text-color);
        }
        .del {
          position: absolute;
          right: 30px;
        }
      }
    }
    footer {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 15px;
      border-bottom-left-radius: 3px;
      -webkit-border-bottom-left-radius: 3px;
      -moz-border-bottom-left-radius: 3px;
      -ms-border-bottom-left-radius: 3px;
      -o-border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      -webkit-border-bottom-right-radius: 3px;
      -moz-border-bottom-right-radius: 3px;
      -ms-border-bottom-right-radius: 3px;
      -o-border-bottom-right-radius: 3px;
      color: var(--text-color);
      font-size: 15px;
      div {
        display: flex;
        gap: 10px;
        a {
          color: var(--text-color);
          &:first-child {
            color: var(--Bright-Blue);
          }
        }
      }
    }
  }
  .mob-status {
    display: none;
  }
  .drag {
    font-size: 14px;
    color: var(--text-color);
  }
}
@media (max-width: 767px) {
  body {
    padding-top: 70px;
    &.light {
      background-image: url(images/bg-mobile-light.jpg);
    }
    &.dark {
      background-image: url(images/bg-mobile-dark.jpg);
    }
    .todo {
      width: 90%;
      .title {
        h1 {
          font-size: 25px;
          letter-spacing: 10px;
        }
      }
      input[type="text"] {
        font-size: 12px;
        margin-bottom: 20px;
      }
      .tasks {
        .task {
          font-size: 14px;
        }
      }
      footer {
        padding: 10px;
        font-size: 12px;
        position: relative;
        .status {
          display: none;
        }
      }
    }
    .mob-status {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin: 20px;
      width: 90%;
      padding: 10px;
      border-radius: 3px;
      box-shadow: 0 0 20px #00000047;
      color: var(--text-color);
      font-size: 15px;
      a {
        color: var(--text-color);
        &:first-child {
          color: var(--Bright-Blue);
        }
      }
    }
  }
}