*,
*::before,
*::after {
    box-sizing: border-box;
}

/* :root {} */

html {
    color-scheme: light dark;
}

body {
    font-family: system-ui;
    font-size: 1.125rem;
    line-height: 1.5;
}

main {
    width: min(70ch, 100% - 4rem);
    margin-inline: auto;
}

img,
svg,
video {
    max-width: 100%;
    display: block;
}

input,
textarea {
    min-width: 0;
}

.form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-container > h1 {
    margin: 1em auto -0.0125em auto;
    text-align: center;
}

.form-container > #todo-list,
.form-container > #done-list {
    list-style: none;
    width: 100%;
    max-width: 18em;
    padding: 0;
}

#edit-todo-form-container,
#edit-todo-btn {
    display: none;
}

#edit-todo-form-container {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 1em;
    font-weight: 500;
}

#edit-todo-form-container > input[type="text"] {
    margin: 1em auto -0.0125em auto;
    padding: 0.5em;
    border: 2px solid black;
    width: 23.5em;
    max-width: 80vw;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: 75%;
}

#edit-todo-btn {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1.5em auto 0.65em auto;
    padding: 0.5em;
    width: 6em;
    height: 2.75em;
    font-weight: 600;
    font-size: 80%;
}

#todo-header,
#done-header {
    text-align: center;
    margin: 1em auto -0.75em auto;
}
#todo-list > li,
#done-list > li {
    margin: 0.75em 0;
    padding: 0.25em;
    border-bottom: 2px solid black;
    font-weight: 500;
}

#todo-list > li > span > input[type="checkbox"] {
    float: right;
    margin-top: 0.4em;
    accent-color: black;
}

#todo-list > li > span > input:hover {
    scale: 1.25;
}

#todo-list > li > span > button,
#done-list > li > span > button {
    float: right;
    margin-right: 0.5em;
    margin-top: 0.1em;
    border: none;
    background-color: transparent;
}

#todo-list > li > span > button:hover,
#done-list > li > span > button:hover {
    scale: 1.25;
}

.todo-label,
.todo-input,
.todo-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1em auto 0.5em auto;
    font-weight: 500;
}

.todo-input {
    padding: 0.25em;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
    border: 2px solid black;
    border-radius: 5px;
    width: 20em;
    max-width: 80vw;
}

.todo-button {
    padding: 0.25em 0.5em;
    font-size: 0.9em;
    line-height: 1.5;
    background-color: #fff;
}

#edit-todo-btn:hover,
.todo-button:hover {
    scale: 1.1;
}
/* Icons */
.logo-icon {
    content: url("./assets/pencil-logo.svg");
    margin: 3em auto -1em auto;
    scale: 1.75;
    padding: 0.25em;
    padding-right: 0.1em;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-radius: 5px;
}
.del-icon {
    content: url("./assets/trash.svg");
    scale: 1.25;
}

.edit-icon {
    content: url("./assets/pencil.svg");
    scale: 1.25;
}