* {
      box-sizing: border-box;
    }

input[type=checkbox] {
        display: inline-flex;
        width: 20px;
        height: 20px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        -webkit-appearance: none;
        outline: 0;
        background: white;
        border-radius: 3px;
        border: 1px solid black;
        transition: border 0.3s ease;


    }
    input[type="checkbox"]:hover{
            border-radius: 3px;
            border: 1px solid #black;
            transition: border 0.3s ease;

    }
    input[type=checkbox]:checked {
            background-image: url('../img/check.png'), linear-gradient(135deg, #1E1E1E 0%, #1E1E1E 100%);
            background-repeat: no-repeat;
            background-position: center left 0px;
            background-size: 100%;

            border-radius: 3px;
            border: 0px solid black;
            transition: border 0.3s ease;


    }