:root{
    --primary-text-color: #c2c4c7;
    --secondary-text-color: whitesmoke;
    --banner-color: linear-gradient(45deg, var(--primary-color) 20%, color-mix(in hsl, var(--primary-color), #ffffff 20%), color-mix(in hsl, var(--primary-color), #ffffff 20%));
    --primary-color: #383745;
    --background--primary-color: rgba(241, 241, 241, 0.986);
    --body-width: 80vw;
}

.page-content{
    grid-row: 2;
}

.spacer{
    height: 8rem;
    width: 100%;
}

html{
    min-height: 100vh;
    scroll-behavior: smooth;
}

section{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title{
    margin-bottom: 2rem;
}

.mapouter{
    width: 100%;
}

.gmap_canvas{
    width: 100%;
    height: 300px;
}
#gmap_canvas{
    width: 100% ;
    height: inherit;
}

.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 320px) and (max-width: 575px) {
    #gmap_canvas{
        width: 100%;
        height: 300px;
    }    

    .spacer{
        height: 50px;
    }
}

@media only screen and (min-width: 575px) and (max-width: 920px){
    :root{
        --body-width: 95vw;
    }
    
   
 }