* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
    font-family: 'Barlow', sans-serif;
}

:root {
    --dark-gray-500: #222;
    --dark-gray-700: rgb(29, 29, 29);
    
    --gray-200: rgb(206, 206, 206);
    --gray-600: #6b6969;

    --font-white-200: #ddd;

    --accent-400: rgb(12, 110, 202);
    --accent-600: #0d61af;

    --yellow-warning: rgb(255, 230, 0);
    --red-warning: rgb(228, 22, 22);

    --green-checked: rgb(22, 155, 22);

    --border-radius-400: 1rem;
}

body {
    background: var(--dark-gray-500);
    color: var(--font-white-200);
}

main {
    max-width: 1200px;
    padding: 0 1rem;
    margin-inline: auto;
}

#header {
    text-align: center;
    font-family: 'Righteous', cursive !important;
    padding: 1em;
    font-size: 1.5rem;
}
#header h1 a {
    color: var(--font-white-200);
}

/* add task box */

.tasks-container {
    display: flex;
    flex-direction: column;

    width: 40%; /* changed from 40% */
    height: 80vh;
    margin-right: 1rem;
}

.add-task-box {
    /* font-family: 'Barlow', sans-serif; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    
    /* height: 7rem; */
    /* width: 100%; */
    padding: .8em;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius-400);
    border: 2px solid var(--gray-600);
    
    background-color: var(--dark-gray-700);
    color: var(--font-white-200); /* tmp*/
}

#add-task-title {
    width: 100%;
    height: 2.2rem;
    padding: .4em 1em;
    border: 2px solid var(--gray-600);
    border-radius: 1em; 
    
    font-size: 1rem;
}

#add-task-title:focus {
    outline: none;
    border: 2px solid var(--accent-400);
}

.add-task-box div {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}

#add-task-deadline {
    height: 2.2rem;
    width: 60%;
    padding: .3em .5em;
    border-radius: 1em; 
    border: 2px solid var(--gray-600);
    
    font-size: 1rem;
}

.add-task-deadline-label {
    font-size: 1.2rem;
}

@media screen and (max-width: 930px) {
    #add-task-deadline {
        width: 50%;
    }

    .add-task-deadline-label {
        font-size: 1.1rem;
    }
}

#add-task {
    height: 2.2rem;
    padding: 0 1em;
    border-radius: 1rem;
    border: 2px solid var(--gray-200);
    
    background-color: var(--accent-400);
    color: var(--font-white-200)
}
#add-task > img {
    height: 1.3rem;
    padding-right: .8rem; 
}
#add-task > h4 {
    font-size: 1.3rem;
    letter-spacing: 1px;
}

#add-task:hover,
#add-task:focus {
    background-color: var(--accent-600);
    transition: background-color 150ms;
    cursor: pointer;
}

/* task list left */

#tasks {
    width: 100%;
    overflow-y: scroll;
}
#tasks::-webkit-scrollbar {
    display: none;
}

.task {
    background-color: var(--dark-gray-700);
    border-radius: var(--border-radius-400);
    border: 2px solid var(--gray-600);
    
    padding: .7em .8em; 
    margin: .5em 0;
    font-size: 1.2rem;
}
.task:first-child {
    margin-top: 0;
}

.top h4 {
    width: 100%;
    margin-bottom: .5em;
    
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
}

.bottom {
    gap: .5em;
}

.task-buttons {
    display: flex;
    gap: .5em;
}

.task-checkbox {
    display: flex;
    align-items: center;
}

/* JEBAC TEN PRZYCISK PIERDOLONY */
/* done task checkbox */ 

/* label */
.task-checkbox {
    /* background-color: red; */
    width: 1.7rem;
    display: grid;
    place-content: center;
    /* border-radius: 50%; */
    aspect-ratio: 1 / 1;

    /* background-image: url("svg/checkmark_icon.svg"); */
}
/* input */
input.done-checkbox {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 2px solid var(--font-white-200);
    
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    
    cursor: pointer;    
    
    background-color: none;
    background-image: url("../svg/checkmark_sign.svg");
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: center;

    transition: all .2s;
}

