/* digital clock font */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap");
/* Jost */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
/* Quicksand */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
/* Outfit */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
/* Assistant */
@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap");

:root {
  --color-1: #ffffff;
  --color-2: #f7f1f3;
  --color-3: #f4625d;
  --color-4: #5855d6;
  --color-5: #000000;
  --color-6: #feb7b7;
  --color-7: #899cf7;
  --color-8: #f2f1f7;
  --color-9: #7c4293;
  --color-10: #b881ce;
  --color-modal: hsla(0, 0%, 0%, 0.8);
  --shadow-1: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  --shadow-2: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Quicksand;
}

body {
  background: var(--color-2);
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.displayNone {
  display: none;
}

ul {
  list-style: none;
}

button {
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color linear 250ms;
}

main {
  min-height: 100vh;
}

nav {
  height: 5rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3rem;
  position: fixed;
  background: linear-gradient(to right, var(--color-3), var(--color-4));
  color: var(--color-1);
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea {
  border-radius: 4px;
  border: none;
  outline: 1px solid hsl(60, 0%, 59%);
  padding: 0.2rem 0.5rem;
}

textarea {
  margin-top: 0.3rem;
}

select {
  padding: 0.3rem 0.5rem;
  border: 1px solid hsl(60, 0%, 75%);
  border-radius: 4px;
  background-color: var(--color-1);
}

.clickable {
  cursor: pointer;
}

.hidden {
  visibility: hidden;
}

nav .wrapper {
  height: 100%;
}

#logo {
  width: 3rem;
  height: 100%;
}

#logoName {
  text-align: center;
  display: block;
  margin-left: 1rem;
  height: 100%;
  line-height: 3rem;
  font-size: 2rem;
  font-weight:bold;
}

.btnGroup {
  gap: 1rem;
}

#logOut {
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  color: var(--color-1);
}

#logOut i,
#weatherDiv i {
  font-size: 2rem;
}

#weatherDiv {
  height: 3rem;
  font-size: 1.2rem;
  gap: 0.5rem;
  display: flex;
  align-items: center;
}

#location {
  background-color: transparent;
  color: var(--color-1);
  border: none;
}

#loginScreen {
  background-color: var(--color-1);
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

#loadingScreen {
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#greeting {
  width: 75%;
}

#greeting h1 {
  text-align: center;
  font-size: 3rem;
  width: 100%;
  text-align: center;
  -webkit-animation: fade-in-fwd 2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-fwd 2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

#userDetails {
  background-color: var(--color-2);
  padding: 1rem;
  padding-top: 2rem;
  border-radius: 0.5rem;
  font-size: 1.1rem;
}

#userDetails .wrapper {
  align-items: center;
  justify-content: center;
  margin: 1rem;
}

#userDetails label {
  width: 25%;
}

#userDetails input {
  margin: 0rem 2rem;
  min-width: 2rem;
  border-radius: 4px;
  border: none;
  outline: 1px solid hsl(60, 0%, 59%);
  padding: 0.4rem 0.6rem;
}

#userDetails button {
  background-color: var(--color-4);
  color: var(--color-1);
  width: 33%;
  font-size: 1.1rem;
  margin: 0.5rem 1rem;
  padding: 0.4em 0.7em;

  &:hover {
    background-color: #4341b0;
  }
  &:focus-visible {
    background-color: #4341b0;
  }
}

.statusMsg {
  display: block;
  text-align: center;
  margin: 0 auto;
}

#appScreen {
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

#content {
  width: 60%;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 10rem;
  gap: 3rem;
}

#content h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-5);
  padding-bottom: 0.5rem;
}

.todoContent {
  margin: 1rem;
  min-width: 50%;
  border-radius: 0.5rem;
  width: 100%;
}

.todosFilters {
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.5rem 0rem;
  gap: 1rem;
}

#todosFilterSelect {
  margin-right: 1rem;
}

.todosSorting {
  padding: 0.5rem 0rem;
}

.todoList {
  margin: 0.5rem 0rem;
  border-radius: 0.3rem;
}

