:root {
  --dark-body: #4d4c5a;
  --dark-main: #141529;
  --dark-second: #79788c;
  --dark-hover: #323048;
  --dark-text: #f8fbff;

  --light-body: #f3f8fe;
  --light-main: #fdfdfd;
  --light-second: #c3c2c8;
  --light-hover: #edf0f5;
  --light-text: #151426;

  --blue: #0000ff;
  --white: #fff;

  --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  font-family: Poppins;
}

.dark {
  --bg-body: var(--dark-body);
  --bg-main: var(--dark-main);
  --bg-second: var(--dark-second);
  --color-hover: var(--dark-hover);
  --color-txt: var(--dark-text);
}

.light {
  --bg-body: var(--light-body);
  --bg-main: var(--light-main);
  --bg-second: var(--light-second);
  --color-hover: var(--light-hover);
  --color-txt: var(--light-text);
}

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

html,
body {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--bg-body);
}

/* Calendar */
.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
  border: 2px solid var(--bg-second);
  border-radius: 20px;
  background-color: var(--bg-body);
}


.calendar {
  height: max-content;
  width: max-content;
  background-color: var(--bg-main);
  border-radius: 30px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.light .calendar,
.todo-list-section  {
  box-shadow: var(--shadow);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  font-weight: 600;
  color: var(--color-txt);
  padding: 10px;
}

.calendar-body {
  padding: 10px;
}

.calendar-week-day {
  height: 50px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-weight: 600;
}

.calendar-week-day div {
  display: grid;
  place-items: center;
  color: var(--bg-second);
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  color: var(--color-txt);
}

.calendar-days div {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  position: relative;
  cursor: pointer;
  animation: to-top 1s forwards;
}

.calendar-days div span {
  position: absolute;
}

.calendar-days div:hover {
  background-color: var(--blue);
  color: var(--white);
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.calendar-days div.curr-date,
.calendar-days div.curr-date:hover {
  background-color: var(--blue);
  color: var(--white);
  border-radius: 50%;
}

.calendar-days div.selected {
  background-color: var(--blue);
  color: var(--white);
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.calendar-days div.curr-date.selected {
  background-color: transparent;
  color: var(--color-txt);
  border-radius: 0;
}


.month-picker {
  display: flex;
  align-items: center;
}

.month-change {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 10px;
  cursor: pointer;
}

.month-change .fas{
  color: var(--blue)
}

.month-change:hover {
  background-color: var(--color-hover);
}

.year-picker {
  display: flex;
  align-items: center;
}

.year-change {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 10px;
  cursor: pointer;
}

.year-change .fas{
  color: var(--blue)
}

.year-change:hover {
  background-color: var(--color-hover);
}

.calendar-footer {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.toggle {
  display: flex;
}

.toggle span {
  padding-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 25px;
  color: var(--color-txt);
}

.dark-mode-switch {
  position: relative;
  width: 48px;
  height: 25px;
  border-radius: 14px;
  background-color: var(--bg-second);
  cursor: pointer;
}

.dark-mode-switch-ident {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: var(--bg-main);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease-in-out;
}

.dark .dark-mode-switch .dark-mode-switch-ident {
  top: 2px;
  left: calc(2px + 50%);
}


/* To-Do List */

.todo-list-section{
  width: 350px;
  max-height: 540px;
  background-color: var(--bg-main);
  border-radius: 30px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.todo-list{
  width: 100%;
  height: max-content;
  background-color: var(--bg-main);
  border-radius: 30px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.todo-list h2{
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-txt);
  margin-bottom: 20px;
}

.row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #edeef0;
  border-radius: 30px;
  padding-left: 20px;
  margin-bottom: 25px;
}

input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px;
}

#add-task-btn {
  border: none;
  outline: none;
  background-color: var(--blue);
  color: var(--white);
  font-size: 12px;  
  cursor: pointer;
  width: 40px;  
  height: 40px; 
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#task-list li {
  list-style: none;
  font-size: 17px;
  padding: 12px 8px 12px 50px;
  user-select: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--color-txt);

}

#task-list li::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-image: url('assets/unchecked.png');
  background-size: cover;
  background-position: center;
  top: 12px;
  left: 5px;
}

#task-list .checked {
  color: #555;
  text-decoration: line-through;
}

#task-list .checked::before {
  background-image: url('assets/checked.png');
}

#task-list span {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  font-size: 22px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#task-list span:hover {
  color: var(--blue);
}

/* Responsive */
@media (max-width: 768px) {
  .container {
    width: 95%;
    padding: 10px; 
    flex-direction: column;
    align-items: center;   
  }

  .todo-list-section {
    width: 100%;           
    padding: 15px;         
  }

  .calendar {
    width: 100%;           
    padding: 15px;         
  }

  .calendar-header {
    font-size: 20px;       
  }

  .calendar-week-day div, .calendar-days div {
    font-size: 14px;       
    width: 40px;           
    height: 40px;          
  }

  .calendar-body {padding: 5px;}

  .todo-list-section h2 {font-size: 18px; color: var(--color-txt);}

  .todo-list{width: 100%;}

  .todo-list #add-task-button {
    width: 40px;           
    height: 40px;          
    font-size: 16px;       
  }

  #task-list li,
  #task-list span,
  #task-list li::before
   {font-size: 16px;}

  .month-change, .year-change {
    font-size: 18px;       
    height: 30px;          
    width: 30px;
  }
}