/***** Define Variables *****/
:root{
    --text-color: black;
    --body-color: grey;
    /* nav-bar variables */
    --navbar-color: #778090;
    --navbar-text-color: white;
    --navbar-height: 100px;
    /* banner variables */
    --banner-color: red;
    --banner-text-color: white;
    --banner-height: 100px;
    /* footer variables */
    --footer-color: #708090;
    --footer-text-color: white;
    --footer-height: 30px;
    /* glass container variables */
    --glass-color: rgb(208, 208, 208, 0.3);
    --glass-border: solid rgb(208, 208, 208, 0.5) 1px;
}

/* Set calculations to include padding internally */
*,*::before, *::after {
    box-sizing: border-box;
}

.glass-container {
    border-radius: 10px;
    border: var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--glass-color);
    color: var(--text-color);
}

.centered-flexbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

/***** Set up the main page layout *****/
html, body {
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    background-color: var(--body-color);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#nav-bar {
    width: 100%;
    height: var(--navbar-height);
    background-color: var(--navbar-color);
    color: var(--navbar-text-color);
    border-bottom: 2px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#main-div {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    background-color: #e9e9e9;
}

#bottom-footer {
    display: flex;
    background-color: var(--footer-color);
    color: var(--footer-text-color);
    border-top: 2px solid black;
    width: 100%;
    height: var(--footer-height);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/***** Navbar at the top of the page *****/
#nav-bar-left, #nav-bar-right {
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
}

#nav-bar-logo-container, #nav-bar-title-container {
    height: 100%;
}

#nav-bar-logo-container {
    margin-right: 10px;
}

#nav-bar-logo {
    height: 100%;
}

#nav-bar-title {

}

#logout-link, #login-link {
    padding-right: 10px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

#logout-link:hover {
    color:inherit;
    text-decoration: none;
    cursor: pointer;
}

/***** Media Queries for dynamic sizing *****/
@media(max-width: 762px){
    /* optimize for phones */

}