* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#root {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgb(225, 251, 253);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.flx {
    display: flex;
}

#back-btn {
    position: absolute;
    top: 4vh;
    left: 40px;
    width: fit-content;
    border: 1px solid black;
    background-color: rgba(155, 209, 249, 1);;
    transition: 0.5s ease;
    color: black;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    &:hover {
        cursor: pointer;
        opacity: 0.7;
    }
}

#header {
    width: fit-content;
    height: fit-content;
    margin: 10px auto ;
    border: 2px solid black;
    padding: 10px 15px;
    border-radius: 30px;
    background-color: rgba(155, 209, 249, 1);
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    &:hover {
        cursor: pointer;

        & #title {
            text-shadow: 6px 1px 4px rgba(0, 0, 0, 0.25);
        }
    }
}

hr {
    height: 4px;
    background: linear-gradient(to right, black, rgba(155, 209, 249, 1));
    width: 100%;
    border: none;
    margin: 8px 0;
}

#title {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    transition: 0.4s ease;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;

    & strong {
        color: blue;
    }

    & em {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: azure;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        padding: 5px;
        font-weight: normal;
        font-style: normal;
        font-size: 0.7em;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

    }

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 70px 20px 70px;
    background-size: contain;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    & form, .task-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 20px;
        background-color: rgb(155, 209, 249);
        border-radius: 20px;
        width: fit-content;
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }
}

button:not(button[type="submit"], button[class='delete-btn'], button[class='edit-btn'], button[id='back-btn']) {
        padding: 5px 10px;
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        background-color: white;
        border: 1px solid black;
        border-radius: 10px;
        transition: 0.5s ease;

        &:hover {
            box-shadow: 1px 1px 10px 1px rgba(0, 0 , 0, 0.4) inset;
        }

        & a {
            text-decoration: none;
        }
}

h3 {
    background-color: rgb(155, 209, 249);
    padding: 10px;
    user-select: none;
    
    &::after {
        content: "";
        display: block;
        height: 4px;
        width: 100%;
        background-color: cadetblue;
    }
}

#task-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;

}

.task-card  {
    width: 250px !important;
    height: 300px;
    padding: 10px !important;
    position: relative;
    transition: 0.5s ease;

    &:has(input[type='checkbox']:checked) {
        background-color: rgb(11, 215, 72) !important;

        & h4, p {
            opacity: 0.5;
        }
    }

    & h4 {
        background-color: rgb(189, 234, 237);
        border-radius: 10px;
        padding: 8px;
        text-align: left;
        width: 80%;
        overflow-wrap: break-word;
        word-break: break-word;
        transition: 0.5s ease;
    }

    & p {
        background-color: rgb(189, 234, 237);
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        border-radius: 10px;
        padding: 10px;
        height: 70%;
        transition: 0.5s ease;
    }

    &:hover {
        transform: translateY(6px);
    }

}

.titulo-wrapper {
    display: flex;
    position: relative;

    & label {
        position: absolute;
        top: 50%;
        right: 2.5%;
        transform: translateY(-50%);
    }
}

.create-task-card {
    width: 250px;
    height: 300px;
    padding: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 2px solid green;
    transition: 0.5s ease;
    
    &:hover {
        box-shadow: rgba(9, 255, 0, 0.589) 0px -23px 25px 0px inset, rgba(0, 163, 3, 0.15) 0px -36px 30px 0px inset, rgba(2, 165, 5, 0.1) 0px -79px 40px 0px inset, rgba(80, 206, 2, 0.06) 0px 2px 1px, rgba(2, 190, 6, 0.09) 0px 4px 2px, rgba(46, 224, 7, 0.09) 0px 8px 4px, rgba(7, 216, 0, 0.09) 0px 16px 8px, rgba(72, 200, 8, 0.09) 0px 32px 16px;
        cursor: pointer;
    }
}

.task-icon {
    position: absolute;
    left: 4px;
    bottom: 10px;
    background-color: white;
    border-radius: 10px;
}

.btn-wrapper {
    display: flex;
    gap: 5px;
}

.delete-btn, .edit-btn {
    border: none;
    border-radius: 20px;
    transition: 0.5s ease;
    width: 50%;

    &:hover {
        opacity: 0.8;
        cursor: pointer; 
    }
}

.delete-btn {
    background-color: red;
}

.edit-btn {
    background-color: blue;
}

.finished-btn {

    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 13px;
    right: 28px;

    & input[type='checkbox'] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    & span {
    background-color: transparent !important;
    border: 1px solid green;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: white;
    width: 30px;
    height: 30px;
    font-size: 2em;
    transition: 0.5s ease;
    
    &:hover {
        cursor: pointer;
    }
    }

    &:has(input[type='checkbox']:checked) {
        span {
            background-color: green !important;
        }
    }

}

#input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 20px;

    & label {
        position: relative;
        left: 10px;
    }
}

label > strong {
    color: rgb(167, 44, 44);
    font-weight: normal;
    position: relative;
}

label {
    user-select: none;
}

input[type='text'], textarea {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 10px;
    border: 1px solid black;

    &:focus {
        outline: none;
    }
}

input[type='text'] {
    border-radius: 20px;
}

textarea {
    border-radius: 15px;
    resize: none;
}

button[type='submit'] {
    border: none;
    padding: 10px;
    background-color: green;
    color: white;
    margin-top: 5px;
    width: 100%;
    border-radius: 0 0 20px 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.5s ease;

    &:hover {
        cursor: pointer;
        opacity: 0.7;
    }
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(155, 209, 249, 1);

    & hr {
        margin-top: 0 !important;
    }
}

#github-icon:hover, #linkedin-icon:hover {
    & img {
        opacity: 0.7;
    }
}