#logo {
        font-size: 48px; 
        color: rgb(248, 195, 61);
        margin-left: 1.5rem;
        margin-right:0.5rem;
    }
 
 #headerText {
        color :rgb(248, 195, 61);
        margin-top:0.5rem;

    }


#apiDiv {
    visibility: hidden;
}

.margin {

    margin: 2.5%;
    border: 0;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

}

.align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: center;


}
.venueSection, .weatherSection {
    margin-top: 5%;
}

#weatherData {
   
    align-items:flex-end;
    margin:0;

}


    #mainContainer {
        background-image: url("/assets/img/background1.png");/*.photo {
    Photo by Sheila from Pexels
    https://www.pexels.com/photo/airplane-wing-towards-clouds-731217/
}*/
        background-repeat: no-repeat; 
        background-size: cover; 
        background-position: center; 
        text-align:center;
    }
        

   
    #mainSection {
        vertical-align: middle;
    }

    #headerMain {
        height: 300px;

        }
   
    #qText {
        color:white ;
        font-size: 50px;
        margin-bottom: 2.5%;
    }

    
    #headerContainer {
       padding-left:0;
       padding-right:0;
    }
    
    .padding35 {

        padding-left:0.57rem;
        padding-right: 0.57rem;
    }

    footer {
        background-color: rgb(248, 195, 61);
        color:white;
        visibility: hidden;
        position: relative;
        bottom: 0;
        width: 100%;
        height: 2.5rem;     
    }

/******Media******/
     @media (max-width:767px){
        #logo {
            font-size:2.25rem; 
        }

        #headerText,#qText {
            font-size:1.7rem;
            font-weight:bold;
        }

        #headerMain {
            height: 125px;
        }

        #dataInput button,#dataInput input {
            font-size: 78%;
        }
     

        #weatherTitle h2, #titleDiv h2 {
            font-size:100% !important;
            font-weight:bold;
        }

        h3 {
            font-size:75% !important;
            font-weight:bold;
        }

       #weatherDiv h3 {
            font-size:60% !important;
            font-weight:bold;
        }

        h4 {
            font-size:70% !important;
            font-weight:bold;
        }

        p {
            font-size:60% !important;
        }
        #weatherDiv {
          width: 25%;
          height: 50%;
        }
        #venue {
          width: 80%;
          height: 50%;
        }
        #venues {
          
        }
        img {
            height: 3rem;
            width: 3rem;
        }
        #weatherData {
            justify-content: center;
        }

    }