html{
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 18px;
}

body{
  background: url("images/back.jpg"), rgb(49, 49, 49);
  background-size: 100vw auto;
  background-repeat:no-repeat;
}

h1{
  font-family: Caveat, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 48px;
  margin: 10px;
}

h2{
  font-family: Caveat, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 32px;
  margin: 5px 0px;
}

label{
  font-size: 16px;
}

input{
  border: none;
  border-radius: 20px;
  margin: 5px;
  padding: 12px 20px;
  width: 90%;
}

table{
  border-spacing: 0px;
  cursor: pointer;
}

td{
  padding-top: 10px;
  border-bottom: solid 1px rgb(79, 79, 79);
}

.todo{
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  border-radius: 20px;
  min-height: 70vh;
  padding: 10px 40px;
  position: absolute;
  top: 30px;
  left: 10vw;
  width: 35%;

}

.todo__form{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.todo__form-container{
  align-items: center;
  display: flex;
  flex-direction: column; 
  width: 100%
}

.todo__field{
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  width: 100%;
}

.todo__button--add{
  background: white;
  border: none;
  border-radius: 25px;
  color: black;
  margin-top: 10px;
  padding: 10px 40px;

}

.todo__button--add:hover{
  animation: changeButton 0.5s;
  background: linear-gradient(140deg,rgb(153, 58, 58),rgb(100, 100, 100));
  color: rgb(227, 226, 226);
  cursor: pointer;
  
}

.todo__list{
  display: flex;
  flex-direction: column;
  position: relative;
}

.todo__list-header{
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

.todo__table-cell--header{
  border-bottom: solid 1px rgb(79, 79, 79);
  font-weight: 600;
  text-align: left;
}

.todo__empty{
  color: rgb(79, 79, 79);
  text-align: center;
}

.todo__actions{
  display: flex;
  align-items: end;
  right: 0px;
  top: 25px;
}

.todo__button--delete-all, .todo__button--delete-checked{
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px 2px;
}

.todo__button--delete-checked .todo__icon{
  height: 25px;
}

.todo__button--delete-all .todo__icon{
  height: 20px;
}

.todo__icon:hover{
  transform: scale(1.15);
}

.todo__button--delete{
  background: none;
  border: none;
  display: flex;
  justify-content: end;
}

.todo__icon--delete{
  height: 16px;
  cursor: pointer;
  padding: 4px;
}




.checked{
  /* background-color: rgba(71, 70, 70, 0.5); */
  border-radius: 50px;
  color: rgb(108, 108, 108);
  text-decoration: line-through;
}

@keyframes changeButton {
  from {background: white;
        color: black;
      }
  to {background: linear-gradient(140deg,rgb(153, 58, 58),rgb(100, 100, 100));
    color: rgb(227, 226, 226);
  }
}

@font-face {
  font-family: Caveat ;
  src: url(fonts/Caveat-Regular.ttf);
}

@media screen and (max-width: 768px){
  body{
    background-size: 130vw auto;
  }

  .todo{
    margin: 20px auto;
    padding: 20px;
    position: static;
    width: 80%;

  }
}

@media screen and (max-width: 576px){
  html{
    font-size: 14px;
  }

  body{
    background-size: auto 100vh;
  }

  h1{
    font-size: 28px;
  }

  h2{
    font-size: 24px;
  }
}