@font-face {
  font-family: regularFont;
  src: url(assets/AeonikTRIAL-Regular.otf);
}
@font-face {
  font-family: boldFont;
  src: url(assets/AeonikTRIAL-Bold.otf);
}
@font-face {
  font-family: lightFont;
  src: url(assets/AeonikTRIAL-Light.otf);
}
:root {
  --primaryColor:#E3E3E3;
  --secondaryColor:#456882;
  --trinityColor:#234C6A;
  --trinityColor2:#1B3C53;
  --butFontSize:clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --labelFontSize:clamp(0.8rem, 0.75rem + 0.25vw, 0.95rem);
  --subHeadingFontSize:clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --headingFontSize:clamp(2rem, 1.5rem + 3vw, 3.5rem);
  --bodyFontSize:clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
}

[data-theme=dark] {
  --primaryColor: #7EACB5;
  --secondaryColor: #FFF4EA;
  --trinityColor: #EDDCC6;
  --trinityColor2: #BF4646;
}

[data-theme=forest] {
  --primaryColor: #EBF4F6;
  --secondaryColor: #7AB2B2;
  --trinityColor: #7AB2B2;
  --trinityColor2: #09637E;
}

[data-theme=sunset] {
  --primaryColor: #562F00;
  --secondaryColor: #FF9644;
  --trinityColor: #FFCE99;
  --trinityColor2: #FFFDF1;
}

[data-theme=midnight] {
  --primaryColor: #FA8112;
  --secondaryColor: #222222;
  --trinityColor: #F5E7C6;
  --trinityColor2: #FAF3E1;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--trinityColor);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  font-size: var(--bodyFontSize);
  font-family: regularFont;
}

::-webkit-scrollbar {
  display: none;
}

