.circle {
    width: 10px;
    height: 10px;
}

/* header part */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    gap: 30px;
}

nav i {
    color: var(--white-Color);
    font-size: 20px;
}


/* Task progress part */

main .progress-task {
    margin: 30px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

main .progress-task .progress-head {
    display: flex;
    justify-content: space-between;
}

main .progress-task .progress-head span {
    color: var(--white-Color);
}


main .progress-task .progress-head span:last-of-type {
    color: var(--whiteDotT-Color);
}

main .progress-task .progress-bar {
    width: 100%;
    height: 14px;
    border-radius: 20px;
    background-color: var(--whiteDotT-Color);
}

main .progress-task .progress-bar .progress-fill {
    width: 0%;
    height: 14px;
    border-radius: 20px;
    background: var(--mainGradient-Linear);
    transition: width 1s ease-in-out;
}


/* Main -----> task section */

main section:first-child.active {
    animation: fadeInnerOut 0.6s ease forwards;
}

main section:first-child.desactive {
    animation: fadeOuterIn 0.6s ease 0.1s forwards;
}


/* Filter part*/
main .filter-task {
    margin: 20px 0px;
    display: flex;
    gap: 20px;
    overflow-x: scroll;
}

main .filter-task::-webkit-scrollbar {
    height: 1px;
}

main .filter-task span.filter {
    cursor: pointer;
    padding: 10px;
    font-weight: 300;
    color: var(--white-Color);
    background-color: var(--thirdCircle-BackgroundColor);
    border-radius: 10px;
    transition: opacity 0.5s ease;
}

main .filter-task span.filter:not(:first-child) {
    opacity: 0.4;
}

/* Task container part */
main .task-container {
    overflow-Y: scroll;
    margin: 40px 0px;
}


main .task-container::-webkit-scrollbar {
    height: 1px;
}

main .task-container .task {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
}

main .task-container .task:not(:last-child) {
    margin-bottom: 60px;
}

main .task-container .task .task-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

main .task-container .color-bar .bar {
    width: 60px;
    height: 5px;
    background-color: var(--firstCircle-BackgroundColor);
    border-radius: 10px;
}


main .task-container .title-task span {
    color: var(--white-Color);
    font-size: 1.2rem;
}

main .task-container .title-task span.completed {
    text-decoration-line: line-through;
    text-decoration-color: var(--white-Color);
    text-decoration-thickness: 2px;
}

main .task-container .details p {
    color: var(--whiteDotS-Color);
    font-size: 0.9rem;
    font-weight: 300;
    width: 200px;
}

main .task-container .date-priority {
    display: flex;
}


main .task-container .date-priority .date,
main .task-container .date-priority .priority {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white-Color);
    opacity: 0.9;
}

main .task-container .separator {
    font-size: 20px;
    color: var(--white-Color);
    margin: 0px 10px;
}

main .task-container .date-priority .priority {
    display: flex;
}


main .task-container  div.completed-task-check,
main .task-container div.unmark-task-check,
main .task-container div.edit-task-check,
main .task-container div.remove-task-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px -4px;
    opacity: 0;
}

main .task-container div.completed-task-check.fadeIn,
main .task-container div.unmark-task-check.fadeIn,
main .task-container div.edit-task-check.fadeIn,
main .task-container div.remove-task-check.fadeIn {
    animation: fadeInEase 0.6s ease 0.1s forwards;
}

main .task-container div.unmark-task-check.fadeOut,
main .task-container div.edit-task-check.fadeOut,
main .task-container div.remove-task-check.fadeOut {
    animation: fadeOutEase 0.6s ease 0.1s forwards;
}

main .task-container div.completed-task-check i,
main .task-container div.unmark-task-check i,
main .task-container div.edit-task-check i,
main .task-container div.remove-task-check i {
    font-size: 22px;
}

main .task-container div.completed-task-check i {
    color: var(--checkIcon-Color);
}

