/* Chapter 7 asset - Base styles for example (and exercise) */

:root {
    --background: 228, 219, 219;
    --color: 33, 37, 41;
    --borderSize: .4rem;
    --optionOpacity: .8;
    --optionOpacityActive: 1;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: rgb(var(--color));
    background-color: rgb(var(--background));
}

.grid-container {
    display: grid;
    gap: .5rem;
    grid-template-rows: repeat(4, minmax(5rem, 1fr));
    grid-auto-flow: column;
}

.option {
    border-radius: 50%;
    background-color: rgb(var(--background));
    border: var(--borderSize) solid rgb(var(--color));
    font-size: 2rem;
    font-weight: 500;
    opacity: var(--optionOpacity);
    /* sizing */
    width: 100%;
    max-width: 10rem;
    height: auto;
    aspect-ratio: 1/1;
    padding: .4rem;
    /* vertical align */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    min-width: 30px;
    min-height: 30px;
}

.option.active {
    opacity: var(--optionOpacityActive);
    background-color: rgb(var(--color));
    color: white;
}

.active {
    transition-property: transform;
    transition-duration: .5s;
}


/* USERS */

.portrait {
    border-radius: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    max-width: 160px;
    max-height: 160px;
    min-width: 30px;
    min-height: 30px;
}

.showAffected .portrait {
    transition-property: opacity;
    transition-duration: 1s;
    opacity: .2;
}

.showAffected .portrait:hover {
    opacity: .5;
}


/* BLURBS */

.blurb {
    min-height: 1rem;
    font-size: calc(1.275rem + .3vw);
    font-weight: 500;
    height: 100%;
    /* line-height: 1.2; */
}

.blurb span {
    display: inline-block !important;
    padding-bottom: .8rem;
}

/* SECTIONS */

.container-xl {
    margin-top: 2.2rem;
    margin-bottom: 2.2rem;
}


/* Adds accessibility improvements across viewports
- condenses whitespace
- decrease font size, etc. */

/* Uses Bootstrap's max-width
https://getbootstrap.com/docs/5.3/layout/breakpoints/#max-width
Note: Add these xs -> xxl or the override small sizes */


/* MD, SM, XS */
@media (max-width: 991.98px) {
    .container-xl {
        margin-top: calc(1rem + 2vw);
        margin-bottom: calc(1rem + 2vw);
    }

    .container-xl:has(> .blurb) {
        margin-top: calc(.5rem + 1vw);
        margin-bottom: calc(.5rem + 1vw);
    }

    /* so portraits don't shift for long blurbs */
    .blurb {
        min-height: 4.7rem;
    }
}

/* SM, XS */
@media (max-width: 767.98px) {

    /* make padding relative to viewport size */
    .container-xl {
        margin-top: calc(.5rem + 1vw);
        margin-bottom: calc(.5rem + 1vw);
    }

    .container-xl:has(> .users) {
        margin-top: calc(.5rem + 1vw);
        margin-bottom: calc(.5rem + 1vw);
    }

    .col-2 {
        padding: 1vw !important;
    }

    /*  update font size to fit */
    .option {
        font-size: 3.5vw;
    }

    .blurb {
        font-size: 3vw;
    }
}

/* XS */
@media (max-width: 575.98px) {

    :root {
        font-size: calc(12px + 1vw);
    }

    h1 {
        font-size: calc(14px + 1.5vw);
    }

    /*  update font size to fit */
    .blurb {
        font-size: calc(12px + 1.5vw);
        /* font-size: 5vw; */
    }
}