.todo {
  padding: 0.5rem;
  margin: 1rem 0rem;
  background-color: var(--color-1);
  box-shadow: var(--shadow-1);
  border-radius: 0.3rem;
  justify-content: space-between;
}

.disabled {
  background-color: var(--color-8);
}

.todo > * {
  margin-right: 0.5rem;
}

.todoInfo {
  align-items: center;
}

.todoInfo i {
  margin-right: 0.5rem;
}

.todoDeadline {
  font-size: 0.7rem;
  margin-left: 0.5rem;
}

.todoActions {
  align-items: center;
}

.todoActions i {
  margin-left: 0.5rem;
}

.todoContent .addNew {
  margin: 0.5rem 0rem;
  width: 100%;
  height: 2rem;
  font-weight: 600;
  border-radius: 0.3rem;
  color: var(--color-1);
  background-color: var(--color-4);
  box-shadow: var(--shadow-2);
}

.todoContent .addNew:hover,
.todoContent .addNew:focus-visible {
  border: 2px solid #302e97;
}

.todoContent .addNew i {
  margin-left: 0.5rem;
}

#createNewTodoDiv {
  display: flex;
  align-items: center;
  justify-content: center;
}

#createNewTodoDiv :first-child {
  width: 100%;
}

#filterTodos {
  margin-left: 0.5rem;
}

.todosFilters div div {
  margin-right: 0.5rem;
}

.todosFilters div div input {
  margin-right: 0.2rem;
}

/* Habits */

.habitsContent {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

#habitWrapper {
  width: 100%;
}

.habitsFilters {
  margin: 0.5rem 0rem;
}

#habitsSorter {
  margin: 0.5rem 0rem;
}

.habitList {
  margin: 0.5rem 0rem;
  border-radius: 0.3rem;
}

.habit {
  padding: 0.5rem;
  border-radius: 0.3rem;
  box-shadow: var(--shadow-1);
  background-color: var(--color-1);
  margin: 1rem 0rem;
  justify-content: space-between;
  align-items: flex-end;
}

.habitInfo > * {
  padding: 0.25rem;
}

.subInfo {
  margin: 0.5rem;
  gap: 0.5rem;
}

.habit button {
  width: 10rem;
  height: 2rem;
  margin: 0.5rem 0rem;
  background-color: var(--color-2);
  box-shadow: var(--shadow-2);
}

.habit button i {
  margin-left: 0.5rem;
}

.habitsContent .addNew {
  width: 100%;
  height: 2rem;
  margin: 0.5rem 0rem;
  font-weight: 600;
  border-radius: 0.3rem;
  color: var(--color-5);
  background-color: var(--color-3);
  box-shadow: var(--shadow-2);
}

.habitsContent .addNew:hover,
.habitsContent .addNew:focus-visible {
  border: 2px solid #a83733;
}

.habitsContent .addNew i {
  margin-left: 0.5rem;
}

/* Modal */
#modalScreen {
  z-index: 2;
  background-color: var(--color-modal);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
}

#modal {
  width: 40%;
  background-color: var(--color-1);
  position: relative;
  border-radius: 0.5rem;
  padding: 2rem;
}

#closeModalBtn {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: var(--color-1);
  border: none;
  cursor: pointer;
}

#closeModalBtn i {
  font-size: 1.2rem;
}

.scrollLock {
  overflow: hidden;
}

/* Habits Modal */
#createHabitModal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#createHabitModal > * {
  margin: 0.5rem;
}

#createHabitModal > * :nth-child(1) {
  margin-right: 1rem;
}

#habitTitle {
  width: 100%;
  margin-top: 0;
}

#createHabitModal button {
  height: 2rem;
  border-radius: 0.3rem;
  background-color: var(--color-3);

  &:hover {
    background-color: #f24640;
  }

  &:focus-visible {
    background-color: #f24640;
  }
}

#editHabitModal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#editHabitModal > * {
  margin: 0.5rem;
}

#editHabitModal :nth-child(1) {
  flex-direction: row;
}

