body {
    background-color: #333;
    color: white; user-select: none;
    font-family: Open Sans, sans-serif;
}

#titleLabel {
    width: fit-content; position: fixed; transform: translate(-50%, -50%);
    top: -65px; left: 50%; font-weight: bold;
}

#todosFrame {
    width: 495px; height: 480px; padding: 10px;
    background-color: #1f1f1f;
    position: fixed; transform: translate(-50%, -50%);
    top: 54%; left: 50%; border-radius: 15px;
    display: flexbox; flex-direction: column;
}

#tasksFrame { width: 100%; height: calc(100% - 42px); overflow-y: auto; }
#tasksFrame::-webkit-scrollbar { width: 0; }

#taskmakerFrame {
    width: 98%; height: 42px; position: fixed;
    bottom: 5px; background-color: #2b2b2b; display: flex;
    border-radius: 12px; left: 50%; transform: translate(-50%);
    align-items: center;
}

#taskmakerFrame input {
    width: 89%; height: 18px; margin-left: 5px; 
    padding: 5px; border-radius: 10px; border-style: solid;
    background-color: #232323; border-width: 2.5px; color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#taskmakerFrame input:focus { outline: none; box-shadow: none; }

#taskmakerFrame button {
    width: 28px; height: 28px; border-radius: 25px; border-style: solid;
    border-color: #fff; color: #fff; background-color: #0074ff;
    font-size: 15px; margin: 4.25px; cursor: pointer; font-weight: bold;
}

@keyframes todoFrame_onHover {
    from {background-color: #1f1f1f;}
    to { background-color: #333; }
}

@keyframes todoFrame_onLeave {
    from {background-color: #333;}
    to { background-color: #1f1f1f; }
}

@keyframes checkButton_onHover {
    from { background-color: transparent; }
    to { background-color: #009900; }
}

.todoFrame {
    width: 100%; height: 35px; border-radius: 5px; margin-top: 3.5px;
    display: flex; align-items: center;
}

.todoFrame:hover { animation: todoFrame_onHover 200ms forwards; }
.todoFrame:not(:hover) { animation: todoFrame_onLeave 200ms forwards; }

.checkButton {
    width: 25px; height: 25px; border-radius: 25px; border-style: none;
    margin: 5px; background-color: transparent; color: white;
    cursor: pointer;
}

.checkButton:hover { animation: checkButton_onHover 200ms forwards; }