#body{display: grid;
    background-color: #ffffff;}
#banner{display:grid;
    grid-area: banner;}
#instructions{
    display:grid;
    grid-area:instructions;}
#vizArea{display: grid;
    grid-area: vizArea;}

/*MOBILE STYLE*/
@media screen and (max-width:550px){
    #body{
        width:100%;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, auto);
        grid-auto-rows: minmax(auto);
        grid-gap:.1vh;
        margin:0;
        grid-template-areas:
    'banner banner banner banner banner'
    'instructions instructions instructions instructions instructions'
    'vizArea vizArea vizArea vizArea vizArea'}
    #banner{display:grid;
        height:20vh;
        grid-gap:1%;
        width:100%;
        background-image: url(./img/snowy.jpg);
        background-size: 100%;
        opacity:100%;
        align-items: end;}


    #tooltip{height:0vh;}
    #blackBox{display:grid;
        height:20vh;
        grid-gap:1%;
        width:100%;
        height:0%;
        background-color: black;
        color:white;
        font-family: 'Assistant';
        font-size:3.5vh;
        opacity: 70%;
        text-align: center;}
    #blackBoxText{padding-top: 7vh;
        margin:1%;
        opacity: 0%;}
    #instructions{
        margin-top:2.5%;
        padding-left: 12.5vw;
        padding-right: 12.5vw;
        font-family:'Assistant';
        font-size:5.25vw;
        text-align: center;
        color:rgb(83, 80, 80);}
    #vizArea{
        display:grid;
        height:112vh;
        grid-gap:1%;
        width:95%;
        margin-top:5%;
        margin-bottom:10vh;
        margin-left:2.5%;
        background-color: #e1e1e1;
        border-radius: 2vw;}
    }
/* PC STYLE */
@media screen and (min-width:550px){
    #body{width:100%;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(7, auto);
        grid-auto-rows: minmax(auto);
        grid-gap:0vh;
        margin:0;
        grid-template-areas:    
    'banner banner banner banner banner banner banner'
    '. instructions instructions instructions instructions instructions .'
    'vizArea vizArea vizArea vizArea vizArea vizArea vizArea'}
    #banner{display:grid;
        height:25vh;
        grid-gap:1%;
        width:100%;
        background-image: url(./img/snowy.jpg);
        background-size: 100%;
        opacity:100%;
        align-items: end;}
    #blackBox{display:grid;
        height:25vh;
        grid-gap:1%;
        width:60%;
        height:0%;
        background-color: black;
        color:white;
        font-family: 'Assistant';
        font-size:3.5vh;
        opacity: 70%;
        text-align: center}
    #blackBoxText{padding-top: 5vh;
        opacity: 0%;}
    #instructions{
        margin-top:2.5%;
        padding-left: 12.5vw;
        padding-right: 12.5vw;
        font-family:'Assistant';
        font-size:1.25vw;
        text-align: center;
        color:rgb(83, 80, 80);}
    #vizArea{
        display:grid;
        height:130vh;
        grid-gap:1%;
        width:95%;
        margin-top:2.5%;
        margin-bottom:10vh;
        margin-left:2.5%;
        background-color: #f1f1f1;}
    .tooltip {
        position: absolute;
        text-align: center;
        max-width:150px;
        width: auto;
        height: auto;
        color:white;
        padding: 8px;
        font: 13px Tahoma;
        background: #00315e;
        border: 0px;
        border-radius: 8px;
        pointer-events: none; /* Prevents the tooltip from interfering with mouse events on underlying elements */
    }
   .fedCirc, .privateCirc, .stateCirc, .localCirc{width:13px;}
    #interAgencyTT, #huntsmanFunc, #fullOpFunc{width:150px;}
    #hospitalTT{width:55px;}
    }