.done-checkbox:checked {
    filter: invert(41%) sepia(22%) saturate(5182%) hue-rotate(92deg) brightness(93%) contrast(83%);
}

@media screen and (max-width: 800px) {
    .task-checkbox {
        font-size: 1rem;
    }

    .deadline-field {
        font-size: 1.1rem;
    }

    .task-buttons {
        gap: .3rem;
    }
}
@media screen and (max-width: 770px) {
    .bottom {
        gap: .4em;
    }

    .deadline-field {
        font-size: 1.05rem;
    }

    .task-buttons {
        gap: .2rem;
    }
}

/* special highlits*/
.task .bottom {
    justify-content: space-between !important;
}

.selected {
    border: 2px solid var(--accent-400);
}
.deadline-warning {
    color: var(--yellow-warning);
}

.deadline-end {
    color: var(--red-warning);
}










.task-content {
    width: 70%;
    height: 80vh; /* tmp */
    background-color: var(--dark-gray-700);
    border-radius: 1rem;
    border: 2px solid var(--gray-600);
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.task-content-top {
    width: 100%;
    justify-content: space-between !important;
}

#task-title {
    --height: 2.5rem;
    height: var(--height);
    width: 90%;
    font-size: 2rem;
    color: var(--font-white-200);

    background-color: var(--dark-gray-700);
    border: none;
}

#task-title:focus {
    outline: none;
    border-bottom: 2px solid var(--accent-600);
}

.edit-title-btn {
    padding-left: 0 !important;
}

#task-edit-field {
    width: 100%;
    height: 80%;
    padding: .5rem;
    font-size: 1.3rem;
    background-color: var(--dark-gray-500);
    border: 2px solid var(--dark-gray-500);
    border-radius: 1rem;
    color: var(--font-white-200);
    resize: none;
}

#task-edit-field:focus {
    outline: none;
    border: 2px solid var(--accent-400);
}

.content-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.function-buttons {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-manage-button {
    width: 7rem;
    height: 2.2rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1rem;
    border: 2px solid var(--gray-200);
    background-color: var(--accent-400);
    color: var(--font-white-200);

    transition: 150ms;
}
.content-manage-button:hover,
.content-manage-button:focus {
    background-color: var(--accent-600);
    cursor: pointer;
}
/* OLD BUTTONS */
/* .task-content-button {
    width: 7rem;
    height: 2.2rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1rem;
    border: 2px solid var(--gray-200);
    background-color: var(--accent-400);
    color: var(--font-white-200);

}

.task-content-button:hover,
.task-content-button:focus {
    background-color: var(--accent-600);
    transition: background-color 150ms;
    cursor: pointer;
} */

.delete-task-button {
    z-index: 2;
}

/* mobile version */
@media screen and (max-width: 700px)
{
    body {
        /* background-color: rgb(114, 27, 27); */
        /* padding: 0 1rem; */
    }

    main {
        flex-direction: column;
        max-width: 600px;
        padding: 0 1.5rem;
    }

    .tasks-container, .task-content {
        width: 100%;
    }

    .tasks-container {
        height: auto;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .task-content {
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 430px)
{
    #task-title {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 350px)
{
    #header {
        font-size: 1.2rem;
    }

    #task-title {
        font-size: 1.2rem;
    }
}

/* utility classes */
a {
    color: none;
    text-decoration: none;
}

.flex-standard {
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-button {
    height: 1.7rem;
    text-align: center;
    background: none;
    border: none;
    /* padding-left: .5em; */
    z-index: 10;

    transition: filter .1s;
}
.svg-button:hover,
.svg-button:focus {
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(23%) sepia(57%) saturate(3165%) hue-rotate(195deg) brightness(92%) contrast(90%);
}

.svg-button img {
    height: 100%; 
}