#editHabitModal > * > * {
  margin: 0.2rem 0.3rem;
}

#editHabitTitle {
  width: 100%;
}

#editHabitModal button {
  height: 2rem;
  background-color: var(--color-6);
  color: var(--color-5);
  border-radius: 0.3rem;
}

#editHabitModal .actionButtons button {
  height: 2rem;
  width: 100%;

  &:hover {
    background-color: hsl(0, 97%, 75%);
  }

  &:focus-visible {
    background-color: hsl(0, 97%, 75%);
  }
}

#resetStreak {
  height: 2rem;
  padding: 0.5em 0.8em;

  &:hover {
    background-color: hsl(0, 97%, 75%);
  }

  &:focus-visible {
    background-color: hsl(0, 97%, 75%);
  }
}

/* Todo Modal */
#createTodoModal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#createTodoModal > * {
  margin: 0.5rem;
}

#createTodoModal > * :nth-child(1) {
  margin-right: 0.5rem;
}

#todoTitle {
  width: 100%;
  margin-top: 0;
}

#description {
  width: 100%;
}

#createTodoModal button {
  height: 2rem;
  background-color: var(--color-4);
  color: var(--color-1);
  border-radius: 0.3rem;

  &:hover,
  &:focus-visible {
    background-color: #3c3ab7;
  }
}

#editTodoModal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#editTodoModal > * {
  margin: 0.5rem;
}

#editTodoModal > * :nth-child(1) {
  margin-right: 0.5rem;
}

#editTodoModal :nth-child(1) {
  flex-direction: row;
}

#editTodoModal :nth-child(1) input {
  width: 100%;
}

#editTodoModal :nth-child(2):not(button) {
  flex-direction: row;
  margin-top: 0.2rem;
}

#editTodoModal :nth-child(2) textarea {
  height: 1.2rem;
  width: 100%;
}

#editTodoModal button {
  width: 100%;
  height: 2rem;
  color: var(--color-5);
  background-color: var(--color-7);
  border-radius: 0.3rem;

  &:hover {
    background-color: #6c7edd;
  }

  &:focus-visible {
    background-color: #6c7edd;
  }
}

#archiveTodoModal {
  align-items: center;
  gap: 1rem;
}

#archiveTodoModal .actionButtons {
  width: 50%;
}

#archiveTodoModal button {
  height: 2rem;
  width: 100%;
  color: var(--color-5);
  background-color: var(--color-7);
  padding: 0.2em 0.4em;

  &:hover {
    background-color: #6c7edd;
  }

  &:focus-visible {
    background-color: #6c7edd;
  }
}

.actionButtons {
  align-items: center;
}

#createTodoModal .flex-row,
#editTodoModal .flex-row,
#createHabitModal .flex-row,
#editHabitModal .flex-row {
  align-items: center;
}

/* Animation for Welcome Quote */
@-webkit-keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
    transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
    transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}

.required {
  font-size: 1.1rem;
  color: #fb370d;
  vertical-align: middle;
  margin-inline: 0.2rem;
}

#openTimerBtn {
  background-color: transparent;
  color: var(--color-1);
  padding: 0.3em 0.6em;
  font-size: 1.2rem;

  &i {
    font-size: 1.3rem;
  }
}

#openTimerBtn .iconBtn {
  gap: 0.3rem;
  align-items: center;
}

#timerModal {
  align-items: center;
  padding-inline: 2rem;
}

#timerModal button:not(:disabled):hover {
  background-color: #4341b0;
}

.timerOptions {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
}

.timerOptionBtn {
  font-size: 1.1rem;
  border-radius: 0.5rem;
  padding: 0.5em 0.8em;
  background-color: var(--color-4);
  color: var(--color-2);
}

.timerOptionBtn:disabled {
  opacity: 0.6;
  cursor: default;
}

.timerOptionBtn .customBtn {
  gap: 0.3rem;
}

.timeDisplay {
  font-size: 5rem;
  font-family: "Chakra Petch", sans-serif;
  margin-bottom: 1.5rem;
}

