:root {
    --bonafide-blue: rgb(35, 43, 61);
    --bonafide-tan: rgb(253, 249, 241);  
    --home-bento-corner: 3rem;
    --mobile-bento-corner: 1.2rem;


}

@font-face {
    font-family: 'mainFont';
    src: url(../fonts/paris-forbel/Paris\ Forbel.ttf);
}
/*
--//@font-face {
    font-family: 'creato_light';
    src: url(fonts/Creato\ Display/CreatoDisplay-Light.otf);
}

.nice {
    text-align: center; 
    font-family: creato_thin; 
    margin: 0;
    font-size: 3rem
}
*/
* {
    margin: 0;
    padding: 0;
    font-family: mainFont, serif;
}

body {
    background-color: var(--bonafide-blue);
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header {
    display: grid;
    background-color: var(--bonafide-tan);
    box-shadow: 0px 4px 5px rgb(17, 17, 17);
    align-items: center;
    justify-content: center;
    height: 20rem;
    max-height: 40vh;
    overflow: hidden;

}

.main {
    display: grid;
    grid-template-columns: 1.0fr 1.2fr 1.0fr 1.5fr 1.5fr 1.5fr;
    grid-template-rows: auto 8rem 10rem auto;
    gap: 1.8em;
    grid-template-areas: 
        "intro intro intro intro intro intro"
        "facebook bonafide instagram listing listing listing"
        "agent agent agent listing listing listing"
        "agent agent agent rslogos rslogos rslogos";
    padding: 5rem 10rem;
    max-height: 150rem;
}








footer {
    background-color: var(--bonafide-tan);
    text-align: center;
    align-self: end;
}

.header-logo {
    width: min(60rem, 80vw);
    height: auto;


}



.intro {
    
    display: grid;
    place-items: center;
    background-color: rgba(255, 255, 255, 0.904);
    grid-area: intro;
    border-radius: var(--home-bento-corner);
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
}

.intro-header {
    font-size: 4.5rem; 
    padding: 2rem .5rem .5rem; 
    text-align: center;
}

.intro-body {
    font-size: 1.5em; 
    padding: .5em 3em 1.2em;
}



.button-listings {
    
    display: grid;
    grid-template-rows: auto 40% auto;
    place-items: center;
    background-image: url(../pictures/front_house.jpg);
    background-size: cover;
    background-position: center;
    border-radius: var(--home-bento-corner);
    grid-template-areas: 
        "ls-background"
        "ls-title"
        ".";
    font-size: 3rem;
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    min-height: 20rem;
    min-width: 15rem;
    text-decoration-color: rgba(0, 0, 0, 5);
}

.button-agents {
    
    display: grid;
    place-items: center;
    border-radius: var(--home-bento-corner);
    grid-template-rows: auto 40% auto;
    background-image: url(../pictures/house-with-paperwork.jpg);
    background-size: cover;
    background-position: center;
    grid-template-areas: 
        "agent-background"
        "agent-title"
        ".";
    font-size: 3rem;
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    text-decoration: none;
    color: black;
    height: 100%;

}

.button-facebook {
    
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(24, 119, 242);
    border-radius: var(--home-bento-corner);
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    text-align: center;
    height: 8rem;

}

.button-bonafide {
    
    place-items: center;
    background-color: rgb(212, 212, 212);
    grid-area: bonafide;
    border-radius: var(--home-bento-corner);
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    text-align: center;
    border: none;
    width: 100%;

}


.button-instagram {
    display: grid;
    place-items: center;
    background-image: conic-gradient(at -30% 50%, rgb(129, 11, 253), rgb(129, 11, 253), rgb(129, 11, 253), rgb(255, 0, 96), rgb(255, 198, 1), rgb(255, 198, 1), rgb(255, 198, 1), rgb(255, 198, 1), rgb(255, 198, 1), rgb(255, 198, 1), rgb(129, 11, 253), rgb(129, 11, 253), rgb(129, 11, 253), rgb(129, 11, 253));
    border-radius: var(--home-bento-corner);
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    height: 8rem;

}

.social-icon {
    width: 5em;
    max-width: 3vw;
    filter: invert(100%);
}

.bonafide-icon {
    width: 7rem;
    max-width: 4vw;
    filter: invert(100%);
    padding: ;
}

.real-estate-logos {
    height: min(6rem, 10vh);
    filter: invert(0%);
    margin-left: -1px;
}

.button-real-estate-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgb(243, 243, 243);
    grid-area: rslogos;
    border-radius: var(--home-bento-corner);
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    text-align: center;
    padding: 3rem;
    row-gap: 5%;
    column-gap: 6%;
}

