/*Background Color & Website Font*/
body {
    background-color: #E8E8E4;
    height:100vh;
    margin:0%;
    font-family: 'Inter', sans-serif;
}

/*Sizing for Logo*/
#logo{
    width: 60%;
    min-width: 200px;
    max-width: 300px;
    height: auto;
    display:flex;

}

/*Footer Spacing*/
#footer,#travelTime{
        padding-top: 20px;
    padding-bottom: 20px;
}

/*to make the hr thicker*/
.bolder{
    border: 2px solid #000;
}

/*for about button*/
.about{
    font-size:large;
}

/*To hide data before having it calculated*/
.hidden{
    display:none;
}

/*align elements*/
.left-align {
    margin-left: 20px; 
}

.image-col {
    margin-right: 5px; 
}

/*adjust the images to be roughly the same size*/
.same-size-image {
    width: 10vw;
    min-width:150px;
    max-width: 300px;
    height: auto;
}

/*create the centered items*/
.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

/*bold the title*/
.image-text {
    margin: 1px 0;
    padding: 0px;
    font-weight:bold;
}

/*italicize the role*/
.role{
    font-style:italic;
}

/*Logo Sizing*/
.socialLogo{
    min-width:50px;
    width:4vw;
    height:auto;
    max-width: 200px;
}
/*Spacing for logos especially in mobile*/
.logo-container{
    margin-bottom:15px;
}

/*Kelvin's gif sizing*/
#gif{
    width: 13vw;
    height:14vw;
    min-width:150px;
    max-width:300px;
    min-height:150px;
    max-height:300px;
    
}

/*changes font size for the input fields based on the view width*/
@media screen and (min-width: 768px) {
    .label{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size:1vw;
        
    }
  }

@media screen and (max-width: 767px) {
    .label {
        font-size: 11px;
    }
}