* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'montserrat', sans-serif;
}

input:not([type = "radio"]):not([type = "checkbox"]), button {
   appearance: none;
   border: none;
   outline: none;
   background: none;
   cursor: initial;
}

body {
   background-image: url('images/canva-background.jpg');
   color: #000000a8;
}


section {
   margin-top: 2rem;
   margin-bottom: 2rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
}

h3 {
   color: #000000a8;
   font-size: 2rem;
   font-weight: bold; /* Makes the text bold */
   font-family: Arial, sans-serif; /* Sets font to Arial */
   margin-bottom: 0.5rem;
   text-align: center; /* Horizontally centers the text */
   display: flex;
   justify-content: center; /* Centers the content horizontally */
   align-items: center; /* Centers the content vertically if used in a flex container */
   width: 100%; /* Ensures it takes full width */
   height: 100%; /* Makes sure it's vertically centered in a container */
}

h4 {
   color: #000000a8;  /* Color for the text */
   font-size: 2rem;  /* Font size */
   font-weight: bold;  /* Makes the text bold */
   font-family: Arial, sans-serif;  /* Sets font to Arial */
   margin-bottom: 0.5rem;  /* Space below the h4 */
   text-align: center;  /* Horizontally centers the text */
   display: flex;  /* Uses flexbox for centering */
   justify-content: center;  /* Centers horizontally within flex container */
   align-items: center;  /* Centers vertically within flex container */
   width: 100%; /* Ensures it takes full width */
   height: 100%;  /* Ensure the container has enough height to center */
}


.greeting .title {
   display: flex;
}

.greeting .title input {
   margin-left: 0.5rem;
   flex: 1 1 0%;
   min-width: 0;
}

.greeting .title,
.greeting .title input {
   color: #000;
   font-size: 1.5rem;
   font-weight: bold; /* Bold */
   font-style: italic; /* Italic */
   font-family: 'Algerian', sans-serif; /* Algerian font */
}

.create-todo input[type="text"] {
   display: block;
   width: 100%;
   font-size: 1.125rem;
   padding: 1rem 1.5rem;
   color: #000;
   background-color:#FFF;
   border-radius: 0.5rem;
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
   margin-bottom: 1.5rem;
}

.create-todo .options {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1rem;
   margin-bottom: 1.5rem;
}

.create-todo .options label {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   background-color: #ffe6f0;
   border-radius: 0.5rem;
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
   cursor: pointer;
}

input[type = "radio"], 
input[type = "checkbox"] {
   display: none;
}

.bubble {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 2px solid rgb(255, 0, 191);
   box-shadow: 0px 0px 4px rgb(255, 0, 191);
}

.bubble.personal {
   border-color: rgba(255, 0, 0, 0.473);
   box-shadow: 0px 0px 4px rgba(255, 0, 0, 0.466);
}

.bubble::after {
   content: "";
   display: block;
   opacity: 0;
   width: 0px;
   height: 0px;
   background-color: rgb(255, 0, 191);
   box-shadow: 0px 0px 4px rgb(255, 0, 221);
   border-radius: 50%;
   transition: 0.2s ease-in-out;
}

.bubble.personal::after {
   background-color: rgba(255, 0, 0, 0.493);
   box-shadow: 0px 0px 4px rgba(255, 0, 0, 0.425);
}
.bubble:hover::after {
   opacity: 0.6;
   width: 20px;
   height: 20px;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

.bubble::after {
  animation: pulse 1.5s infinite;
}

input:checked ~ .bubble::after {
   width: 10px;
   height: 10px;
   opacity: 1;
}

.create-todo .options label div {
   color: #292929;
   font-size: 1.125rem;
   margin-top: 1rem;
}

.create-todo input[type="submit"] {
   display: block;
   width: 100%;
   align-items: center;
   font-size: 1.125rem;
   padding: 1rem 1.5rem;
   color: #FFF;
   background: linear-gradient(135deg, #800080, #D5006D); /* Purple to dark pink gradient */
   border-radius: 0.5rem;
   box-shadow: 0 0 12px rgba(213, 0, 109, 0.5); /* Soft pink glow */
   cursor: pointer;
   transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
}

.create-todo input[type="submit"]:hover,
.create-todo input[type="submit"]:focus {
   background: linear-gradient(135deg, #a100a1, #ff2e87); /* Brighter gradient on hover */
   box-shadow: 0 0 16px rgba(255, 46, 135, 0.7); /* Stronger glow on hover */
}

.create-todo input[type="submit"]:active {
   transform: scale(0.97);
   box-shadow: 0 0 8px rgba(213, 0, 109, 0.6); /* Slightly dimmer glow on click */
}

.create-todo input[type="text"] {
   background-color: #ffe6f0; /* SOFT PINK */
   color: #000; /* Ensures text stays readable */
}


.todo-list .list {
   margin: 1rem 0;
}

.todo-list .todo-item {
   display: flex;
   align-items: center;
   background-color: #ffe6f0;
   padding: 1rem;
   border-radius: 0.5rem;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.303);
   margin-bottom: 1rem;
}

.todo-item label {
   display: block;
   margin-right: 1rem;
   cursor: pointer;
}

.todo-item .todo-content {
   flex: 1 1 0%;
}

.todo-item .todo-content input {
   color: #000;
   font-size: 1.125rem;
}

.todo-item .actions {
   display: flex;
   align-items: center;
}

.todo-item .actions button {
   display: block;
   padding: 0.5rem;
   border-radius: 0.25rem;
   color: #FFF;
   cursor: pointer;
   transition: 0.2s ease-in-out;
}

.todo-item .actions button:hover {
   opacity: 0.75;
}

.todo-item .actions .edit {
   margin-right: 0.5rem;
   background-color: #272629;
}

.todo-item .actions .delete {
   background-color: #D5006D;
}

.todo-item.done .todo-content input {
   text-decoration: line-through;
   color: #252525;
}
@media (max-width: 768px) {

   .todo-item {
      flex-direction: column;
      align-items: flex-start;
   }

   .todo-item label {
      margin-bottom: 1rem;
   }
   .todo-item .todo-content input {
      padding: 10px;
   }
}

/* Footer Styling: Fixed at the very bottom */
footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #ffe6f0; /* Soft pink */
   color: #252525;
   text-align: center;
   padding: 1rem;
   font-size: 0.8rem;
   border-top: 1px solid #ddd;
}

input[type="submit"]:hover {
   background-color: #6A006A
}