/* *-------------------------------------------------------------------
STILE GENERICO */

/* * ROOT */
:root {
  --primary-color: black;
  --primary-bg-color: white;
  --header-bg-color: #0d6efd;
  --wrong-input-value: red;
  --valid-input-value: green;
  --todo-bg-color: #f0f0f0;
  --todo-hover-bg-color: #d3d3d3;
  --input-bg-color: #e8e8e8;
  --highlighted-words-color: rgb(255, 17, 0);
}

/* * TAG HTML */
body {
  color: var(--primary-color);
  background-color: var(--primary-bg-color);
  min-width: 470px;
}

ul {
  list-style: none;
}

/* * CLASSI */
.my_line-through {
  text-decoration: line-through;
}

.my_input:focus,
.my_btn:focus {
  box-shadow: none;
  outline: none;
}

.my_btn {
  vertical-align: initial;
}

.my_d-none {
  display: none !important;
}

.my_highlighted-words {
  color: var(--highlighted-words-color);
}

/* *-------------------------------------------------------------------
STILE SPECIFICO */

header {
  background-color: var(--header-bg-color);
}

header .my_icon,
header .my_input-icon,
header .my_logo {
  cursor: pointer;
}

header .my_input-container {
  background-color: var(--primary-bg-color);
}

header .my_input {
  width: 100%;
}

main form .my_input {
  width: 100%;
  background-color: var(--input-bg-color);
}

main form .my_input.error:hover {
  border-color: var(--wrong-input-value);
}

main form .my_input.correct:hover {
  border-color: var(--valid-input-value);
}

main form .my_btn {
  width: 100%;
}

main ul.my_todo-list > li {
  background-color: var(--todo-bg-color);
  border-bottom: 3px solid var(--primary-bg-color);
}

main ul.my_todo-list > li:last-of-type {
  border-bottom: none;
}

main ul.my_todo-list > li:hover {
  background-color: var(--todo-hover-bg-color);
}

main ul.my_todo-list > li .my_todo-info .my_todo-text {
  cursor: pointer;
}

main ul.my_todo-list > li:hover .my_todo-info .my_todo-text {
  font-style: italic;
}

main ul.my_todo-list > li .my_todo-info .my_todo-text:hover {
  font-weight: bold;
}

main ul.my_todo-list > li .my_dropdown-menu .my_icon {
  cursor: pointer;
}

main ul.my_todo-list > li .my_dropdown-menu .my_hidden-menu {
  background-color: var(--primary-bg-color);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

main ul.my_todo-list > li .my_dropdown-menu .my_hidden-menu.position-absolute {
  z-index: 2;
}

main ul.my_todo-list > li .my_dropdown-menu .my_hidden-menu li:hover {
  background-color: var(--todo-bg-color);
  cursor: pointer;
}

main ul.my_todo-list > li .my_dropdown-menu .my_hidden-menu li:active {
  background-color: var(--todo-hover-bg-color);
}

/* ?-------------------------------------------------------------------
RESPONSIVENESS */

@media screen and (min-width: 576px) {
  /* * STILE SPECIFICO */

  main form .my_input {
    width: 75%;
  }

  main form .my_btn {
    width: calc(25% - 1rem);
  }
}