:root
{
   --backgroundColor: #181C07;
   --fontColor: #E9E2B5;
   --accentColor: #CFB300;
   --buttonColor: rgb(152, 123, 43);
   --buttonShadow: rgb(93, 55, 2);
   --fontAccent: rgb(217, 83, 15);
   --alert: rgb(137, 63, 25);

}

body
{
   font-family: Lato;
   font-weight: 300;
   background-color: var(--backgroundColor);
   color: var(--fontColor);
}

*
{
   margin: 0;
}

#mainWindow
{
   display: grid;
   height: 100vh;
   width: 100vw;
   grid-template-rows: 5rem 1fr;
}

#todoContainer
{
   display: grid;
   grid-template-columns: 1fr 1fr;
   max-height: 93%; 
   overflow-y: auto;
}

#doneWindow, #todoWindow
{
   height: 100%;
   overflow-y: auto;
}

#todoWindow
{
   border-right: 1px solid rgb( from var(--accentColor) r g b /0.3);
   margin-left: 2.75rem;
}

#doneWindow
{
   margin-left: 2.75rem;
}

#inputContainer
{
   display: grid;
   grid-template-columns: 3fr 0.5fr;
   gap: 0.75rem;
   margin: 1.25rem 1rem 2rem 0rem;

}

#taskInputBox
{
   background-color: transparent;
   color: var(--fontColor);
   border: none;
   border-bottom: 1px solid rgb( from var(--accentColor) r g b /0.6);
   padding: 0.5rem 2rem 0.5rem 1rem;
   transition: 0.1s ease-in-out;

}

#taskInputBox:focus
{
   border-bottom-color: rgb( from var(--accentColor) r g b /0.8);
   outline: none;
}

#taskInputBox::placeholder
{
   color: var(--fontColor);
   opacity: 0.5;
   transition: 0.1s ease-in-out;
}

#taskInputBox:focus::placeholder
{
   opacity: 0.7;
}

#warnText
{
   color: var(--fontAccent);
   font-size: 1rem;
}

#leftH1, #doneH1
{
   letter-spacing: 1px;
   font-weight: 550;
   text-decoration: underline;
   text-underline-offset: 0.5rem;
   text-decoration-thickness: 2px;
   display: inline-block;
}

#doneH1
{
   margin-bottom: 4.75rem; /*So that the position matches todo tasks's position. Not sure if I like it tho, might be too empty*/
}

.checkboxContainer, .deleteCheckboxContainer
{
   width: 100%;
   display: flex;
   height: fit-content;
   align-items: center;
   overflow-wrap: normal;
   margin-top: 1rem;
   
}

.checkboxContainer label, .deleteCheckboxContainer label
{
   margin-left: 1rem;
   margin-right: 0.5rem;
   font-size: 1.3rem;
   font-weight: 400;
   cursor: pointer;

}

input[type="checkbox"]
{
   cursor: pointer;
}

.checkboxContainer
{
   animation: fadeSlide 0.2s ease-in forwards;
}

.uiButton {
   background-color: var(--buttonColor);
   padding: 0.5rem 0.75rem;
   border-radius: 1rem;
   border: none;
   box-shadow: 0px 3px var(--buttonShadow);
   cursor: pointer;
   transition: 0.05s ease-out;
   color: var(--fontColor);

}

.uiButton:hover
{
   filter: brightness(1.13);
}

.uiButton:active {
   box-shadow: none;
   filter: brightness(0.895);
   transform: translateY(3px);
}

.deleteButton
{
   background-color: var(--buttonColor);
   padding: 0.5rem 0.75rem;
   border-radius: 1rem;
   border: none;
   box-shadow: 0px 3px var(--buttonShadow);
   cursor: pointer;
   transition: 0.1s ease-out;
   color: var(--fontColor);
   margin-right: 1rem;
   height: min-content;
   margin-left: auto;
}

.deleteButton:hover
{
   background-color: var(--alert);
}

.deleteButton:active {
   box-shadow: none;
   filter: brightness(0.77);
   transform: translateY(3px);
}

span 
{
   font-size: 1rem;
   font-weight: 300;
   color: var(--fontColor);
}

#taskCountText, #doneCountText
{
   margin-left: 0.5rem;
}

@keyframes fadeSlide
{
   0%
   {
      opacity: 50%;
      transform: translateX(-1rem);
   }
   100% 
   {
      opacity: 100%;
      transform: translateX(0);
   }
}

@keyframes deleted
{
   0%
   {
      opacity: 100%;
   }
   100% 
   {
      opacity: 0%;
   }
}

.deleteCheckboxContainer
{
   animation: deleted 0.15s ease-out 0.15s forwards;
}

@media (prefers-color-scheme: light) {
  :root
   {
      --backgroundColor: #eaf4f4;
      --accentColor: #386B6B;
      --fontAccent: rgb(157, 3, 3);
      --fontColor: #173f33;
      --buttonColor: #b9dcc9;
      --buttonShadow: #577568;
      --alert: rgb(185, 66, 115);
   }

   .uiButton:hover
   {
      background-color: color-mix(in oklab, var(--buttonColor), black 15%);
   }

  .deleteButton:hover
   {
      box-shadow: 0px 3px color-mix(in oklab, var(--alert), black 40%);
      color: rgb(249, 245, 196);
   }

   .deleteButton:active 
   {
   box-shadow: none;
   filter: brightness(0.77);
   transform: translateY(3px);
   }

}