@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Geral */
* {
  padding: 0;
  margin: 0;
  font-family: Roboto, 'Sans-serif';
  color: #333;
  box-sizing: border-box;
  outline: none;
}

html {
  height: 100vh;
}

body {
  background-color: #ccc;
  background-image: url('../img/picture.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-color: #ccc;
}

button {
  background-color: #fdfdfd;
  color: #102f5e;
  border: 2px solid #102f5e;
  padding: 0.3rem 0.6rem;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

button:hover {
  background-color: #102f5e;
  color: #fff;
}
button:hover > i {
  color: #fff;
}

button i {
  color: #102f5e;
  font-weight: bold;
  pointer-events: none;
}

input,
select {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
}

.hide {
  display: none;
}

/* To do header */
.todo-container {
  max-width: 450px;
  margin: 3rem auto;
  background-color: rgb(253, 253, 253, 0.6);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid #ccc;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.todo-container header {
  text-align: center;
  padding: 0 1rem 1rem;
  border-bottom: 1px solid #ccc;
}

/* To do Form */
#todo-form,
#edit-form {
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}

#todo-form p,
#edit-form p {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-control {
  display: flex;
}

.form-control input {
  margin-right: 0.3rem;
}

#cancel-edit-btn {
  margin-top: 1rem;
  border-radius: 8px;
}

/* To do toolbar*/
#toolbar {
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  display: flex;
}

#toolbar h4 {
  margin-bottom: 0.5rem;
}

#search {
  border-right: 1px solid #ddd;
  padding-right: 1rem;
  margin-right: 1rem;
  width: 65%;
  display: flex;
  flex-direction: column;
}

#search form {
  display: flex;
}

#search input {
  width: 100%;
  margin-right: 0.3rem;
}

#filter {
  width: 35%;
  display: flex;
  flex-direction: column;
}

#filter select {
  flex: 1;
}

/* To do List */
.todo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  border-radius: 8px;
  transition: 0.3s;
}

.todo h3 {
  flex: 1;
  font-size: 0.9rem;
}

.todo button {
  margin-left: 0.4rem;
  border-radius: 8px;
}

.done {
  background-color: #1b77d3;
}

.done h3 {
  color: #fff;
  text-decoration: line-through;
  font-style: italic;
}

footer p {
  padding: 1rem;
  text-align: center;
  color: rgb(255, 255, 255, 0.6);
  font-size: 1rem;
  user-select: none;
}

footer p small {
  color: rgb(255, 255, 255, 0.6);
}

#erase-button,
button {
  border-radius: 8px;
}