html[data-theme='light'] {
    --bg-color: #e4f0fa;
    --primary: #ff7c7c;
    --dk-text: #2b3c5b;
    --dk-subtext: #7a8aa3;
    --card: #e6eef8;
    --component-s: #c4cdd1;
    --component: #d3dee3;
    --selected: rgb(211, 222, 227);
    --grad-base: rgb(250, 177, 135);
    --gradient-1: rgb(250, 177, 135);
    --gradient-2: rgb(246, 117, 117);
    --cal-indicator: invert(72%) sepia(40%) saturate(5103%) hue-rotate(314deg)
      brightness(110%) contrast(105%);
  }
  html[data-theme='dark'] {
    --bg-color: #121215;
    --primary: #8d8fd2;
    --dk-text: #dfe0fb;
    --dk-subtext: #84849d;
    --card: #18181c;
    --component-s: #454254;
    --component: #2f2d36;
    --selected: rgb(47, 45, 54);
    --grad-base: rgb(125, 90, 242);
    --gradient-1: rgb(145, 114, 247);
    --gradient-2: rgb(104, 61, 247);
    --cal-indicator: invert(57%) sepia(96%) saturate(184%) hue-rotate(200deg)
      brightness(85%) contrast(93%);
    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
  }

:root{
    --transition: 0.2s ease-out;
}

*{
    font-family: 'Lexend Deca', sans-serif;
}

body{
    background-color: var(--bg-color);
    min-height: 100vh;
    transition: var(--transition);
}

h1{
    color: var(--dk-text);
}

h2, label{
    color: var(--primary);
    font-size: 20px;
}

p{
    color: var(--dk-subtext);
}

a{
    color: var(--primary);
    text-decoration: none;
}

span{
    background: var(--grad-base);
    background: linear-gradient(130deg, var(--gradient-1) 0%, var(--gradient-2) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--transition);
}

button{
    border: none;
}

input{
    color: var(--dk-subtext);
    border: none;
}

select{
    background-color: transparent;
    color: var(--dk-subtext);
    border: none;
}

hr{
    height: 4px;
    background: var(--primary);
    border: none;
    border-radius: 2px;
    opacity: 1;
}

textarea{
    color: var(--dk-subtext);
    height: 200px;
    resize: none;
    border: none;
}

.transition{
    transition: var(--transition);
}

.selected{
    background-color: var(--selected) !important;
}

.logo-tasks{
    color: var(--dk-subtext);
}

#divHeader{
    max-width: 510px;
}

.card{
    background-color: var(--card);
    border-radius: 24px;
    transition: var(--transition);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
}

.loginTitle{
    color: var(--dk-text);
}

.vh-50{
    height: 50vh;
}

.login-card{
    max-width: 300px;
}

.filter-card, #h1Logo{
    max-width: 270px;
}

.task-card, .divHeader{
    max-width: 510px;
}

.btnFilter, .btnProject, #txtProjects{
    color: var(--dk-subtext);
    font-size: 14px;
    background-color: transparent;
    width: 95%;
    border: none;
}

.fa-clipboard-list{
    color: var(--dk-subtext);
    margin-left: 2px;
    margin-right: 10px;
}

.fa-square-check, .fa-calendar-day, .fa-folder{
    color: var(--dk-subtext);
    margin-left: 1px;
    margin-right: 9px;
}

.fa-gears{
    color: var(--dk-subtext);
    margin-left: -2px;
    margin-right: 7px;
}

.btnIcon{
    background-color: transparent;
    color: var(--dk-subtext);
}

#divProjects{
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

#divTasks{
    height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.task{
    background-color: var(--component);
    color: var(--dk-text);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 4px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 10px;
    width: 95%;
}

.btnPurple{
    border-radius: 24px;
    height: 40px;
    width: 130px;
    color: var(--dk-text);
    background: linear-gradient(160deg, var(--gradient-1) 0%, var(--gradient-2) 100%);
    transition: 0.2s ease-out;
    box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 15px 0px;
}

.selectFolder{
    margin: 0;
}

.txtTask{
    background-color: transparent;
    color: var(--dk-text);
    width: 65%;
}

#btnBack{
    background-color: transparent;
    color: var(--dk-subtext);
}

#spnExit{
    color: var(--dk-subtext) !important;
    background: transparent !important;
    -webkit-text-fill-color: var(--dk-subtext) !important;
}

@media (max-width: 860px){
    #divMainContainer{
        flex-direction: column;
        align-items: center;
    }

    .filter-card{
        max-width: 510px;
    }

    .task-card{
        margin-left: 0px !important;
        margin-top: 20px;
        margin-bottom: 48px;
    }
}

@media (max-width: 580px){

    #hrSmall{
        display: block !important;
        width: 100%;
    }

    #hrLarge{
        display: none !important;
    }

    #divFormTaskHeader{
        flex-direction: column;
        margin-bottom: 20px !important;
    }

    #divFormTaskSelectProject{
        margin-bottom: 20px;
        max-width: 150px;
    }

    #txtLocation{
        width: 90%;
    }

    .txtTask{
        width: 100%;
        margin-bottom: 20px;
    }

    #txtTaskSmall{
        display: block !important;
        margin-bottom: 0px !important;
    }

    #txtTaskLarge{
        display: none !important;
    }

    #divFormStatus{
        display: flex;
        margin-bottom: 20px;
    }

    #txtDueDateSmall{
        display: block !important;
        margin-bottom: 20px !important;
        padding: 3px;
    }

    #txtDueDateLarge{
        display: none !important;
    }

    #spnExit{
        display: none !important;
    }
}