<style type="text/css">

* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
principal, quadTopo, menuTopo, logo, quadCorpo, nav, quadMobil, quadBorda, section, footer {
display: block;
}

body, html{
line-height: 38px;
background-color: #4682b4;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Codigo responsivo */
* 
img, picture, video, embed {
 max-width:100% !important;
 height:auto !important;
}

/* header */
header {
 height: auto;
 margin: 0px;
}

/* Envolve tudo */
.principal{
  max-width: 900px;
  min-width: auto;
  background: #086a87;
  margin: 0 auto;
  padding: 5px;
  border-radius: 6px;
  clear: both;
}

/* Lista de Tarefas*/
.tarefa-container {
    max-width: 500px; /* Largura máxima para não ficar esticado em telas grandes */
    margin: 1px auto;
    background-color: #ddd;
    padding: 20px;
    border: 2px solid #003399;
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}

/* Container do Input + Botão */
.input-group {
    display: flex;
    gap: 15px; /* Espaço entre o input e o botão */
    margin-bottom: 20px;
}

.input-task {
    width: 95%;
    padding: 12px;
    font-size: 22px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

.button-add-task {
    flex: 3; /* Ocupa 3 parte do espaço */
    padding: 20px;
    background-color: #503366;
    font-size: 22px;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap; /* Impede o texto do botão de quebrar linha */
}

.button-add-task:hover {
    background-color: #3200ff;
}

/* Lista de Tarefas */
.list-tasks {
    padding: 1px;
    font-size: 22px;
}

.list-tasks li {
    width: 95%;
    padding: 10px;
    list-style: none;
    align-items: center;
    background-color: #dff;
    justify-content: space-between;
    display: flex;  
    border: 1px solid #ccc;
    border-radius: 10px;
    gap: 15px; /* Espaço entre o input e o botão */
}

.done {
    background-color: #9673B9 !important;
    text-decoration: line-through;
    color: white;
}

/* ***** Classes - por Almeida ***** */
.but-base {
  width: auto;
  padding: 15px;
  display: inline-block;
  background-color: #ddd;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 22px;
  color: yellow;
  border: 2px solid #003399;
  border-radius: 6px;
  box-shadow: 1px 1px 4px #999;
}
.but01 { background-color: #ddd; color: #555; text-align: center;}
.but02 { background-color: #b0e0e6; color:#555; text-align: left;}
.but03 { background-color: #fafafa; color:#555; }
.but04 { background-color: #9acd32; color:#555; }
.but05 { background-color: #ddd; color:#555; }

/* Para o Adress*/
.container-centralizado {
  display: flex;
  justify-content: center;  /* Centraliza horizontalmente o que estiver dentro */
  align-items: center;      /* Centraliza verticalmente (se o container tiver altura) */
  width: 100%;              /* Garante que o container ocupe a largura toda */
}
</style>


