main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #a9a9a9;

}

#version{
    flex: 0;
    width: 90%;
    display: block;
}


#version p{
    color: #393939;
    font-size: 0.8rem;
    margin: 0px;
    text-align: right;
}

#topbar{
    flex: 0 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 90%;
}


#topbar p {
    text-align: center;
    width: 100%;
    border: 2px solid #a9a9a9;
    margin: 0px;

}

#tasks {
    width: auto;
    max-width: 90%;
    min-width: 50%;
    flex: 10;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px 20px;

}

#tasks p {
    text-align: center;
    width:fit-content;
    margin-left:  auto;
    margin-right:  auto;
}

#inputs {
    flex: 1 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 90%;
}




.selected{
    background-color: #a9a9a9;
    color: #1a1515;
}

[contenteditable] {
    flex: 1 0;
    background-color: #1a1515;
    border-radius: 6px;
    border: 2px solid #a9a9a9;
    color: #a9a9a9;


    /*Make it not resizable*/
    resize: none;

    /*Text padding*/
    padding: 2px 5px;

    /*Center text vertically*/
    display: flex;
    align-items: center;

    /*On overflow go to new line*/
    overflow-wrap: anywhere;
    overflow-y: auto;
    overflow-x: auto;

    max-height: 80px;
    min-height: 30px;

}

/*Empty [contenteditable] no caret*/
[contenteditable]:empty {
    caret-color: transparent;
}

[contenteditable]:focus {
    outline: none;
    box-shadow: 0 0 5px 1px rgb(255, 255, 255, 0.5);
}

button {
    font-size: 1.5rem;
    background-color: #1a1515;
    border-radius: 6px;
    border: 2px solid #a9a9a9;
    color: #a9a9a9;
    flex: 0 0;
    cursor: pointer;
    padding: 2px 5px;
    height: 42px;
    

}


/*Don't do it on mobile*/
@media (pointer: fine) {
    button:hover {
        box-shadow: 0 0 5px 1px rgb(255, 255, 255, 0.5);
    }

}

button:active {
    box-shadow: 0 0 5px 1px rgb(255, 255, 255, 0.5);
}