/* Aplicação de boas práticas, fonte e reset do posicionamento do body */
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    font-family: 'Bariol Regular', sans-serif;                                            
}


/* Definição cores do elemento raiz do documento */
:root {
    --bg-primary: #e5e7eb;
    --bg-secondary: #fff;
}

/* Estilização do card confirmação de exclusão */
.modal-delete-todo {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    background-color:rgba(255, 255, 255, 0.4);
    display: none;
    align-items: center;
    justify-content: center;  
}

/* Definição do tamanho mínimo do botão sim-delete */
.sim-delete {
    min-width: 130px;
}

/* Definição do tamanho mínimo do botão nao-delete */
.nao-delete {
    min-width: 130px;
}

/* Definição de tamanho, background, alinhamento e border-radius do container-sim-nao */
.container-sim-nao {
    align-items: center;
    justify-content: center;
    display: flex;
    background-color:transparent;
    min-width: 230px;
    width: 20%;
    text-align: center;
    padding: 3rem 0;
    border-radius: 8px;

}

/* Definição de background, cor e transform do hover */
.container-sim-nao button:hover {
    background-color:#202124;
    color: #e8eaed;
    transform: scale(1.1);
}

/* Definição de borda, border-radius, margin, padding e transição do botão */
.container-sim-nao button {
   border: none;
   border-radius: 0.75rem;
   padding: 1rem 2rem;
   margin: 0.5rem;
   transition: all 0.3 ease;
}

/* Dark mode - Início */
.btn-bk {
    font-size: 1.5rem;
    text-indent: 0.5rem;
    display:flex !important;
    align-items: center;
    justify-content: center;
  }

  input:checked {
    background-color:#202124 !important;
    border-bottom-color: #202124 !important;
    border-color:#e8eaed !important;
  }

  input {
    background-color:#e8eaed !important;
    border-bottom-color: #e8eaed !important;
    border-color:#202124 !important;
  }
  
  input[type="checkbox"]:focus {
    box-shadow: none;
  }
/* Dark mode - Fim */

/* Definição da fonte do body */
body {
    font-family: "Roboto", sans-serif;
}

/* Definição do tipo de cursor, borda, e decoração dos botões e tags a */
button,
a {
    cursor: pointer;
    border: 0;
    outline: 0;
    text-decoration: none;
}

/* Início do Header e estilização dos seus componentes */
header {
    width: 100%;
    padding-bottom: 2rem;
}

.container {
    width: 90%;
    max-width: 1000px;
    margin-inline: auto;
}

.title {
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: 0.4rem;
}

.wrap {
    flex: 1 1 100%;
    font-size: 1.2em;
    display: flex;
    justify-content: space-between;
}

.search {
    position: relative;
    flex: 1 1 auto;
}

.search label {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
}

.search-input {
    height: 2rem;
    padding-left: 2rem;
    padding-right: 0.5rem;
    width: 2rem;
    border-radius: 0.75rem;
    transform-origin: left;
    transition: all 0.3s ease-in-out;
    border: 0;
    box-shadow: 0 8px 8px -4px rgb(55, 106, 122);
}

.search-input.active {
    width: 100%;
    border-radius: 0.75rem;
}


.filter-btn {
    height: 2rem;
    padding-inline: 0.7rem;
    border-radius: 0.75rem;
    margin-left: 0.25rem;
}

.filter-modal {
    background-color: #f2f3f5;
    width: 260px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0, calc(100% + 2px));
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    transform-origin: 0 0;
    padding: 16px;
    z-index: 1;
    transition: scale 0.1s ease, opacity 0.1s ease;
}

.filter-modal.hidden {
    transform: scale(0.5);
    opacity: 0;
}
/* Fim do Header e estilização dos seus componentes */

/* Início da estilização do campo que adiciona os To-Dos */
.section-add-todo {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-primary);
    border-top-left-radius: 1.5rem 0.8rem;
    border-top-right-radius: 1.5rem 0.8rem;
    padding-top: 0.5rem;
}

