/* Base Section */

#Locations {
    background-image: url('../Images/lexington.webp');
    background-color: rgb(108, 142, 174);
    flex-direction: column;
    height: auto;
}

/* Textbox Housing */

#Locations > div {
    height: 85%;
    display: flex;
    justify-content: space-evenly;
}

/* Event and Permanent Locations Textbox */

#Locations > div > div {
    width: auto;

    background-color: rgb(0, 0, 0, .3);
    -moz-box-shadow: 0px 0px 10px rgb(0, 0, 0, .3);
    -webkit-box-shadow: 0px 0px 10px rgb(0, 0, 0, .3);
    box-shadow: 0px 0px 10px rgb(0, 0, 0, .3);
}

#facebookTextbox {
    max-width: 100%;
    max-height: 100%;
    min-height: 340px;
    overflow-y: hidden;
}

/* Permanent Location Boxes */

#permanentTextbox {
    flex: 1;
    /*max-width: 900px;*/
    max-width: 500px;
    max-height: 100%;
    min-height: 75px;
}

#noPermanentLoc {
    height: 80%;
    display: flex;
    line-height: 40px;
    align-items: center;
    justify-content: center;
    font-size: var(--font-title-size); color: white;
}

#onePermanentLoc {
    font-size: var(--font-button-size);
    line-height: var(--font-title-textbox-size);
    display: flex;
    justify-content: space-around;
}

/* Day of Week Styling */

.dayOfWeek {
    height: 40px;
    width: 40px;
    font-size: 15px;
    color: grey;
    border: rgb(255, 236, 59) solid;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dayOfWeek + div {
    border-left: 0px;
}

.thisDayOfWeek {
    color: white;
    background-color: rgb(72, 54, 211);
}

/* Mobile Modifications */

@media screen and (max-width: 975px) {
    #Locations > div {
        flex-direction: column;
    }
    #facebookTextbox {
        min-height: auto;
    }
    #permanentTextbox {
        width: 444px !important;
    }
    #noPermanentLoc {
        height: 150px !important;
    }
}

@media screen and (max-width: 750px) {
    #Locations > div > div {
        max-width: 87.5vw !important;
        min-width: 0px !important;
    }
    #onePermanentLoc {
        flex-direction: column;
        color: white;
    }
}