main .task-container div.unmark-task-check i,
main .task-container div.edit-task-check i,
main .task-container div.remove-task-check i {
    color: var(--firstCircle-BackgroundColor);
}

main .task-container div i.fa-circle-xmark {
    color: var(--refuseIcon-Color);
}


main .task-container div.completed-task-check span,
main .task-container div.unmark-task-check span,
main .task-container div.edit-task-check span,
main .task-container div.remove-task-check span {
    color: var(--white-Color);
}



main .task-container .task .task-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
}

main .task-container .task .task-option button {
    cursor: pointer;
    background-color: transparent;
    color: var(--white-Color);
    border: none;
    outline: none;
    font-size: 20px;
    transition: color 0.6s ease;
    position: relative;
    width: 100%;
    height: 100%;
}

main .task-container .task .task-option button:hover {
    color: var(--whiteDotS-Color);
}

main .task-container .task .task-option button i {
    position: absolute;
    top: 0;
    right: 0;
}

main .task-container .task .task-option .menu {
    visibility: hidden;
    opacity: 0;
    width: 150px;
    position: absolute;
    right: 0;
    top: 55px;
    background-color: var(--body-BackgroundColor);
    color: var(--white-Color);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: opacity 0.4s ease;
}

main .task-container .task .task-option .menu.visible {
    visibility: visible;
    opacity: 1;
}

main .task-container .task .task-option .menu::before {
    content: "";
    position: absolute;
    top: -20px;
    right: 0;
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-bottom-color: var(--blackDotS-Color);

}

main .task-container .task .task-option .menu div {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 0px; 
    padding: 5px 10px;
    transition: all 0.6s ease;
}

main .task-container .task .task-option .menu div:hover {
    background-color: var(--firstCircle-BackgroundColor);
    scale: 0.95;
}

main .task-container .task .task-option .menu > *:not(:last-child) {
    border-bottom: 1px solid gray;
}


/* Add task part */
main .add-task-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

main .add-task-container button {
    width: 100%;
    padding: 10px 0;
    background-color: var(--firstCircle-BackgroundColor);
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--white-Color);
    border-radius: 16px;
    position: relative;
}

main .add-task-container button i {
    display: inline-block;
    transform: translateX(30px) rotate(95deg);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.6s ease-in;
}

main .add-task-container button:hover i {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
}


/* Form add task part */
main .add-task-action,
main .add-task-action label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Add task btn */
main .add-task-action {
    display: none;
    opacity: 0;
    transition-property: display opacity;
    transition-duration: 0.6s;
    transition-behavior: allow-discrete;
}

main .add-task-action.active {
    display: flex;
    opacity: 1;
    @starting-style {
        opacity: 0;
    }
}


main .add-task-action {
    gap: 10px;
    background-color: var(--body-BackgroundColor);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    border-radius: 10px;
}

main .add-task-action .blur {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: var(--blackDotS-Color);
    z-index: -1;
    filter: blur(50px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main .add-task-action button#close-add-task-btn {
    width: fit-content;
    background-color: transparent;
    align-self: flex-end;
}

main .add-task-action > button#close-add-task-btn i {
    color: var(--firstCircle-BackgroundColor);
    font-size: 20px;
    cursor: pointer;
}

main .add-task-action label > * {
    margin-bottom: 10px;
}

main .add-task-action label > span {
    color: var(--white-Color);
}

main .add-task-action label input,
main .add-task-action label textarea {
    color: var(--white-Color);
    background-color: var(--containerBody-BackgroundColor);
    font-family: inherit;
    outline: none;
    border: none;
    min-width: 400px;
    max-width: 400px;
    padding: 10px 30px 5px;
}

main .add-task-action label textarea {
    min-height: 80px;
    max-height: 80px;
}

main .add-task-action label .custum-select {
    position: relative;
}

main .add-task-action label .custum-select::after {
    content: '⮟';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white-Color);
    font-size: 12px;
}

