:root {
    --action-color: #cbb841;
    /* --primary-color: #3f66fb; */
    --primary-color: #cbb841;

    --success-color: #208b59;
    --error-color: #ee4238;
    --secondary-color: #690067;
    --color-light: #ddd;
    --background-color: #eee;
    --color-dark: #222;
    --padding-box: 25px;
    --padding-inner-box: 20px;
    --box-padding: 100px;
    --box-content-gap: 50px;
    --footer-height: 80px;
    --border-radius-small: 5px;
    --border-box-dark: 1px solid #444;
    --border-box-light: 1px solid #ccc;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        min-height: 80vh;
        scroll-behavior: smooth;
    }

    /* box row */
    .box {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        gap: var(--box-content-gap);
        padding: var(--box-padding);
    }
    
    .box__max-size {
        height: calc(100vh - 146px);
        gap: 0;
        padding: 0;        
    }

    /* box column center */
    .box__center {
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
    }

        .box__center .box--content {
            display: flex;
            gap: 50px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

       
        .box--content {
            width: 100%;
        }

            .action {
                background-color: var(--primary-color) !important;
                color: var(--color-dark) !important;
            }
        
            .response {
                padding: 10px;
                border-radius: var(--border-radius-small);
            }
            .error {
                color: var(--background-color);
                background-color: var(--error-color) !important; 
            }

            .success {
                color: var(--background-color);
                background-color: var(--success-color) !important;
            }


            .box--content h1 {
                font-size: 2.5rem;
            }

            .box--content h2 {
                font-size: 2rem;
            }

            .box--content p {
                font-size: 1.2rem;
            }

            .text-wrapper {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    gap: 25px;
                }

                .text-wrapper p {
                    width: 80%;
                }

                .action-wrapper {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    gap: 10px;
                }

                .btn {
                    color: #111;
                    text-decoration: none;
                    border: var(--border-box-light);
                    border-radius: var(--border-radius-small);
                    padding: 10px;
                    font-size: 1.2rem;
                    cursor: pointer;
                    background-color: transparent;
                    transition: 300ms;
                    margin: 5px;
                }

                .btn-dark {
                    color: var(--color-light) !important;
                }





                .action:hover {
                    background-color: var(--background-color) !important;
                    color: var(--color-dark) !important;
                }

                .action-wrapper .action,
                .action-wrapper .success {
                    border: none;
                    color: var(--color-light);
                }

                .action-wrapper .btn {
                    margin: 0px;
                }

            .form-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 50px;
                height: 550px;
                padding: 25px;
                border-radius: 25px;
                background-color: #b2b2b252;
            }

            .form-wrapper__auto {
                height: auto;
                padding: 50px;
            }

                .form {
                    display: flex;
                    flex-direction: column;
                    gap: 25px;
                    width: 100%;
                }
                
                .form__double-column {
                    flex-direction: row;
                    flex-wrap: wrap;
                }

                .form__double-column input,
                .form__double-column select
                 {
                    width: 48%;
                }

                .form__double-column .action-wrapper {
                    width: 100%;
                }

                .form__image-upload {
                    height: auto;
                }

                .form__image-upload .uploaded-image {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    gap: 25px;
                }

                .form__image-upload .uploaded-image img{
                    height: 150px;
                    width: 150px;
                    object-fit: cover;
                    filter: brightness(.6);
                }

                /* Form crud buttons */

                
                form .delete, 
                .edit {
                    border: none;
                    padding: 6px;
                    border-radius: 3px;
                    color: var(--color-light);
                    background-color: var(--success-color);
                    color: border;
                    cursor: pointer;
                    text-decoration: none;
                }

                form .delete {
                    background-color: var(--error-color);
                }

            .text-over-image {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 150px;
                height: 150px;
                background-color: #ffffff;
            }

            .text-over-image img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                filter: brightness(.4);
            }

            .text-over-image .text {
                position: absolute;
                color: var(--color-light);
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 40px;
            }

    footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        bottom: 0px;
        width: 100%;
        height: var(--footer-height);
        border-top: var(--border-box-light);
    }

/* WRITE THE PRINCIPAL COMPONENTS AND MAP */

@media(max-width: 900px) {
    :root {
        --box-padding: 50px;
    }

    .form-wrapper__auto {
        padding: 25px;
    }
    .form__double-column {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .form__double-column input,
    .form__double-column select
     {
        width: calc(50% - 30px);
    }


}

@media(max-width: 720px) {
    :root {
        --box-padding: 25px;
    }

    .text-wrapper p {
        width: 90%;
    }

}

@media(max-width: 650px) {
    :root {
        --box-padding: 100px 15px;
        --box-content-gap: 100px;
    }   
    .box {
        flex-direction: column;
        justify-content: center;
        padding: var(--box-padding);
    }

    .box__max-size {
        height: 100%;
        gap: 0;
        padding: 0;        
    }

    .box__max-size .box--content {
        height: 100vh;
    }

    .text-wrapper p {
        width: 100%;
    }

}
@media(max-width: 500px) {

    .form-wrapper__auto {
        padding: 10px;
    }

    .form__double-column input,
    .form__double-column select
    {
        width: calc(50% - 20px);
    }
}