@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root
{
    --body-font: Poppins, sans-serif;

    --color-text-muted: #a4d0e3;
    --color-disabled: #d2e7f1;
    --color-text-disabled: #77b8d4;
    --global-transition: all .2s ease-in-out;
}

*
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}
body
{
    font-size: 16px;
    font-family: Poppins;
}

.bg-dark1
{
    background-color: rgb(13, 0, 30);
}
.bg-aqua1
{
    background-color: rgb(212, 255, 255);
}
.bg-aqua2
{
    background-color: aqua;
}
.bg-aqua3
{
    background-color: #103075;
}
.bg-white2
{
    background-color: #f5f7f8;
}
.bg-warning2
{
    background-color: #f3cb7d;
}

.text-aqua3
{
    color: #103075;
}
.text-white2
{
    color: #f5f7f8;
}
.text-warning2
{
    color: #f3cb7d;
}

.add-todo-input
{
    height: 2.5rem;
    width: 20rem;
    border-radius: .25rem;
}

.add-todo-btn
{
    border: 2px solid #ffc107;
    border-radius: 1.5rem;
}

.complete-todo-list-btn, .delete-todo-list-btn
{
    border: 2px solid #000000;
    border-radius: 1.5rem;
}
.complete-todo-list-btn:hover, .delete-todo-list-btn:hover
{
    background-color: black;
    color: white;
}

li > *
{
    display: block;
    font-size: 1.2rem;
}

li
{
    list-style-type: none;
    border-radius: .5rem;
}

.btn-group button:nth-child(1):hover
{
    background-color: rgb(13, 0, 30);
}
.btn-group button:nth-child(2):hover, .add-todo-btn:hover
{
    background-color: #ffc107;
}

input[type='checkbox']
{
    appearance: none;
    background-color: transparent;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid black;
    border-radius: 100%;
    display: grid;
    place-content: center;
    transition: var(--global-transition);
}

input[type='checkbox']::before
{
    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='%2302E7F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    transform: scale(0);
    transition: var(--global-transition);
}

input[type='checkbox']:checked
{
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
}

input[type='checkbox']:hover
{
    cursor: pointer;
}

input[type='checkbox']:checked::before
{
    transform: scale(1);
}

.section-todo
{
    border-bottom: 3px solid #00008B;
}

a
{
    text-decoration: none;
    color: black;
}

.credits
{
    font-weight: 500;
}

@media screen and (max-width:576px) {
    .todo-p
    {
        font-size: 1.05rem;
    }
}

@media screen and (max-width:375px) {
    .add-todo-input
    {
        width: 15rem;
    }
}