main .add-task-action label select {
    appearance: none;  
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--containerBody-BackgroundColor);
    color: var(--white-Color);
    font-family: inherit;
    border: 1px solid var(--white-Color);
    outline: none;
    padding: 10px 40px 10px 30px;
}

main .add-task-action button {
    width: 100%;
    padding: 10px 0;
    background-color: var(--firstCircle-BackgroundColor);
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--white-Color);
    border-radius: 20px;
    transition: opacity 0.8s ease;
}

main .add-task-action button:hover {
    opacity: 0.7;
}

main .add-task-action .error {
    color: var(--white-Color);
    background-color: red;
    font-size: 16px;
    padding: 10px 15px;
    text-transform: capitalize;
    opacity: 0;
    transition: all 0.6s ease;
}

main .add-task-action .error.visible {
    opacity: 1;
}


/* main -----> time section */
main section.poromodo-container.active {
    animation: fadeInnerOut 0.6s ease forwards;
}

main section.poromodo-container.desactive {
    animation: fadeOuterIn 0.6s ease 0.1s forwards;
}

main section.poromodo-container .container-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0px 20px;
    padding: 10px;

}

main section.poromodo-container .container-block span {
    color: var(--white-Color);
}


main section.poromodo-container .container-block .clock {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

main section.poromodo-container .container-block .clock .time {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    color: white;
    font-size: 30px;
}


main section.poromodo-container .clock .time svg {
    width: 300px;
    height: 300px;
    transform: rotate(-90deg);
}

main section.poromodo-container .clock .time svg circle {
    fill: none;
    stroke: var(--secondCircle-BackgroundColor);
    stroke-width: 7;
    stroke-dasharray: 314;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 6px rgba(255, 20, 20, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.205));    
}

main section.poromodo-container .clock .time span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 6px rgb(255, 20, 20)) drop-shadow(0 0 6px rgba(255, 48, 48, 0.438)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.205));
}


main section.poromodo-container .clock button {
    cursor: pointer;
    background-color: var(--firstCircle-BackgroundColor);
    border: none;
    outline: none;
    padding: 5px 15px;
    border-radius: 20px;
    color: var(--white-Color);
    font-family: inherit;
    font-size: 16px;
    transition: opacity 0.6s ease;
    
}


@media (max-width: 350px) {
    main section.poromodo-container .clock button {
        margin-inline: 20px;
    }
}

main section.poromodo-container .clock button:hover {
    opacity: 0.5;
}


main section.poromodo-container span.iteration{
    margin: 10px 0px;
}

main section.poromodo-container a {
    align-self: self-start;
    padding: 10px 20px;
    color: var(--secondCircle-BackgroundColor);
    text-transform: capitalize;
}


/* main -----> user info section */
main section:last-child.active {
    animation: fadeInnerOut 0.6s ease forwards;
}

main section:last-child.desactive {
    animation: fadeOuterIn 0.6s ease 0.1s forwards;
}

main section.user-info {
    color: var(--white-Color);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0px 0px;
    padding: 10px;
}

main section.user-info .main-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

main section.user-info .main-user-info .avatar {
    width: 100px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

main section.user-info .main-user-info .avatar i {
    font-size: 110px;
}



main section.user-info .main-user-info span.user-name {
    background-image: var(--textGradient-Linear);
    background-clip: text;
    color: transparent;
    padding: 5px 10px;
}


main section.user-info .extra-user-info {
    align-self: stretch;
    padding: 10px;
    margin-top: 15px;
}

main section.user-info .extra-user-info .task-user-info {
    margin: 10px 0px 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; 
    gap: 20px;
    flex-wrap: wrap;
}

main section.user-info .extra-user-info .task-user-info div {
    color: #ffffffcf;
}

main section.user-info .extra-user-info .task-user-info div span {
    color: rgba(255, 255, 255, 0.46);
}

main section.user-info .extra-user-info .actions {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

main section.user-info .extra-user-info .actions button {
    font-family: inherit;
    min-width: 100px;
    padding: 10px;
    border-radius: 10px;
}