body {
  font-family: Roboto, sans-serif;
}

h1 {
  margin: 0;
}

.container {
  max-width: 793px;
  margin: 25px auto;
  border: 1px solid #4A4F56;

  form {
    margin: 5px;
    border: 1px solid #4A4F56;

    header {
      background-color: #4A4F56;
      color: #FF8984;
      padding-block: 19px 12px;
      text-align: center;

      h1 {
        padding-bottom: 4px;
        font-size: 24px;
        font-weight: bold;
      }
    }

    main {
      color: #ffffff;
      background-color: #3B3F45;
      padding-top: 20px;

      div {
        display: flex;
        align-items: center;
        width: 534px;
        height: 39px;
        margin: auto;
        position: relative;
        transition: all .1s ease-in;

        &:nth-of-type(2n+1) {
          background-color: #88839E;
          border-top: 3px solid #88839E;
          border-bottom: 3px solid #88839E;
        }

        &:nth-of-type(2n) {
          background-color: #7A7593;
          border-top: 3px solid #7A7593;
          border-bottom: 3px solid #7A7593;
        }

        &:has(:checked) {
          color: rgba(255, 255, 255, 0.3)
        }

        &:hover {
          background-color: #625E77;
          border-color: #ffffff;
        }

        &:active {
          background-color: #ff0000;
        }

        input {
          display: none;

          &:checked+label {
            &:after {
              content: url(images/vector.png);
              position: absolute;
              left: 15px;
            }
          }

          &:checked+label>span {
            &::before {
              content: "";
              background-color: #FFFFFF;
              width: 100%;
              height: 1px;
              position: absolute;
              opacity: 0.3;
              bottom: 10px;
            }
          }
        }

        label {
          font-size: 18px;
          height: 100%;
          display: flex;
          align-items: center;
          width: calc(100% - 47px);
          position: absolute;
          padding-left: 47px;

          &::before {
            content: "";
            width: 19px;
            height: 19px;
            background-color: #FFFFFF;
            position: absolute;
            left: 12px
          }

          span {
            display: flex;
            align-items: center;
            position: relative;

            &::after {
              content: "";
              font-size: 11px;
              margin-left: 5px;
              margin-top: 2px;
            }
          }
        }

        #pickles+label>span {
          &::after {
            content: "(for the next lessons about CSS)";
          }
        }

        #apples+label>span {
          &::after {
            content: "(for more CSS manipulations)";
          }
        }

        #oranges+label>span {
          &::after {
            content: "(because they are awesome)";
          }
        }

        #plates+label>span {
          &::after {
            content: "(hm... they always dissapear)";
          }
        }

        #bentos+label>span {
          &::after {
            content: "(for the next lessons about CSS)";
          }
        }

        #sake+label>span {
          &::after {
            content: " (for my friends)";
          }
        }
      }
    }

    footer {
      padding-block: 45px;
      background-color: #3B3F45;
      text-align: center;

      button {
        width: 534px;
        height: 39px;
        font-size: 18px;
        color: #FF8984;
        background-color: #4A4F56;
        transition: all .1s ease-in;
        border-top: 3px solid #4A4F56;
        border-bottom: 3px solid #4A4F56;

        &:hover {
          border-top: 3px solid #FFFFFF;
          border-bottom: 3px solid #FFFFFF;
        }
      }
    }
  }
}