html, body{
    height: 100%;
    margin: 0;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: antiquewhite;
}

#foreground{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: 0.7s all;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
}

#foreground > h1{
    text-align: center;
}

.invis{
    opacity: 0;
}

.contentPage{
    height: 100%;
}

.contentPage, .subPage{
    display: none;
    height: 100%;
}


.contentPage.active, .subPage.active, #feedSummary.active {
    display: flex;
    flex-direction: column;
}


#mapView, #map, #searchScreen{
    position: absolute;
    height: 100%;
    width: 100%;
}

#mapView{
    display: none;
}

#mapView.active{
    display: block !important;
}

button{
    background-color: var(--col, #ccc);
    height: 3em;
    width: min(100%,15em);
    border-radius: .8em;
    margin: .5em auto;
}

#searchScreen{
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

#searchBar{
    pointer-events: auto;
    height: 1.5em;
    width: min(3em, 5vw);
    height: min(3em, 5vw);
    transition: all 0.3s, margin 400ms;
    margin: 0.5em 2em auto auto;
    border-radius: 5em;
    border: 1px solid black;
    background-image: url('search_icon.png');
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding: 0.5em;
    background-position: center;
}

#searchBar.focused{
    width: 90%;
    height: min(2em, 3vw);
    border-radius: 1em;
    padding-left: 2.5em !important;
    background-position: 0.5em 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#searchScreen:has(#searchBar.focused){
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.25);
    pointer-events: auto !important;
}

#mapDismissButton{
    position: absolute;
}


#searchScreen:has(#searchBar.focused) + #mapDismissButton{
    display: none !important;
}

#searchResults{
    flex-grow: 1;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
}

.searchPlaceResult{
    background-color: antiquewhite;
    padding: 1em;
    border-radius: .5em;
    margin: .3em 0;
}

#searchBar.focused + #mapDismissButton{
    pointer-events: auto !important;
}

#contentArea{
    flex-grow: 9;
}

#navBar{
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.contentButton{
    width: 3em;
    height: 3em;
    background-color: black;
    margin: auto;
    border: none;
}

.contentButton.selected{
    background-color: coral;
}

#feedContent{
    background-color: aqua;
}

.custom-marker {
    background-image: url('your-icon.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.ratingBar{
    display: block;
    width: 100%;
    height: 1em;
    background-image: linear-gradient(to right, #ff7b00, #ffcc00, #00ff51);
}
.ticker {
  /* Use the variable with a fallback of 0 */
  margin-left: var(--progress, 0);
  display: block;
  /* Styling to make it visible */
  height: 100%;
  width: 2%;
  transform: translateX(-0.5em);
}

#feedSummary{
    display: none;
    margin: 0 auto;
    width: 80%;
}

#statsSummary{
    display: flex;
    flex-wrap: wrap;
}

.summaryText{
    font-family: Arial, Helvetica, sans-serif;
    width: 7em;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    border: 2px solid #cccccc65;
    border-radius: 1em;
    padding: .4em .6em;
    margin: .4em auto;
    background-color: #cccccc99;
}

.profileContainer{
    display: flex;
    justify-content: flex-start;
    width: 80%;
    height: 4em;
    background-color: #cccccc99;
    border: 2px solid #cccccc65;
    margin: .3em auto;
}

.profileName{
    font-size: 1.3em;
    text-align: center;
    margin: auto 0;
}

#emojiPicker{
    width: 8rem;
    font-size: 5em;
    padding: .5rem;
}

.profileSetupInput{
    margin: 0.4em auto;
    display: flex;
    flex-direction: row;
    width: 80%;
    justify-content: space-between;
}

#profileName{
    width: 8rem;
    padding: .5rem;
}

label{
    margin: auto 0;
    font-family: Arial, Helvetica, sans-serif;
}

#userSetup input.err{
    background-color: #ff7b00ef;
}