* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* font-family: Comic sans MS, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: "Comic Relief", system-ui;
}

:root {
    --black: rgb(22, 22, 22);
    --white: rgb(250, 250, 250);
    --grey: rgb(220, 220, 220);
}

/* --------------------------------------top-container--- */

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --------------------------------------top-container--- */

/* --------------------------------------header--- */

header {
    height: 70px;
    background-color: var(--black);
    color: var(--white);
    font-size: 2.15rem;
    letter-spacing: 5px;
    padding: 0px 20px;
    box-shadow: 0px 4px 10px 10px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------header--- */

/* --------------------------------------add Task button--- */

.add-task-container {
    margin: 0px 4rem;
}

.add-task-container #addTaskBtn {
    background-color: var(--black);
    color: var(--grey);
    border: none;
    padding: 10px 24px;
    border-radius: 16px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.add-task-container #addTaskBtn:hover {
    background-color: var(--grey);
    color: var(--black);
}

.add-task-container #addTaskSign {
    display: none;
}

/* --------------------------------------add Task button--- */

/* --------------------------------------add Task button large--- */
.add-task-container.large {
    height: 70vh;
    width: 60vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.add-task-container.large #addTaskBtn {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    color: var(--black);
    outline: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease-in-out;
}

.add-task-container.large #addTaskBtn:hover {
    background-color: rgb(225, 225, 225);
}

.add-task-container.large #addTaskSign {
    display: block;
    font-size: 6rem;
}

.add-task-container.large #addTaskText {
    font-size: 1.75rem;
}

/* -------------border style----- */

.dashed {
  --b: 3px;  /* border thickness */
  --s: 40px; /* size of the dashes */
  --c1: black;
  --c2: white;
  
  width: 100%;
  aspect-ratio: 1;
  position: relative;
}

.dashed::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--b);
    background:
        repeating-conic-gradient(var(--c1) 0 25%, var(--c2) 0 50%) 0 0/var(--s) var(--s) round;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ------------------border style-------- */




/* --------------------------------------add Task button large--- */


/* --------------------------------------main------ */

main {
    flex: 1;
}

.main-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0px;
}


#main-title {
    margin: 16px 12px;
    padding: 0px 20px;
    font-size: 2rem;
}

/* --------------------------------------main------ */

/* -------------------------------------task container -------- */

.tasks-container {
    margin: 0px 20px;
}


/* -------------------------------------task container -------- */


/* --------------------------------------task modal ------- */

#task-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#task-modal-container.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#task-modal {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    padding: 2rem;
    width: 60vw;
    border: none;
    border-radius: 10px;

    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s ease;
}

#task-modal-container.active #task-modal {
    transform: scale(1);
    opacity: 1;
}

.task-modal-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0px 10px 0px 2px;
}

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

.task-modal-header #task-header-title {
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.task-modal-header #closeBtn {
    margin-left: auto;
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
    padding: 4px 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.task-modal-header #closeBtn:hover {
    background-color: var(--grey);
}

.task-modal-form .form-input-section {
    display: flex;
    flex-direction: column;
    margin: 12px 0px;
}

.task-modal-form .form-input-section label {
    font-size: 1.2rem;
}

.task-modal-form .form-input-section .form-input {
    padding: 4px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    color: rgb(25, 25, 25);
    background-image: linear-gradient(to bottom right, rgb(245, 245, 245), rgb(199, 199, 199));
}

.task-modal-form .form-btns {
    display: flex;
    flex-direction: row;
    justify-content: right;
    gap: 8px;
}

.task-modal-form .form-btns button {
    background-color: var(--grey);
    border: none;
    padding: 6px 10px;
    border-radius: 16px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.task-modal-form .form-btns button:hover {
    background-color: rgb(200, 200, 200);
}

/* --------------------------------------task modal ------- */


/* --------------------------------------task items container ------- */

.task-items-container {
    padding: 20px 5px;
}

.task-items-list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}


/* --------------------------------------task items container ------- */

/* --------------------------------------task item ------- */

.task-item {
    display: flex;
    flex-direction: column;
    width: 350px;
    height: 200px;
    padding: 1rem;
    box-shadow: 0px 0px 10px 1px rgba(225, 225, 225);
}

.task-item.completed {
    text-decoration: line-through;
    opacity: 0.5;
    background-color: var(--grey);
}

.task-item-btn-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 8px;
}

.task-item .task-item-title {
    cursor: pointer;
    font-size: 1.3rem;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 6px;
}

.task-item .task-item-title:hover {
    text-decoration: underline;
}

.task-item .task-item-desc, .task-item .task-item-deadline {
    color: rgba(20, 20, 20, 0.8);
    margin-bottom: 4px;
}

.task-item .task-details {
    flex: 1;
}

.task-item-btn {
    background-color: transparent;
    font-size: 1.3rem;
    border: 1px solid var(--black);
    outline: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.task-item-btn:hover {
    background-color: var(--grey);
}

.no-items {
    width: 100%;
    font-size: 1.5rem;
    color: rgb(100, 100, 100);
    text-align: center;
}

/* --------------------------------------task item ------- */


/* --------------------------------------task selector ------- */

.task-selector-container {
    display: flex;
    flex-direction: row;
    justify-content: left;
    list-style: none;
    margin: 0px 2px;
    gap: 0.5rem;
}

.task-selector {
    cursor: pointer;
    padding: 2px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.task-selector:hover {
    background-color: var(--grey);
}

.task-selector.active {
    background-color: var(--grey);
}

/* --------------------------------------task selector ------- */


/* --------------------------------------view task ------- */

.view-task-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.view-task-modal-container.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.view-task-modal {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    padding: 2rem;
    width: 50vw;
    border: none;
    border-radius: 10px;

    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}


.view-task-modal-container.active .view-task-modal {
    transform: scale(1);
    opacity: 1;
}

.view-task-modal .task-title {
    font-size: 1.3rem;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 6px;
}

.view-task-modal .task-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0px 8px 0px 0px;
    margin-top: 1rem;
}

.view-task-modal .task-desc {
    text-align: justify;
}

.view-task-modal .task-btn-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.view-task-modal .task-btn-container button {
    width: 30%;
    font-size: 1rem;
    background-color: var(--grey);
    border: none;
    padding: 6px 10px;
    border-radius: 16px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.view-task-modal .task-btn-container button:hover {
    background-color: rgb(200, 200, 200);
}

/* --------------------------------------view task  ------- */


/* --------------------------------------footer------------ */

footer {
    height: 30px;
    padding: 1rem;
    background-color: rgb(220, 220, 220);
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

footer #github-src-link {
    color: black;
    text-decoration: none;
    font-size: 1.5rem;
}

/* --------------------------------------footer------------ */


@media screen and (max-width: 768px) {
    .task-item {
        width: 14rem;
        height: 18rem;
    }

    #main-title {
        padding: 0px 10px ;
    }

    .add-task-container {
        margin: 0 1rem;
    }

    .view-task-modal {
        width: 90vw;
    }

}

@media (max-width: 500px) {
    .task-items-list {
        justify-content: center;
    }

    #task-modal {
        width: auto;
    }

}