@media only screen and (min-width: 37.5em){

    #join-banner{
        font-size: 1rem;
    }
    nav button{
        margin-bottom: 1rem;
        margin-left: 7rem;
        margin-top: 2.8rem;
    } 
    nav{
        margin-left: 1rem;
    }
    #social{
        margin-left: 6rem;
    }
    #social img{
        margin-top: 1rem;
        width: 30%;
        margin-left: 0.5rem;
    }
    #date{
        font-size: 1rem;
    }
    main{
        grid-template-columns: 1fr 1fr 1fr;
        font-size: 1rem;
    }
    #siteName-action{
        grid-column: 1 / 4;
        grid-row: 1;
    }
    #welcome{
        font-size: 1.5rem;
    }
    #join-button{
        font-size: 1.3rem;
        
    }
    #news{
        grid-column: 1 / 4;
        grid-row: 2;
    }
    #spotlights{
        grid-column: 1 / 4;
        grid-row: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        font-size: 1rem;
    }
    #spotlight1{
        grid-column: 1;
        grid-row: 1;
    }
    #spotlight2{
        grid-column: 2;
        grid-row: 1;
        border-left: none;
        border-top: 1px solid #000
    }
    #join{
        display: block;
        grid-column: 1 / 4;
        grid-row: 4;  
        font-size: 1rem;
    }
    #join a{
        text-decoration: none;
        color: #EDF3DE;
    }
    #join h2{
        margin-top: 0;
    }
    #event{
        grid-column: 1 / 3;
        grid-row: 5;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        font-size: 1rem;
    }
    #weather{
        grid-column: 3;
        grid-row: 5;
        font-size: 1rem;
        width: 100%;
    }
    #img-temp p{
        font-size: 2rem;
    }
    #logo-name-address{
        display: flex;
        align-items: center;
    }
    #logo-name-address p{
        margin-left: .5rem;
        line-height: 1.75rem;
        margin-right: 1rem;
    }
    #logo-name-address img{
        width: 50%;
    }
    #upper-footer{
        padding: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: .9rem;
        align-items: center;
    }
    #contact-info{
        padding: 1rem;
        margin-top: 1rem;
        margin-right: 1rem;
        margin-left: 2rem;
    }
    #copyright-names{
        display: flex;
        justify-content: center;
    }
    #copyright-names p{
        border-right: 1px solid #eee;
        padding: .5rem;
    }
    /*Discover page*/
    .statistics, .local-storage,
    .population-p, .sec-img p{
        font-size: 1.1rem;
    }
    /* Join page*/
    #join-content{
        display: block;
    }
    #top-legend{
        font-size: 1.5rem;
    }
    #top-field legend, #bottom-field legend{
        font-size: 1.2rem;
    }
    #bottom-content{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 0;
    }
    #radio-buttons{
        text-align: left;
    }
    #benefit-cost{
        width: 60%;
    }
    input.submitBtn{
        margin-left: 1.5%;
    }
    /* thankyou page*/
    #thanks-content{
        font-size: 1.1rem;
        display: block;
    }
    /* directory page*/
    .business-card{font-size: 0.9rem;}
    /* grid view*/
    .grid{grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
    /* list view*/
    .list .business-card p:nth-child(3), 
    .list .business-card p:nth-child(5){display: none;}
    .list .business-card{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .list .business-card h2{width: 7.5rem; margin-top: 0.85rem;}
    .list .business-card p:nth-child(1){
        width: 15rem;
        overflow-wrap: break-word;
    }
    /* contact page*/
    #general-contact, #member-contact, #form-contact, #sponsorship, #visit-us {font-size: 1rem;}
    #contact-content {grid-template-columns: 1fr 1fr;}
    #contact-content h1 {grid-column: 1 / 3; grid-row: 1;}
    #subheading {grid-column: 1 / 3; grid-row: 2;}
    #general-contact {grid-column: 1 / 3; grid-row: 3;}
    #general-contact h3 {
        text-align: left; 
        margin-top: 2rem; 
        margin-bottom: 1.5rem;
        margin-left: 2%;
    }
    #alex-quote{
        display: flex;
        justify-content: space-around;
    }
    #alex-quote p {line-height: 1.4rem;}
    #alex-quote p{max-width: 50%;}
    #general-contact p{text-align: center; margin-top: 3.2rem;}
    #member-contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
        grid-column: 1 / 2; 
        grid-row: 4;
    }
    #sponsorship {
        display: flex;
        flex-direction: column;
        justify-content: center;
        grid-column: 2; 
        grid-row: 4;
    }
    #or {grid-column: 1 / 3; grid-row: 5; font-size: 1.8rem;}
    #form-contact {grid-column: 1 / 3;}
}