:root{
    --bg-color: #232323;
    --valid-color:#75b798;
    --invalid-color:#ea868f;
    --task-color:#05C7F2;
}

body{
    font-family: monospace;
    background: var(--bg-color);
    color: aliceblue;
    background-image: url(./noise-bg.svg);
    background-size: contain;
    background-blend-mode: difference;
}

.container{
    height: 100vh;
    position: relative;
}

#cover-wrapper{
    border: 10px solid;
    width: max-content;
    padding: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#app-title{
    font-size:clamp(50px,10vw,100px);
}

.form-wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.modal-content{
    background-color: var(--bg-color);
}

#navBar{
    border-bottom: 1px solid;
}

#to-do-list-wrapper{
    padding: 1rem;
}

.list-item{
    padding: 1rem;
    /* border: 2px solid var(--task-color); */
    box-shadow: 0 0 5px var(--task-color);
    backdrop-filter: blur(1px);
    border-radius: 10px;
}

.bi-triangle-fill{
    padding-right: 0.5rem;
}

.bi-triangle-fill:before{
    transform: rotate(90deg);
    transition: transform .1s ease-in-out;
    cursor: pointer;
}
.bi-triangle-fill.showDetails:before{
    transform: rotate(180deg);
}

.description-box{
    border: 2px solid;
    padding: 0.5rem;
    border-radius: 5px;
}

.dropdown{
    width: min-content;
}

.task-brief{
    position: relative;
}

.moreBtn{
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(12px,-6px);
}



select{
    width: 100%;
    font-size: 1rem;

}

.dropdown-menu[data-bs-popper]{
    top: auto;
    left: 0;
    right: 0;
}

.dropdown-menu[data-bs-popper]#dropdown-list{
    top: auto;
    left: auto;
    right: 0;
}


.dropdown-menu{
    text-align: center;
}

.relative{
    position: relative;
}

.dropdown-toggle::after {
    position: absolute;
    top:50%;
    right:24px;
    transform: translate(-50%,-50%);
}

.form-text{
    color: rgb(147, 147, 147);
}

.invalid{color: var(--invalid-color);}
.valid{color: var(--valid-color)}
.invalid > span{display: inline;}
.valid > span{ display: none;}

.task-title.completed-true{
    text-decoration: line-through;
    color:#dc3545;
}
.task-title.completed-false{
    text-decoration: none;
}
.task-title{
    cursor: pointer;
}
.task-title:hover{
    color:#dee2e6;
}

.task-title.completed-true:hover{
    color:#e35d69;
}