:root{
    --body-font: 'Figtree' , sans-serif;

    --color-body: #E8F3F8;
    --color-header: #061b25;
    /* --color-text: var(var(--color-header)); */
    --color-text: #061b25;
    --color-text-muted: #A4D0E3;
    --color-input: #082937;
    --color-input-lighter: #0b374a; 
    --color-secondary: #FF8C42;
    --color-secondary-darker: #cc7035;
    --color-secondary-lighter: #ffa368;
    --color-tertiary: #1C89B8;
    --color-text-badge: #E8F3F8;
    --color-text-disabled: #77B8D4;

    --global-border-radius: 6px;
    --global-transition: all .2s ease-in-out;
}

html{
    font-size: 18px;
}
body{
    font-family: var(--body-font);
    background-color: var(--color-body);
    color: var(--color-text);
}

.container{
    padding: 0 1.5rem;
}

button, input[type = "checkbox"]{
    cursor: pointer;
}

ol, ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

h1{
    color: white;
    margin-bottom: 0 0 2rem;
}

a{
    color: var(--color-text);
    transition: var(--global-transition);
}
a{
    color: var(--color-secondary);
}

/* Form */
#todo-form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#todo-form input{
    background-color: var(--color-input);
    border: 0;
    padding: 1rem;
    border-radius: var(--global-border-radius);
    outline: 0;
    color: white;
}

#todo-form input:hover,
#todo-form input:focus{
    background-color: var(--color-input-lighter);
}
#todo-form input{
    background-color: var(--color-input);   
}

/* input field attribute */
#todo-form input::placeholder{
    color: var(--color-text-muted);
}
#todo-form button{
    border: 0;
    padding: 1rem;
    border-radius: var(--global-border-radius);
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    background-color: var(--color-secondary);
}
#todo-form button:hover{
    background-color: var(--color-secondary-darker);
}
#todo-form button:active{
    background-color: var(--color-secondary-lighter);
}

#todo-form button, #todo-form input{
    transition: var(--global-transition);
}

small,#todo-form button, stats span {
    font-size: 0.75rem;
}


/* HEADER */
#main-header{
    background-color: var(--color-header);
    padding: 3rem 0;
    margin-bottom: 2rem;    
}


/* STATS */
.stats{
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
}
.stats li{
    display: flex;
}
.stats span{
    padding: .25rem .5rem;
}
.stats span:first-child{
    background-color: var(--color-header);
    color: var(--color-text-muted);
    border-radius: var(--global-border-radius) 0 0 var(--global-border-radius);
}
.stats span:nth-child(2){
    background-color: var(--color-tertiary);
    color: var(--color-body);
    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;
    font-weight: 700;
}
.todo{
    margin-bottom: 4rem;
}
/* Todos list item (Each task) */
.todos li{
    background-color: white;
    border-radius: var(--global-border-radius);
    margin-bottom: 1rem;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.todos li div{
    display: flex;
    align-items: center;
    gap: .75rem;
}
/* This class is applied when a task is crossed off (complete) */
.todos li.complete {
    background-color: var(--color-disabled);
    text-decoration: line-through;
    color: var(--color-text-disabled);
}

/* redesigning the checkbox */
input[type='checkbox'] {
    /* Resetting the checkbox */
    appearance: none;
    background-color: transparent;
    margin: 0;
    /* Rebuilding the checkbox */
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-text);
    border-radius: 100%;    
    /* Tick mark position*/
    display: grid;
    place-content: center;
}

/* Adding the checkbox */
input[type='checkbox']::before {
    /* svg translated  encoded codes in css */
    content: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 1L4.5 9L1.5 5.5' stroke='%23D2E7F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    transform: scale(0);
    transition: var(--global-transition);
}
/* Disabling the border and background color of the tick  */
input[type='checkbox']:checked {
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
}
input[type='checkbox']:checked::before {
    transform: scale(1);
}

/* button in the li */
.todos li button{
    border: 0;
    padding: .25rem;
    display: grid;
    place-content: center;
    background-color: transparent;
}
/* adding the height and width to svg */
.todos li button svg{
    width: 1.25rem;
    height: 1.25rem;
}
.todos li button svg path{
    transition: var(--global-transition);
}
.todos li button:hover svg path{
    stroke: var(--color-text);
}
.todos li button:active svg path{
    transform: scale(.8); /* This shrink the x when clicked*/
}
/* Styling of the editable span. This style only applies when the span is clicked*/
.todos li span{
    padding: 2px;
    border-radius: var(--global-border-radius);
    transition: var(--global-transition);
}
.todos li span:focus{
    background-color: var(--color-body);
    outline: none;
}
/* changes only on hover */
.todos li span[contenteditable]:hover{
    background-color: var(--color-body);
}

/* Mobile responsivness */
/* 768 and above */
@media screen and (min-width: 768px) {
    .container{
        max-width: 30rem;
        margin: 0 auto;
        position: relative;
    }
    #todo-form{
        flex-direction: row;
    }
    #todo-form input{
        flex-grow: 1;
    }
}
/* 1024px and above */
@media screen and (min-width: 1024px){
    .stats{
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        top: 0;
        transform: translateX(-100%);
        padding-right: 4rem;
    }
}