main {
  width: 100%;
  max-width: 3000px;
  background-color: var(--trinityColor2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  flex-wrap: wrap;
}
main .daytimewheater-sec {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 30svh;
  position: relative;
  background-color: var(--secondaryColor);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}
main .daytimewheater-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(27, 60, 83, 0.4); /* blue tint */
}
main .daytimewheater-sec .left {
  color: var(--primaryColor);
  backdrop-filter: blur(1px);
  font-size: var(--subHeadingFontSize);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
main .daytimewheater-sec .left .datetime {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
main .daytimewheater-sec .left .datetime .date {
  font-family: boldFont;
}
main .daytimewheater-sec .left .location {
  font-style: normal;
}
main .daytimewheater-sec .center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
}
main .daytimewheater-sec .center .fetch-btn {
  cursor: pointer;
  text-transform: capitalize;
  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  font-size: var(--butFontSize);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  font-family: boldFont;
  scale: 1;
  transition: all 0.3s ease;
}
main .daytimewheater-sec .center .fetch-btn:hover {
  scale: 1.1;
  opacity: 0.9;
}
main .daytimewheater-sec .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--primaryColor);
  backdrop-filter: blur(1px);
}
main .daytimewheater-sec .right .weather-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: var(--subHeadingFontSize);
}
main .daytimewheater-sec .right .weather-main .temperature {
  font-family: boldFont;
}
main .daytimewheater-sec .right .weather-main .condition {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
main .daytimewheater-sec .right .weather-main .condition img {
  width: 3rem;
}
main .daytimewheater-sec .right .weather-details li {
  list-style: none;
  font-family: lightFont;
}
main .showcase {
  width: 100%;
  min-height: 50svh;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  flex-wrap: wrap;
  position: relative;
}
main .showcase:has(.box:hover) .box {
  scale: 0.9;
}
main .showcase:has(.box:active) .box {
  scale: 0.9;
}
main .showcase .box {
  flex: 1 1 250px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s linear;
  cursor: pointer;
}
main .showcase .box:hover {
  scale: 1.1 !important;
}
main .showcase .box:active {
  scale: 1.1 !important;
}
main .showcase .box img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  -o-object-position: 30% 30%;
     object-position: 30% 30%;
  pointer-events: none;
}
main .showcase .box span {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: var(--labelFontSize);
  text-transform: capitalize;
  pointer-events: none;
}
@keyframes theme {
  from {
    bottom: 0%;
  }
  to {
    bottom: 90%;
  }
}
main .showcase .fixedtheme {
  position: absolute;
  animation: theme linear 4s alternate infinite;
  right: -1%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: url(assets/gif\ artist\ circle\ GIF\ by\ Erica\ Anderson.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
main .showcase .fixedtheme:hover {
  animation-play-state: paused;
}
main .showcase .fixedtheme:active {
  animation-play-state: paused;
}
main .mq-sec {
  width: 100%;
  min-height: 20svh;
  background: linear-gradient(to bottom, var(--trinityColor2), var(--trinityColor));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
main .quote-box {
  width: 100%;
  color: var(--primaryColor);
  text-align: center;
  font-size: var(--subHeadingFontSize);
  font-family: boldFont;
  background-color: var(--secondaryColor);
  padding: 2rem;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 0 10px var(--primaryColor);
}
main .quote-box .top-quote {
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  translate: 25%;
}
main .quote-box .bottom-quote {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2rem;
  translate: -25%;
}
main .openBox {
  min-width: 100%;
  min-height: 100svh;
  padding: 2rem;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primaryColor);
}
main .openBox .top-wrapper {
  margin-bottom: 3rem;
  gap: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
main .openBox .top-wrapper h2 {
  text-transform: capitalize;
  pointer-events: none;
  font-size: 1.5rem;
  font-family: boldFont;
  font-size: var(--subHeadingFontSize);
}
main .openBox .top-wrapper button {
  cursor: pointer;
  text-transform: capitalize;
  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  font-size: var(--butFontSize);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
}
main .openBox .todo-mid-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}
main .openBox .todo-mid-wrapper .box {
  width: 30%;
  height: 80svh;
  background-color: var(--trinityColor2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 1rem;
  padding: 1rem;
}
main .openBox .todo-mid-wrapper .box form {
  width: 100%;
  min-height: 50svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}
main .openBox .todo-mid-wrapper .box form .textarea {
  resize: none;
}
main .openBox .todo-mid-wrapper .box form .form-elem {
  border-radius: 0.5rem;
  flex: 1;
  width: 100%;
  padding: 1rem;
  background-color: var(--secondaryColor);
  color: var(--primaryColor);
  border: none;
}
main .openBox .todo-mid-wrapper .box form ::-moz-placeholder {
  color: var(--primaryColor);
}
main .openBox .todo-mid-wrapper .box form ::placeholder {
  color: var(--primaryColor);
}
main .openBox .todo-mid-wrapper .box form :focus {
  outline: 1px solid #e3e3e3;
}
main .openBox .todo-mid-wrapper .box form :nth-child(2) {
  flex-grow: 4;
}
main .openBox .todo-mid-wrapper .box form .input-wrapper :nth-child(2) {
  margin-left: 0.5rem;
}
main .openBox .todo-mid-wrapper .box button {
  width: 100%;
  border-radius: 0.5rem;
  text-transform: uppercase;
  font-size: var(--butFontSize);
  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  border: none;
  font-family: boldFont;
  flex-grow: 1;
  opacity: 0.5;
  cursor: not-allowed;
}
main .openBox .todo-mid-wrapper .box2 {
  flex-grow: 1;
}
main .openBox .todo-mid-wrapper .box2 .compleateTodo,
main .openBox .todo-mid-wrapper .box2 .emptyTodo {
  color: var(--primaryColor);
  text-align: center;
  width: 100%;
}
main .openBox .todo-mid-wrapper .box2 .todo-items {
  width: 100%;
  height: 70%;
  overflow-y: scroll;
}
main .openBox .todo-mid-wrapper .box2 .todo-items li {
  text-transform: capitalize;
  list-style: none;
  padding: 1rem;
  color: var(--primaryColor);
  line-height: 1.2;
  margin-bottom: 1rem;
  background-color: var(--secondaryColor);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
main .openBox .todo-mid-wrapper .box2 .todo-items li details summary {
  font-family: boldFont;
}
main .openBox .todo-mid-wrapper .box2 .todo-items li details h3 {
  font-size: var(--labelFontSize);
  font-family: lightFont;
  padding-top: 0.5rem;
  padding-left: 1rem;
}
main .openBox .todo-mid-wrapper .box2 .todo-items li :nth-child(2) :nth-child(2) {
  margin-left: 0.3rem;
}
main .openBox .todo-mid-wrapper .box2 .todo-items li :nth-child(2) .active {
  color: var(--trinityColor2);
}
main .openBox .todo-mid-wrapper .box2 .todo-items li .icons {
  text-wrap: nowrap;
}
main .openBox .todo-mid-wrapper .box2 .compleated-todo {
  height: 30%;
  overflow-y: scroll;
}
main .openBox .task-mid-wrapper {
  width: 100%;
  background-color: var(--trinityColor2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-radius: 1rem;
  padding: 1rem;
  height: 80svh;
  overflow-y: scroll;
}
main .openBox .task-mid-wrapper .wrapper {
  width: 48%;
  background-color: var(--secondaryColor);
  padding: 1rem;
  border-radius: 0.5rem;
}
main .openBox .task-mid-wrapper .wrapper .time {
  font-size: var(--butFontSize);
  font-family: boldFont;
}
main .openBox .task-mid-wrapper .wrapper .task {
  margin-top: 0.5rem;
}
main .openBox .task-mid-wrapper .wrapper .task input {
  background-color: transparent;
  width: 100%;
  border: none;
  color: var(--primaryColor);
  font-size: var(--labelFontSize);
  font-family: lightFont;
}
main .openBox .task-mid-wrapper .wrapper .task :focus {
  outline: none;
}
main .openBox .task-mid-wrapper .wrapper .task ::-moz-placeholder {
  color: var(--primaryColor);
}
main .openBox .task-mid-wrapper .wrapper .task ::placeholder {
  color: var(--primaryColor);
}
main .openBox .kanban-mid-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 1rem;
}
main .openBox .kanban-mid-wrapper .overlay {
  backdrop-filter: blur(5px);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
main .openBox .kanban-mid-wrapper .overlay form {
  background-color: var(--trinityColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 0.5rem;
}
main .openBox .kanban-mid-wrapper .overlay form input {
  width: 300px;
  height: 60px;
  padding: 1rem;
}
main .openBox .kanban-mid-wrapper .overlay form textarea {
  width: 300px;
  height: 100px;
  padding: 1rem;
  resize: none;
}
main .openBox .kanban-mid-wrapper .overlay form button {
  opacity: 0.5;
  cursor: not-allowed;
  padding: 0.5rem;
  font-size: var(--labelFontSize);
  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  border: none;
  font-family: boldFont;
}
main .openBox .kanban-mid-wrapper .box {
  height: 80svh;
  min-width: 250px;
  flex: 1;
  background-color: var(--trinityColor2);
  padding: 0.5rem;
}
main .openBox .kanban-mid-wrapper .box .box-top {
  min-height: 30px;
  background-color: var(--secondaryColor);
  padding: 0.3rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: var(--labelFontSize);
  font-family: lightFont;
  margin-bottom: 0.5rem;
}
main .openBox .kanban-mid-wrapper .box .items {
  height: 94%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
}
main .openBox .kanban-mid-wrapper .box .items .item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  background-color: var(--trinityColor);
  padding: 0.5rem;
  text-transform: capitalize;
}
main .openBox .kanban-mid-wrapper .box .items .item p {
  font-family: lightFont;
  padding-top: 10px;
  font-size: large;
}
main .openBox .kanban-mid-wrapper .box .items .item button {
  font-size: var(--labelFontSize);
  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  border: none;
  font-family: boldFont;
  align-self: flex-end;
  padding: 0.5rem;
  transition: all 0.5s ease;
}
main .openBox .kanban-mid-wrapper .box .items .item button:hover {
  scale: 1.1;
  opacity: 0.7;
}
main .openBox .kanban-mid-wrapper .box .items .item button:active {
  scale: 1.1;
  opacity: 0.7;
}
main .openBox .pomodomo-mid-wrapper {
  width: 100%;
  min-height: 70svh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--trinityColor2);
  flex-wrap: wrap;
}
main .openBox .pomodomo-mid-wrapper .left {
  flex: 1 1 400px;
  min-height: 60svh;
  background: linear-gradient(to right, var(--trinityColor2), var(--trinityColor), var(--trinityColor2));
}
main .openBox .pomodomo-mid-wrapper .left video {
  width: 100%;
  max-height: 60svh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 70% 70%;
     object-position: 70% 70%;
}
main .openBox .pomodomo-mid-wrapper .right {
  min-height: 60svh;
  flex: 1 1 400px;
  background: linear-gradient(to right, var(--trinityColor2), var(--trinityColor), var(--trinityColor2));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
main .openBox .pomodomo-mid-wrapper .right .buttons-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
main .openBox .pomodomo-mid-wrapper .right .time {
  font-family: boldFont;
  font-size: var(--headingFontSize);
  color: var(--primaryColor);
}
main .openBox .pomodomo-mid-wrapper .right button {
  cursor: pointer;
  text-transform: capitalize;
  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  font-size: var(--subHeadingFontSize);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  transition: all 0.3s linear;
}
main .openBox .pomodomo-mid-wrapper .right button:hover {
  scale: 0.9;
  opacity: 0.8;
}
main .openBox .pomodomo-mid-wrapper .right button:active {
  scale: 0.9;
  opacity: 0.8;
}
main .openBox .goal-mid-wrapper {
  width: 100%;
  height: 80svh;
  overflow-y: scroll;
  background-color: var(--trinityColor2);
}
main .openBox .goal-mid-wrapper .top {
  width: 100%;
  background-color: var(--primaryColor);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
main .openBox .goal-mid-wrapper .top input[type=search] {
  width: 90%;
  height: 50px;
  padding: 1rem;
  color: var(--primaryColor);
  font-size: var(--butFontSize);
  border: none;
  background-color: var(--secondaryColor);
}
main .openBox .goal-mid-wrapper .top input[type=search]::-moz-placeholder {
  color: var(--primaryColor);
}
main .openBox .goal-mid-wrapper .top input[type=search]::placeholder {
  color: var(--primaryColor);
}
main .openBox .goal-mid-wrapper .top input[type=search]:focus {
  outline: none;
}
main .openBox .goal-mid-wrapper .top span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 10%;
}
main .openBox .goal-mid-wrapper .top span i {
  transition: all ease 0.5s;
  color: var(--trinityColor);
}
main .openBox .goal-mid-wrapper .top span i:hover {
  scale: 1.1;
  rotate: 60deg;
}
main .openBox .goal-mid-wrapper .notes {
  padding: 1rem;
  -moz-column-width: 350px;
       column-width: 350px;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
main .openBox .goal-mid-wrapper .notes .note {
  position: relative;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  background-color: var(--trinityColor);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.5rem;
  gap: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
main .openBox .goal-mid-wrapper .notes .note .bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
main .openBox .goal-mid-wrapper .notes .note .bar input {
  width: 100%;
  background-color: transparent;
  color: var(--primaryColor);
  border: none;
  font-family: boldFont;
  font-size: var(--butFontSize);
}
main .openBox .goal-mid-wrapper .notes .note .bar input:focus {
  outline: none;
}
main .openBox .goal-mid-wrapper .notes .note .bar input::-moz-placeholder {
  color: var(--primaryColor);
}
main .openBox .goal-mid-wrapper .notes .note .bar input::placeholder {
  color: var(--primaryColor);
}
main .openBox .goal-mid-wrapper .notes .note .bar span i {
  position: absolute;
  right: 1%;
  transition: all ease 0.5s;
  cursor: pointer;
}
main .openBox .goal-mid-wrapper .notes .note .bar span i:hover {
  scale: 1.1;
  color: var(--trinityColor2);
}
main .openBox .goal-mid-wrapper .notes .note .bar span i:active {
  scale: 1.1;
  color: var(--trinityColor2);
}
main .openBox .goal-mid-wrapper .notes .note textarea {
  font-size: var(--labelFontSize);
  width: 100%;
  background-color: transparent;
  color: var(--primaryColor);
  border: none;
  resize: none;
  font-family: boldFont;
  field-sizing: content;
}
main .openBox .goal-mid-wrapper .notes .note textarea:focus {
  outline: none;
}
main .openBox .goal-mid-wrapper .notes .note textarea::-moz-placeholder {
  color: var(--primaryColor);
}
main .openBox .goal-mid-wrapper .notes .note textarea::placeholder {
  color: var(--primaryColor);
}

.hidden {
  display: none;
}

@media (max-width: 900px) {
  body {
    overflow: scroll;
  }
  .openBox .todo-mid-wrapper {
    flex-direction: column !important;
  }
  .openBox .todo-mid-wrapper .box {
    padding: 1rem !important;
    width: 100% !important;
  }
  .openBox .todo-mid-wrapper .box2 .todo-items li :nth-child(2) :nth-child(2) {
    margin-left: 0 !important;
  }
  .openBox .task-mid-wrapper {
    height: 71svh !important;
  }
}
@media (max-width: 500px) {
  .daytimewheater-sec {
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 1rem;
  }
  .daytimewheater-sec .right {
    gap: 0.5rem !important;
  }
  .daytimewheater-sec .right .weather-details {
    display: flex;
    flex-direction: row !important;
    gap: 10px;
  }
  .openBox .task-mid-wrapper .wrapper {
    width: 100% !important;
  }
  .openBox .goal-mid-wrapper {
    height: 75svh !important;
  }
}/*# sourceMappingURL=style.css.map */