.timerToggleButtons {
  gap: 0.5rem;
}

#toggleTimer,
#pauseTimerBtn,
#stopTimerBtn,
#playTimerBtn {
  font-size: 1.1rem;
  padding: 0.5em 0.7em;
  border-radius: 0.5rem;
  background-color: var(--color-4);
  color: var(--color-2);
}

#toggleTimer {
  min-width: 4rem;
}

.customTimeDiv {
  width: 100%;
  justify-content: end;
  align-items: center;
  gap: 0.3rem;
  padding-top: 1rem;
  font-size: 1.2rem;
}

.customTimeDiv input {
  padding: 0.3em 0.5rem;
  border-radius: 4px;
  max-width: 3rem;
}




/* CALENDAR */
#happeningsContent{
  width: 100%;
  min-height:100vh;
}

#happeningsContent h2{
  text-align: center;
  border-bottom: solid 1px black;
  padding:0.5rem;
}

#happeningsContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:100%;
  margin-top:1rem;
}

.fa-angle-down{
  width:100%;
  text-align: right;
  margin-right:2rem;
  cursor:pointer;
}

#happeningsPassed{
  width:100%;
  margin:0.5rem 0rem;
  color: rgba(128, 128, 128, 0.800) !important;
}

#happeningsUpcoming{
  width:100%;
  margin: 0.5rem;
}

#happeningsUpcoming li p{
  background-color: var(--color-1);
}

#happeningsContainer li{
  margin:0.5rem;
  cursor: pointer;
  margin:1rem 0rem;
}

#happeningsContainer span:first-child{
  font-weight: bold;
}

#happeningsContainer span:not(:first-child){
  font-size: 0.7rem;
}


#happeningsContainer p{
  border-radius: 0.3rem;
  box-shadow: var(--shadow-1);
  padding: 0.5rem;
  margin-top:0.3rem;
}

#happeningDeleteBtn{
  width:100% !important;
  margin: 2rem 0rem;
  background-color: var(--color-10);
}

#happeningsContainer span{
  margin-right:0.5rem;
}

#addHappening{
  width:100%;
  height:2rem;
  border-radius: 0.3rem;
  text-align: center;
  padding:0.3rem;
  box-shadow: var(--shadow-2);
  background-color: var(--color-9);
  color: var(--color-1);
  font-weight: 600;
}

#happeningDeleteBtn{
  width:2rem;
  height:2rem;
  background-color: var(--color-10);
  color: var(--color-1);
  font-weight: 600;
}

#createHappeningForm{
  display: flex;
  flex-direction: column;
}

#createHappeningForm > *{
  margin:0.5rem;
}

#createHappeningForm label{
  margin-right:0.5rem;
}

#happeningAddBtn{
  height:2rem;
  border-radius: 0.3rem;
  background-color: var(--color-9);
  font-weight: 600;
}

#happeningDeleteBtn{
  height:2rem;
  border-radius: 0.3rem;
}

#descriptionWrapper{
  display: flex;
  flex-direction: column;
}

#happeningText{
  width:100%;
  min-height:10rem;
  padding:0.5rem;
}

#timeWrapper :nth-child(3){
  margin-left:0.5rem;
}

/* Mobile */
@media screen and (max-width: 780px) {
  #userDetails{
    width: 80%;
    font-size: 1rem;
  }

  button#register{
    font-size: 0.8rem;
  }

  button#logIn{
    font-size: 0.8rem;
  }

  #content{
    width: 80vw;
  }

  nav {
    justify-content: center;
  }

  /* Logo and title */
  nav .wrapper.flex.flex-row{
    display: none;
  }

  #location{
    display: none;
  }

  .todosFilters div:first-child{
    display: flex;
    flex-wrap: wrap;
  }

  #modal {
    width: 80vw;
  }
}

/* Tablet */
@media screen and (max-width: 1024px) {
  #logo{
    display: none;
  }

  .habitsContent {
    flex-direction: column;
    gap: 2rem;
  }

  .todosFilters {
    flex-direction: column;
  }
}