// floating navbar's height
$navbarHeight: 75px;
$navbarHoverColor: #e7e7e7;


html {
    // for compatibility with Bootstrap 3, we set the default size to be 14 (b4 makes it 16).
    font-size: 14px;
}

body {
    background-color: white;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;

}

nav#navbar-main {
    background-color: $navbarColor;

    a.nav-link, div.navbar-header > a {
        color: white;
    }

}




footer {
    background-color: #f8f8f8;
    border-top: 1px solid $navbarHoverColor;
    margin-top: 2em;
    padding: 1em;
    text-align: center;
    p {
        margin: 0;
    }

    img {
        height: 25px;
    }
}

//=== NAVBAR
nav {
    padding-top: 5px;
    padding-bottom: 5px;

    // general links
    ul.nav-pills li:first-child {
        padding-top: 2px;
    }

    // login/logout
    ul.auth a:last-child {
        padding-right: 0; /* flush with right margin */
    }

    // override bootstrap color for search button
    .input-group-addon {
        background: inherit;
    }
    $searchColor: rgb(146, 194, 245);
    .search {
        background-color: $searchColor;
        text-align: center;
        border: none;
    }

    .search-button {
        background-color: $searchColor;
    }

    // postorius link
    .postorius {
        padding: 10px 20px;
        margin: 0;
        float: right;
    }

    .user-button {
        background-color: inherit;
        border: none;
    }
}

// hack: forces search box to appear on one line in navbar in larger screens
// hack: we need extra .input-group to force search box to appear on one line in smaller screens
// note: any pixel-based width will allow hack to work
// @media (min-width: 768px) {
//     nav .input-group {
//         width: 200px;
//     }
// }


.circle img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  /* width and height can be anything, as long as they're equal */
}

.circle-small img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  /* width and height can be anything, as long as they're equal */
}