.section-add-todo .extras {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.section-add-todo .extras.active {
    height: 70px;
}

.section-add-todo .extras > div {
    padding: 1rem;
}

.section-add-todo .data-incial {
    margin-right: 1rem;
}

.section-add-todo .add-task {
    width: 100%;
    padding: 0.5rem;
    position: relative;
    font-size: 1.5em;
}
.section-add-todo .add-task textarea {
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 0.625rem;
    border-radius: 0.75rem;
    border: 0;
    resize: none;
    font-size: 1rem;
    line-height: 1.3rem;
    box-shadow: 0 0 1px 1px #ccc;
    color: #3f424a;
}

.section-add-todo .add-task button {
    position: absolute;
    right: 0.86rem;
    bottom: 1.188rem;
    color: white;
    background-color: #5db075;
    border-radius: 50%;
    height: 1.875rem;
    width: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-add-todo .add-task button i {
    font-size: 0.75em;
    
}
/* Fim da estilização do campo que adiciona os To-Dos */

/* Definição de tamanho, margin, padding, tipo de display da classe todo-container */
.todo-container {
    width: 90%;
    max-width: 800px;
    margin-inline: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 4.375rem;
}

/* Definição de estilização de margin, posição, background, box-shadow e border-radius da task */
.task {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 2px 6px 2px rgba(60, 64, 67, 0.149);
    border-radius: 0.75rem;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
    background-color: #ccc;
    
}

/* Aplicação da propriedade transform no hover */
.task:hover {
    transform: scale(1.1);
}

/* Definição de tamanho de fonte, alinhamento, tamanho e word-wrap da classe  */
.task .title-task {
    word-wrap: break-word;
    font-size: 1.2em;
    text-align: left;
    width: 100%;
}

/* Deixar a task tachada quando a tarefa estiver realizada (completed = true) */
.tachado p {
    text-decoration: line-through;
}

/* Início da definição de estilização da classe check e task */
.task .check {
    position: absolute;
    left: 1rem;
    top: 1rem;
}

.task .check:checked + p {
    text-decoration: line-through;
}

.task .check i {
    font-size: 1.5em;
}

.task p {
    text-indent: 2rem;
}

.task .options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
    border-top: solid 1px #202124;
}

.task .options .id-task {
    margin-right: auto;
}

.task .options > button {
    background-color: transparent;
    padding: 0.5rem;
    margin-inline: 0.5rem;
}

.task .options button i {
    font-size: 1.2em;
}
/* Fim da definição de estilização da classe check e task */

/* Estilização do menu superior com background, tipo de display, alinhamento, margin, padding e box-shadow */
#menu-superior {
    background: rgb(58,159,180);
    background: linear-gradient(90deg, rgba(58,159,180,1) 22%, rgba(202,29,253,1) 99%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 8px -4px rgb(53, 90, 90);
}

/* Estilização da imagem do button da API */
#api-button img{
    height: 2.5rem;
}

/* Definição de opacidade e animação do hover da API */
#api-button img:hover{
    opacity: .5;
    transform: scale(1.2);
    animation: spin 1s ease-in;
}

/* Início e fim do tempo de duração da animação do keyframe */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg)}
}

/* Início da estilização do botão da API */
#api-button i {
    background-color: #fff;
    border-radius: 50%;
    padding: .25rem;
    color: #202124;
    font-size: 2rem;
    text-decoration: none;
}


#api-button i:hover {
    opacity: .75;
    transform: scale(1.2);
}
/* Fim da estilização do botão da API */

/* Estilização da classe api-card com background, padding, margin, border-radius e box-shadow */
.api-card {
    background-color: #ccc;
    padding: 1.5rem;
    margin: 1rem 2rem;
    border-radius: .5rem;
    box-shadow: 0 8px 8px -4px lightblue;
}

/* Adiciona uma animação hover ao card api */
.api-card:hover {
    transform: scale(0.85);
}

/* Estilização do texto do card api */
.api-card > h2{
    background-color: white;
    padding: 5px;
    border-radius: 1rem;
    display: inline-block;
}

/* Estilização do footer com background, tamanho, padding e posição */
footer {
    background-color: rgb(255, 255, 255);
    width: 100%;
    padding: 1rem;
    text-align: center;
    position: fixed;
    bottom: 0;
    box-shadow: 0 2px 2px 0 rgba(25, 27, 27, 0.302), 0 2px 6px 2px rgba(18, 19, 19, 0.149);
}

/* Estilização da tag contida no footer com tipo de display, background, padding, fonte e transição */
footer > a{
    display: inline-block;
  background: linear-gradient(130deg,
              rgba(251,251,254,.9),
              rgba(251,251,254,.2));
  padding: .75rem 1.5rem;
  border-radius: .5rem;
  color: var(--title-color);
  font-weight: 500;
  transition: .4s;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 2px 6px 2px rgba(60, 64, 67, 0.149);
}

/* Adiciona animação hover ao botão do footer */
footer > a:hover{
    background: linear-gradient(130deg,
              rgba(251,251,254,1),
              rgba(251,251,254,.4));
}