:root {
    --clr-primary: #afc0d4;
    --clr-primary-intense: #7cb7fa;
    --clr-gray-dark: #1e2832;
    --clr-gray-dark-alt: #3c6186;
    --clr-accent: #a18352;
    --clr-accent-dk: #645235;
    --clr-accent-light: #f6cf90;
    --clr-card-bg: #fdf4df;
    --clr-card-bg-dk: #46423a;
    --clr-card-bg-dk-hl: #999180;
    --clr-card-bg-hl: #fdf8ed;
    --clr-text: white;
    --clr-bg: #f7f4ea;
    
    --ff-primary: "Merriweather", sans-serif;
    --ff-accent: "Montserrat", sans-serif;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transition: all 250ms ease;
}

::-moz-focus-inner,
::-moz-focus-outer {
    border: 0;
}

a {
    font-weight: 1000;
    outline: 0;
    text-decoration: none;
    color: var(--clr-primary);
    transition: 
        color 100ms ease,
        text-decoration 200ms ease;
}

a:hover {
    color: var(--clr-primary-intense);
}

a:focus {
    color: var(--clr-primary-intense);
    text-decoration: underline;
}

header {
    padding-block: 1rem;
    margin-block-end: 1rem;
    background-color: var(--clr-gray-dark);
    color: white;
}

body {
    background-color: var(--clr-bg);
    font-family: var(--ff-primary);
    line-height: 1.6;
}

.text-center {
    text-align: center;
}

h1, h2, h3 {
    transition: color 250ms ease;
    cursor: default;
}

h1 {
    font-weight: 800;
}

h2, h3 {
    font-weight: 250;
}

h1:hover, 
h2:hover {
    color: var(--clr-primary);
}

h3:hover {
    color: var(--clr-gray-dark-alt);
}

body,
h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.container {
    width: min(50%,40rem);
    margin-top: 1rem;
    margin-bottom: 7rem;
    margin-inline: auto;
}

row {
    position: relative;
}

.person-parent {
    color: var(--clr-card-bg-hl);
    min-height: 5.5rem;
    width: 100%;
    font-family: var(--ff-accent);
    position: relative;
    background-color: var(--clr-card-bg-dk);
    display: flex;
    box-shadow: 0 0 15px rgba(0, 0, 0, .25);
    flex-direction: column;
    place-items: center;
    transition: 
        all 150ms ease,
        background-color 200ms ease;
}

/* BASIC IMAGE BG SETTINGS */
.person-parent::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-clip: content-box;
    -moz-background-clip: content-box;
    -webkit-background-clip: content-box;
    opacity: 25%;
}

/* IMAGE BG FILTERS */
.person-parent::before {
    --gray-scale-timing: 650ms;
    --blur-scale: .5px;

    transition: all var(--gray-scale-timing) ease,
        background-size 250ms ease;

    -webkit-filter: 
        grayscale(100%)
        blur(var(--blur-scale));
    -moz-filter: 
        grayscale(100%)
        blur(var(--blur-scale));
    -ms-filter: 
        grayscale(100%)
        blur(var(--blur-scale));
    -o-filter: 
        grayscale(100%)
        blur(var(--blur-scale));
    filter: gray; 
}

.person-parent-right::after {
    margin-left: 0;
}

/* INDIVIDUAL IMAGES */
#ricardo::before {
    background-image: url(../static/ricardo2.png);
}

#javier::before {
    background-image: url(../static/Javier.png);
}

#mirtha::before {
    background-image: url(../static/mir2.jpg);
}

#brian::before {
    background-image: url(../static/brighton2.jpg);
}

#dylan::before {
    background-image: url(../static/dyl.png);
}

#runa::before {
    background-image: url(../static/runa.png);
}

#nima::before {
    background-image: url(../static/nima3.png);
}

/* TEXT SETTINGS */
.person-parent .text {
    text-align: center;
    padding: auto;
    margin: auto;
    font-size: 2.25vw;
    transition: 
        font-size 125ms ease,
        margin-left 150ms ease,
        margin-right 150ms ease,
        color 250ms ease,
        font-weight 100ms ease;
    z-index: 1;
}

/*               */
/* HOVER CHANGES */
row:hover .person-parent{
    background-color: var(--clr-card-bg-dk-hl);
    min-height: 7rem;
    width: 105%;
    transform: translateX(-2.5%);
}

row:hover .person-parent a{
    color: var(--clr-gray-dark);
}

row:hover .person-parent a:hover{
    color: var(--clr-primary-intense);
}

