* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #23C892;
    user-select: none;
}
@font-face {
    font-family: "text";
    src: url(fonts/Story_Script/StoryScript-Regular.ttf);
}
.container {
    width: 90%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    background-color: #F8F7FF;
}
.title {
    font-size: 45px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 20px;
}
#mute {border-radius: 50%;padding: 5px; border: none; transition: 0.5s ease-in;}
#mute:hover {fill: #ff4545; transform: scale(1.1);transform: rotate(360deg);}
#theme {border-radius: 50%;padding: 5px; border: none; transition: 0.5s ease-in;}
#theme:hover {fill: #ff4545; transform: scale(1.1);transform: rotate(360deg);}
#input {
    width: 90%;
    border-radius: 15px;
    margin: 20px 0;
}
.taskarea{
    margin: 15px 0;
    display: flex;
}
#task {
    width: 90%;
    font-size: 26px;
    height: 50px;
    border-radius: 15px;
    padding: 10px 15px;
    margin: 0 0 0 2vw;
    flex: 4;
    min-width: 0;
    font-family: "text";
    transition: 0.3s ease-in;
    border: none;
}  
#task:hover,#task:focus {box-shadow: 13px 13px 10px -5px #23C892; transform: scale(1.01);}
.menu {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-width: 0;
}
select {
    padding: 10px 20px;
    border-radius:15px;
    font-weight: bold;
    cursor: pointer;
    background-color: #F8F7FF;
    font-family: "text";
    font-size: 20px;
    transition: 0.3s ease-in;
}
select:hover {background-color: #23C892; color: #2A1E5C; transform: scale(1.1);}
.btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#add,#sort {
    margin: 15px 15px 15px 0;
    padding: 15px 45px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s ease-in;
}
#add:hover,#sort:hover {background-color: #23C892; color: #F8F7FF; transform: scale(1.1);}
.progress {
    width: 80%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px 0;
}
progress {
    flex: 1;
    height: 50px;
    accent-color:#23C892;
}
#deleteAll {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    fill: #DC143C;
    transition: transform 0.2s ease-in;
}
#deleteAll:hover {
    transform: scale(1.1);
    fill: black;
    background-color: #DC143C;
}
#list {
    width: 90%;
    display: flex;
    flex-direction: column;
    height: 600px;
    overflow: auto;
    overflow-x: hidden;
}
.todo {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    border: #2A1E5C solid 1px;
    gap: 1vw;
    border-radius: 50px;
}
.todo > input[type="checkbox"] {width: 20px; height: 20px; margin: 0 2vw 0 0;}
.todo > p {flex: 1; font-size: 26px; font-family: "text";}
.todo > button {border-radius: 50%; width: 50px; height: 50px;}
.todo > button:hover {background-color: #ff4545; fill: #F8F7FF;}

.todo.deleted {
    transform: translateX(100%);
    opacity: 0;
    transition:all 0.5s ease;
}
#deletechecked {border-radius: 50%; border: none; background-color: transparent;fill: #ff4545; transition: 0.2s ease-in;}
#deletechecked:hover {transform: scale(1.1); fill: #2A1E5C;}

.empty {font-size: 36px; align-self: center;display: block;transition: 0.2s ease-in;}
.empty:hover {color: #23C892; transform: scale(1.1);}
@media (max-width: 800px) {
    .menu {flex-direction: column; justify-content: center; align-items: center;}
    .custom {width: 100%;}
    .taskarea {flex-direction: column; gap: 20px;}
}
@media (max-width: 500px) {
    .title {font-size: 26px;}
    #task {font-size: 20px;}
    select {padding: 6px 15px;}
    #add {padding: 8px 30px;font-size: 15px;}
    #sort {padding: 8px 25px;font-size: 15px;}
    .progress {gap: 1vw;}
    #deleteAll {width: 35px;height: 35px;}
    #deletechecked {width: 35px;height: 35px;}
    #deletechecked > svg{width: 35px;height: 35px;}
    progress {height: 20px;}
    .todo {gap: 3vw; padding: 6px 10px;}
    .empty {font-size: 20px;}
    .todo > p {font-size: 20px;}
    .todo > button {width: 30px; height: 30px;}
}