/* UNIVERSAL STYLE */


#topTitle{
    grid-area: topTitle;
    width:100%;
}
#svgArea{
    grid-area: svgArea;
}
#bottomBorder{
    grid-area: bottomBorder;
}

@media screen and (min-width:440px){
    body{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
        background-color: #d3dadf;
        grid-template-areas:
        "topTitle, topTitle, topTitle, topTitle, topTitle, topTitle, topTitle"
      ;}
/*topTitle area*/
    #topTitle{
        display:grid;
        grid-area:topTitle;
        background-color: #40576b;
        grid-row: 1;
        grid-column: 1/-1;
        height: 30vh;
        border-radius: 10px;
    }

    #homelessTitle{
        display:grid;
        grid-row:1;
        font-family:'Quicksand';
        text-align:left;
        font-size:3vw;
        color:white;
        margin-left:2vw;
        margin-top: 2vh;
    }

    #vizDescript{
        display:grid;
        grid-row:1;
        font-family:'Quicksand';
        text-align:left;
        font-size:1.05vw;
        color:white;
        margin-left:-15vw;
        margin-top:5vh;
    }


    /*svgArea area*/
    #svgArea{
        grid-row:2;
        grid-column:1/-1;
    }
    #reportImg{
        display:grid;
        grid-area:bottomBorder;
        grid-column: 7;
        grid-row:1;
        margin-right:0vw;
        margin-top:-2vh;
        height:4vw;
        text-align: right;
        }
    #fullReport{
        display:grid;
        grid-area:bottomBorder;
        grid-column: 7;
        grid-row:1;
        font-family:'Quicksand';
        text-align:left;
        font-size:2vw;
        color:white;
        margin-left:75vw;
        margin-top: 4.7vh;
        text-decoration: none;
    }
    #bottomBorder{
        display:grid;
        grid-area:bottomBorder;
        grid-row:3;
        grid-column:1/-1;
        height:15vh;
        background-color:#40576b;
        border-radius: 10px;
    }
    
}
@media screen and (max-width:440px){
    body{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
        background-color: #d3dadf;
        grid-template-areas:
        "topTitle, topTitle, topTitle, topTitle, topTitle, topTitle, topTitle"
      ;}
/*topTitle area*/
#topTitle{
    display:grid;
    grid-area:topTitle;
    background-color: #40576b;
    grid-row: 1;
    grid-column: 1/-1;
    height: 10vh;
    border-radius: 10px;
}

#homelessTitle{
    display:grid;
    grid-row:1;
    font-family:'Quicksand';
    text-align:center;
    font-size:3.5vw;
    color:white;

}

#vizDescript{
visibility: hidden;
}


/*svgArea area*/
#svgArea{
    grid-row:2;
    grid-column:1/-1;
}
#reportImg{
visibility: hidden;
    }
#fullReport{
    grid-row:1;
    font-family:'Quicksand';
    text-align:center;
    margin-top:7%;
    font-size:3vw;
    color:white;
    text-decoration: none;
}
#bottomBorder{
    display:grid;
    grid-area:bottomBorder;
    grid-row:3;
    grid-column:1/-1;
    height:10vh;
    background-color:#40576b;
    border-radius: 10px;
}

}