/* Reset básico para manter a consistência em diferentes navegadores */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
/* Estilo do corpo da página */
body {
    background-color: #D3D3D3; /* Cor padrão: cinza claro */
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
/* Estilo do cabeçalho */
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
header button {
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/* Estilo principal */
main {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
}
/* Estilo do título da nota */
#note-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}
/* Estilo do conteúdo da nota */
#note-content {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    
}
/* Estilo dos Modais */
.modal {
    display: none; /* Oculto por padrão */
    position: fixed; /* Fixo em tela cheia */
    z-index: 1; /* Sobrepõe outros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scroll se necessário */
    background-color: rgba(0, 0, 0, 0.4); /* Fundo escuro com transparência */
}
.modal-content {
    background-color: #fff;
    margin: 20% auto; /* Centralizado */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largura do modal */
    max-width: 500px; /* Largura máxima */
    border-radius: 10px;
}
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/* Estilo das opções de cores no modal */
.color-options {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
.color-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}
.color-option[data-color="#D3D3D3"] { background-color: #D3D3D3; } /* Cinza claro */
.color-option[data-color="#ADD8E6"] { background-color: #ADD8E6; } /* Azul claro */
.color-option[data-color="#90ee99"] { background-color: #90ee99; } /* Verde claro */
.color-option[data-color="#f8b5bf"] { background-color: #f8b5bf; } /* Vermelho claro */
.color-option[data-color="#ff728a"] { background-color: #ff728a; } /* Rosa claro */
.color-option[data-color="#fdee6b"] { background-color: #fdee6b; } /* Amarelo claro */
.color-option[data-color="#63a0fc"] { background-color: #63a0fc; } /* Lilás claro */
.color-option[data-color="#33cc85"] { background-color: #33cc85; } /* Cinza claro */
/* Estilo das categorias existentes no modal */
#existing-categories {
    margin-top: 20px;
}
#existing-categories .category-option {
    background-color: #eee;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    cursor: pointer;
}
.category-option.selected-category {
    color: #b80f52; /* Vermelho para destacar a categoria selecionada */
    font-weight: bold; /* Opcional: Deixe o texto mais destacado */
}
button#task-button,
button#sync-button, 
button#save-category-button, 
button#save-image-button,
button#save-color-button,
button#confirm-delete-button,
button#cancel-delete-button,
button#copy-button {
    background-color: #b80f52;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    margin: 10px 0;
}
input[type="text"] {
    width: 50%;
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
}
    .note-image {
        margin-top: 20px;
        max-width: 180px;
        text-align: center;
        height: auto;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
@media (min-width: 601px) {
    .note-image {
        margin-top: 20px;
        max-width: 280px;
        text-align: center;
        height: auto;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .modal-content {

    margin: 10% auto;
    
}
}