row:hover .person-parent::before {
    --blur-scale: 5px;
    -webkit-filter: 
        grayscale(50%)
        blur(var(--blur-scale));
    -moz-filter: 
        grayscale(50%)
        blur(var(--blur-scale));
    -ms-filter: 
        grayscale(50%)
        blur(var(--blur-scale));
    -o-filter: 
        grayscale(50%)
        blur(var(--blur-scale));
    filter: gray; 
    background-size: 125%;
    opacity: 65%;
}

row:hover .person-parent .text {
    font-size: 3vw;
    color: var(--clr-accent-dk);
    font-weight: 900;
}

row:hover .person-parent .text-small {
    font-size: 4vw;
}

/* FOOTER */
/*//////////////////////////////////////////*/

.footer {
    font-size: 0.8rem;
    font-family: var(--ff-accent);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--clr-gray-dark);
    color: white;
    padding: .8rem;
    text-align: center;
    z-index: 10;
  }

.footer .btn {
    color: white;
    display: inline-block;
    border: 2px solid white;
    padding:.1rem .5rem;
    margin-bottom: .25rem;
}

.footer .btn:focus {
    border-color: var(--clr-primary-intense);
}

.footer .btn:hover {
    background-color: var(--clr-gray-dark-alt);
}

.footer p {
    display: block;
    padding: .1rem .5rem;
}

/* MEDIA QUERIES */

@media (min-width: 50em) {

    #dylan {
        background-image: url(../static/dyl-banner.png);
        background-position: center;
        background-blend-mode: multiply;
    }

    .person-parent {
        color: var(--clr-gray-dark);
        background-color: var(--clr-card-bg);
        min-width: 28rem;
        flex-direction: row;
    }

    a {
        color: var(--clr-gray-dark-alt);
    }

    row:hover .person-parent {
        background-color: var(--clr-card-bg-hl);
    }

    row:hover .person-parent a {
        color: var(--clr-gray-dark-alt);
    }

    .person-parent .text {
        font-size: .9rem;
    }
    
    row:hover .person-parent .text {
        font-size: 1.05rem;
        color: var(--clr-accent);
        font-weight: 900;
    }

    row:hover .person-parent .text-small {
        font-size: 2rem;
    }

    .person-parent::before {
        -webkit-filter: grayscale(100%);
        -moz-filter:    grayscale(100%);
        -ms-filter:     grayscale(100%);
        -o-filter:      grayscale(100%);
        background-size: max(25%, 9rem);
        opacity: 100%;
    }
        
    row:hover .person-parent::before {
        -webkit-filter: grayscale(0%);
        -moz-filter:    grayscale(0%);
        -ms-filter:     grayscale(0%);
        -o-filter:      grayscale(0%);
        filter: none; 
        background-size: max(25%, 10rem);
        opacity: 100%;
    }

    /* IMAGE POSITIONING */
    .person-parent-left::before {
        background-position: right;
    }

    .person-parent-right::before {
        background-position: left;
    }

    /* TEXT POSITIONING */
    .person-parent-left .text {
        text-align: left;
        margin-left: 2rem;
    }

    .person-parent-right .text {
        text-align: right;
        margin-right: 2rem;
    }

    /* OFFSET WHEN HOVERING */
    row:hover .person-parent-left {
        transform: translateX(5%);
    }
    
    row:hover .person-parent-right {
        transform: translateX(-10%);
    }

    /* CHANGE TEXT MARGIN WHEN HOVERING */
    row:hover .person-parent-left .text {
        margin-left: 1.1em;
    }

    row:hover .person-parent-right .text {
        margin-right: 1.1em;
    }

    .footer {
        padding: .5rem;
    }

    .footer .btn {
        float:left;
        margin-bottom: 0;
    }
    
    .footer p {
        float: right;
    }
}

@media (min-width: 68em) {
    
    .person-parent .text {
        font-size: 1.15rem;
    }

    row:hover .person-parent .text {
        font-size: 1.25rem;
        color: var(--clr-accent);
        font-weight: 900;
    }

    row:hover .person-parent .text-small {
        font-size: 3rem;
    }

    row:hover .person-parent::before {
        background-size: max(25%, 14rem);
    }

    /* CHANGE TEXT MARGIN WHEN HOVERING */
    row:hover .person-parent-left .text {
        margin-left: .8em;
    }

    row:hover .person-parent-right .text {
        margin-right: .8em;
    }
}

@media (max-width: 35em) {
    .person-parent .text {
        font-size: 3vw;
    }
    row:hover .person-parent .text{
        font-size: 3.2vw;
    }
        
    row:hover .person-parent .text-small {
        font-size: 6vw;
    }


}