*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Dosis", sans-serif;
  line-height: 1.5;
  font-size: 1rem;
  color: #333;
  background-color: #f5f5f5;
}
h1 {
  font-size: 1.5rem;
}

a {
  text-decoration: none;
  color: black;
}
h2 {
  font-size: 1rem;
}

ul li {
  list-style-type: none;
  font-size: 1rem;
}
/* .containers {
  width: 80vh;
  margin: 30px auto;
  padding: 20px;
} */
.mx-1 {
  font-size: 1rem;
}
/* COLOR PICKER */
.hid {
  opacity: 0;
}

.color {
  border: none;
  background-color: transparent;
}
/* header */
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

header button {
  margin-top: 0.5rem;
}

/* grid area */
.grid-container {
  height: 100vh;
  display: grid;
  grid:
    "day day day day film film film"
    "day day day day film film film"
    "day day day day books books books"
    "day day day day  books books books"
    "goals goals goals goals places places places"
    "goals goals goals goals places places places"
    "goals goals goals goals places places places";
  grid-gap: 10px;
  /* background-color: #fff; */
  padding: 10px;
}
.items {
  border: 2px solid;
}
.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.days {
  grid-area: day;
  background-color: #eef1ff;
  height: 100%;
}

.goals {
  grid-area: goals;
  background-color: #d2daff;
  height: 100%;
}
.movies {
  grid-area: film;
  background-color: #d2daff;
  height: 100%;
}

.books {
  grid-area: books;
  background-color: #aac4ff;
}

.places {
  grid-area: places;
  background-color: #b1b2ff;
}

/* header of items:goals.important days.. */
.h-flex {
  display: flex;
  justify-content: center;
  margin-left: 0.6rem;
}

.h-flex i {
  padding-left: 0.5rem;
  margin-top: 0.2rem;
  font-size: 1rem;
}
/* form- entry value */

.form-controls {
  background: transparent;
  border: none;
}
.form-input {
  width: 13rem;
  font-size: 0.6rem;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}
/* buttons */
.btn {
  background: transparent;
  color: #333;
  font-size: 0.6rem;
  border: none;
}

.btn-clear {
  background-color: transparent;
  border-radius: 5px;
}

.btn-link {
  font-size: 16px;
  background-color: transparent;
  color: #333;
  border: none;
  padding: 0;
  cursor: pointer;
}
button i {
  font-size: 1.5rem;
}
.positions {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px 15px;
  margin: 0 5px 20px;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
}
/* Forms */
#day-form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#movie-form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#books-form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#places-form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#goals-form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* yeni eklenenlerinin ozellikleri  */
.d-flex {
  display: flex;
  justify-content: space-between;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  margin-top: 0.5rem;
  color: #333;
}

.d-flex i {
  padding-left: 0.5rem;
  margin-top: 0.2rem;
  font-size: 1.5rem;
  color: red;
}

.d-flex h4 {
  font-size: 1.5rem;
}

.border-bottom {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

.errors {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(225, 240, 218, 0.9);
  background-color: rgba(225, 240, 218, 0.5);
}

.checked {
  text-decoration: line-through;
}