/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html {
    --primary: 64, 124, 154;
    --primary-border: rgba(230, 230, 230, 1);
    --secondary-border: rgb(204, 185, 196);


    font-size: 62.5%;

    color: rgba(var(--primary), 1);

    header {
        border-bottom: 1px solid var(--primary-border);
    }

    label {
        font-size: 1.2rem;
        font-weight: 500;
    }

    input,
    textarea,
    select {
        font-size: 1.4rem;
        border: 1px solid var(--secondary-border);
        border-radius: 0.5rem;
    }

    a {
        font-size: 1.4rem;
        font-weight: 600;
        border-block-end: 1px solid var(--primary-border);
    }

    button,
    .button {
        display: grid;
        place-items: center;
        width: min(15ch, 16rem);
        font-size: 1.4rem;
        font-weight: 600;
        padding-inline: 0.8rem;
        padding-block: 1rem;
        border-radius: 0.6rem;
        background-color: rgba(var(--primary), 0.1);
        transition: 0.4s;
        box-shadow: 0.2rem 0.2rem 1rem rgba(var(--primary), 0.5);

        &:hover {
            background-color: rgb(var(--primary), .5);
            border-color: transparent;
            color: white;

        }
    }
}

:root {
    --equal-columns-grid: repeat(auto-fit, minmax(15ch, 1fr));
}

img.product_img {
    max-width: 85%;
  height: auto;
  border-radius: 1rem;
  margin-inline: auto;
  box-shadow: 0.3rem 0.3rem 1.5rem 1rem rgba(102, 129, 143, 0.3);
}