.link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ls-title {
    grid-area: ls-title;
    background-color: rgba(250, 250, 250, 0.7);
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    font-size: min(3.5rem, 6vh);
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    color: black;

}

.agent-title {
    grid-area: agent-title;
    background-color: rgba(250, 250, 250, 0.7);
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    font-size: min(3.5rem, 6vh);
    text-align: center;
    box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);

}


.modal-content {
    background-color: white;
    padding: 0;
    margin: auto;
    border-radius: 3.5rem;
    max-width: 80vw;
    width: 70rem;
}

.wrapper {
    padding: 2rem;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, .6);
}

page-link {
    color: inherit;
    text-decoration: none;
    display: block
}

@media screen and (max-width: 1000px) {
    .main {
        display: grid;
        grid-template-columns: 1.0fr 1.2fr 1.0fr;
        grid-template-rows: auto 15rem 7rem 15rem auto;
        gap: .8rem;
        grid-template-areas: 
            "intro intro intro"
            "listing listing listing"
            "facebook bonafide instagram"
            "agent agent agent"
            "rslogos rslogos rslogos";
        padding: 2rem 2rem;
        max-height: 150rem;
    }

    .intro-header {
        font-size: 2rem; 
        padding: 2rem .25rem .25rem; 
        text-align: center;
    }

    .intro-body {
        font-size: .75rem; 
        padding: .25rem 1.5rem 2rem;
    }

    .social-icon {
        width: 3rem;
        max-width: 20vw;
        filter: invert(100%);
        padding: 1rem;
    }

    .bonafide-icon {
        width: 4rem;
        max-width: 20vw;
        filter: invert(100%);
        padding: 1rem;
    }

    .button-agents {
        display: grid;
        place-items: center;
        border-radius: var(--mobile-bento-corner);
        grid-template-rows: auto 40% auto;
        background-image: url(../pictures/house-with-paperwork.jpg);
        background-size: cover;
        background-position: center;
        grid-template-areas: 
            "agent-background"
            "agent-title"
            ".";
        font-size: 1rem;
        box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
        text-decoration: none;
        min-height: 15rem;
        color: black;
    }

    .button-listings {
        display: grid;
        grid-template-rows: auto 40% auto;
        place-items: center;
        background-image: url(../pictures/front_house.jpg);
        background-size: cover;
        background-position: center;
        border-radius: var(--mobile-bento-corner);
        grid-template-areas: 
            "ls-background"
            "ls-title"
            ".";
        font-size: 1rem;
        box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
        min-height: 15rem;
        min-width: 15rem;
        text-decoration-color: rgba(0, 0, 0, 5);
    }

    header {
        display: grid;
        background-color: var(--bonafide-tan);
        box-shadow: 0px 4px 5px rgb(17, 17, 17);
        align-items: center;
        justify-content: center;
        height: 8rem;
        max-height: 30vh;
        overflow: hidden;
    }

    .intro {
        display: grid;
        place-items: center;
        background-color: rgba(255, 255, 255, 0.904);
        grid-area: intro;
        border-radius: var(--mobile-bento-corner);
        box-shadow: 0 0 .8rem .3rem rgba(0, 0, 0, .3);
    }

    .button-facebook {
        border-radius: var(--mobile-bento-corner);
        height: 7rem;
    }

    .button-bonafide {
        border-radius: var(--mobile-bento-corner);
    }

    .button-instagram {
        border-radius: var(--mobile-bento-corner);
        height: 7rem;
    }

    .button-real-estate-logos {
        border-radius: var(--mobile-bento-corner);
    }

    .header-logo {
        width: min(25rem, 60vw);
        height: auto;
        padding: 1rem;
    }

    .ls-title {
        font-size: min(1.8rem, 6vh);
    }

    .agent-title {
        font-size: min(1.8rem, 6vh);
    }

    .real-estate-logos {
            height: min(6rem, 30vh);

    }

}