ToDo.css

*{
    box-sizing: border-box;
}

body{
    margin: 0 auto;
    font-family: 'Josefin Sans', serif;
    font-size: 16px;
    width:100%;
    max-width: 375px;
    background-color: hsl(0, 0%, 98%);

}

body.dark-mode {
background-color: hsl(235, 21%, 11%) ;
color: hsl(234, 39%, 85%) ;
}
body.dark-mode header {
    background-image:
    url('images/bg-mobile-dark.jpg');
}
body.dark-mode .create-todo,
body.dark-mode .entry-tab,
body.dark-mode #todo-input,
body.dark-mode #filter-card ul,
body.dark-mode .all-active-complete
{
    background-color: hsl(235, 24%, 19%);    
    box-shadow: none;
}
body.dark-mode #todo-input{
    color: hsl(236, 9%, 61%);
}
body.dark-mode .entry-tab{
    border-bottom: hsl(234, 11%, 52%) solid 0.5px;
    }
    

header {
    justify-content: space-between;
    padding: 1rem;
    padding-bottom: 5rem;
    padding-top: 1.5rem;
    background: no-repeat;
    background-image:
    url('images/bg-mobile-light.jpg');

}

.header-container{
    display: flex;
    justify-content: space-between;
}

#sun, #moon{
align-self:center;
size: 5px;
}
      
.active {
    display: block;
}

.in-active {
    display: none;
}

input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}
.checkmark{
  position: absolute;
  /* top: 0;
  left: 0;
  height: 25px;
  width: 25px; */
  background-color: red;
}

button, .checkmark, #delete {
margin: auto 1em;
align-items: center;
}

#delete {
align-self:flex-end;
max-height: 19px;
max-width: 19px;
}

button, .checkmark{
min-height: 23px;
min-width: 23px;
border-radius: 50%;
margin-right: 0;
background-color: rgba(255, 255, 255, 0);
border: solid rgba(211, 210, 210, 0.637) 0.5px;
}

/* PROBABLY THE TRICKIEST PART OF THE CSS */
button:hover,
.checkmark:hover
 {
    border:2px solid transparent; 
    background:linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%)) border-box; 
    -webkit-mask: 
       linear-gradient(#fff 0 0) padding-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out; 
    mask-composite: exclude;
}


button:focus, .button-active, .button-active:hover,
.custom-checkbox input:checked ~ .checkmark { 
    border: none;
    background-image:
    url('images/icon-check.svg'),
    linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%));
    ;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask:unset;
    -webkit-mask-composite: unset; 
    mask-composite: exclude;

}
/*  */


#sun, #moon, button, #delete, 
.entry-tab, #filter-card li, #clear-completed, .all-active-complete span{
    cursor: pointer;
} 

h1{
color: rgba(255, 255, 255, 0.822);
}

.container {
margin: 0 auto;
padding: 0;
max-width: 337.5px;
overflow: hidden;
}

.create-todo, .entry-tab, 
#filter-card ul, .all-active-complete{
display: flex;
flex-wrap:nowrap;
height: 3.5em;
padding: 0;
margin: 16px auto;
border-radius: 3px;
box-shadow:0 3px 18px 3px #51515262;
border: 0;
background-color: #fff;
align-items: center;
}

#todo-input, .entry{
font-family: 'Josefin Sans', sans-serif;
font-size: inherit;
overflow: hidden;
height: 16px;
width: 14.84375em;
border: 0;
margin: auto 1em;
/* margin-left: 0.3em; */
outline: none;
}

.create-todo{
margin-bottom:1em;
}

.entry-tab{
display: flex;
border-bottom: hsl(233, 11%, 84%) solid 1px;
margin: 0 auto
}

.completed-task{
    text-decoration: line-through;
    color: hsl(236, 9%, 61%);
}

li{
list-style: none;
}

#filter-card ul{
display: flex;
justify-content: space-between;
margin-top: 0;
font-size: 14px;
color: hsl(236, 9%, 61%);
}
#filter-card ul li{
    margin: auto 1em;
}
    
.task-counter {
    justify-self: flex-start;
}
#clear-completed{
    justify-self: flex-end;
}

.all-active-complete {
display: flex;
justify-content:center;

}

span{
    color: hsl(236, 9%, 61%);
}

input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 3em;
    cursor: pointer;
}
input[type="radio"].completed-radio{
    width: 5.5em;
}
  .all-active-complete span{
      margin:auto 0.5em;
      font-weight: 700;
  }
  input + span{
    transition: all .3s ease;
  }

input:hover + span,
.task-counter:hover,
#clear-completed:hover
{
transition: all .3s ease;
 color: hsl(235, 19%, 35%)
}
input:checked + span,
input:focus + span {
  color: hsl(220, 98%, 61%);
}


@media (max-width:997px){
    #big-filter-card{
        display: none;
    }
}

@media (min-width: 997px){
    
    body {
        font-size: 18px;
        max-width: 1440px;
        /* background-color: blueviolet; */
    }

    header {
        background-image:
        url('images/bg-desktop-light.jpg');
        padding-top: 3.5rem;
    }
    
    body.dark-mode header {
        background-image:
        url('images/bg-desktop-dark.jpg');
    }
    
    .container {
        max-width: 38%;
        /* border: red 2px solid; */
    }
        
    #todo-input, .entry{
        height: 18px;
        width: 22.4em;
    }
       
    .lone-all-active-complete {
        font-size: 14px;
    }

    #big-filter-card {
        color: hsl(236, 9%, 61%);
        justify-content:space-around;
        font-size: 14px;
        }
        #task-counter {
        margin-left:1em;
        margin-right: auto;
        justify-self:flex-start ;
        }
        #task-counter span{
            color: inherit;
            font-weight: inherit;
            margin: 0;
        }
        #big-filter-card label span{
        margin: 0.5em;
        }
        #big-filter-card #clear-completed {
        margin-right:1em;
        text-align: right;
        margin-left: auto;
        justify-self:flex-end ;
        }
        @media (max-width:1034px){
            #big-filter-card label span{
                margin: 0.2em;
                }
             #big-filter-card .task-counter {
                margin-right: 0.7em;
                }
                #big-filter-card #clear-completed {
                margin-left: 0.7em;
                }
        }  

}