* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 5rem 0;
  padding-top: 0;
  font-size: 100%;
  line-height: 1.5;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  background-color: white;
}

header {
  max-width: 91%;

  margin-right: auto;

  margin-left: auto;
}

#storage-space-info {
  font-size: 70%;

  padding: 4px;
}

#database-info {
  font-size: 70%;

  padding: 4px;
}

#list-title,
#list-title-all-lists {
  text-align: center;

  padding-top: 1em;

  padding-bottom: 1em;
}

#loader-icon {
  background-color: #f1f1f1;
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  width: 100%;
  height: 50px;
  z-index: 20;
  text-align: center;
  -webkit-box-shadow: 0px 3px 4px 3px rgba(0, 0, 0, 0.28);
  box-shadow: 0px 3px 4px 3px rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(110, 110, 110, 0.28);
}

.rotate {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#list-all-Btn {
  max-width: 24px;

  max-height: 24px;

  position: fixed;

  top: 13px;

  right: 15px;
}

.go-back-button {
  max-width: 24px;

  max-height: 24px;

  position: fixed;

  top: 13px;

  left: 15px;

  font-weight: 900;
}

.go-home-button {
  max-width: 24px;

  max-height: 24px;

  position: fixed;

  top: 13px;

  right: 15px;

  font-weight: 900;
}

#list-all-Btn img {
  width: 24px;

  height: 24px;
}

#list-ul a {
  background-color: rgb(54, 150, 206);

  box-shadow: 0 5px 0 rgb(29, 95, 116);

  color: white;

  padding: 1em 1.5em;

  position: relative;

  text-decoration: none;

  text-transform: uppercase;
}

#list-ul a:hover {
  background-color: #5b93a1;
}

#list-ul a:active {
  box-shadow: none;

  top: 5px;
}

.container {
  max-width: 20rem;

  max-width: 91%;

  margin-right: auto;

  margin-left: auto;
}

.btn {
  margin: 0;

  padding: 0.1rem 0.4rem;

  font: inherit;

  font-size: 0.875rem;

  background-color: transparent;

  border: 2px solid transparent;

  box-shadow: 0 0 0 2px black;

  border-radius: 0.3rem;

  appearance: none;
}

.red {
  color: #b7043d;
}

.btn:disabled {
  opacity: 0.6;
}

.btn--red {
  color: #b7043d;

  box-shadow: 0 0 0 2px #b7043d;
}

.btn--red:hover {
  color: white;

  background-color: #b7043d;
}

.btn--bg-blue {
  color: white;

  background-color: #0954a4;

  border-color: #0954a4;

  box-shadow: 0 0 0 2px #0954a4;
}

.btn--bg-blue:hover {
  background-color: #064281;

  border-color: #064281;

  box-shadow: 0 0 0 2px #064281;
}

.tasks {
  display: flex;

  flex-direction: column;

  margin: 0 0 2rem;

  padding: 0;

  gap: 1rem;

  list-style: none;
}

.task {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  padding: 0.8rem 1rem;

  background-color: #f1f1f1;

  border-radius: 0.4rem;

  animation: bgToUnDone 1s;
}

.todo-list .task {
  background-color: #adc6f0;
}

.task--done {
  opacity: 0.6;

  animation: bgToDone 0.5s;

  background-color: #c1c1c1;
}

@keyframes bgToDone {
  from {
    background-color: #f1f1f1;
  }

  to {
    background-color: #c1c1c1;
  }
}

@keyframes bgToUnDone {
  from {
    background-color: #c1c1c1;
  }

  to {
    background-color: #f1f1f1;
  }
}

.task__label {
  display: block;
}

.todo-list .task__label {
  width: 100%;
}

.task__checkbox {
  display: none;
}

.task__checkbox-custom {
  display: block;

  width: 1rem;

  height: 1rem;

  background-color: white;

  border: 2px solid white;

  box-shadow: 0 0 0 2px black;

  border-radius: 0.3rem;
}

.task__checkbox:checked + .task__checkbox-custom {
  background-color: black;
}

.task__text {
  margin: 0 1rem;

  flex-grow: 1;
}

.task__delete {
  margin-left: auto;

  max-width: 37px;

  max-height: 32px;
}

.todo-list__delete {
  margin-left: auto;

  max-width: 37px;

  max-height: 32px;
}

.task__delete img,
.todo-list__delete img {
  max-width: 100%;

  padding-top: 2px;
}

.task--done .task__text {
  text-decoration: line-through;
}

.create-task {
  display: flex;

  flex-direction: column;
}

.create-task__textarea,
.create-todo-list__textarea {
  width: 100%;

  height: 4rem;

  padding: 0.5rem;

  resize: none;

  font: inherit;

  font-size: 1rem;

  background-color: white;

  border: 2px solid white;

  box-shadow: 0 0 0 2px black;

  border-radius: 0.3rem;

  margin: 0 0 1rem;
}

.create-task__submit,
.create-todo-list__submit {
  padding-top: 0.4rem;

  padding-bottom: 0.4rem;

  font-size: 1rem;
}

.create-todo-list__submit {
  width: 100%;
}

/* CLOUD ICONS */
#loader-icon img {
  position: relative;
  top: 10px;
  max-width: 32px;
  max-height: 32px;
  text-align: center;
}

#icons-in-header {
  position: fixed;
  bottom: 0;
  width: 100%;
}
#cloudConnectionIcon {
  position: relative;
  bottom: 5px;
  z-index: 50;
}

/* The Modal (background) */
#cloudInfoText {
  position: absolute;
  text-align: left;
  top: -12px;
  left: 38px;
}
#modal-info-text,
#cloudInfoText {
  font-size: 70%;

  padding: 4px;
}

#UserInfoModal input {
  width: 45%;
}
#UserInfoModal .modal-btn {
  width: 25%;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}