body {
   font-family: 'Source Sans Pro', sans-serif;
}

h1, .h1,
h2, .h2,
h3, .h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.bg-dawn-sea {
    background-color: rgb(0, 177, 197);
}

.bg-blaze {
    background-color: rgb(250, 166, 26);
}

.bg-dusk-sea {
    background-color: rgb(0, 113, 144);
}

.bg-noon-sea {
    background-color: rgb(0, 141, 162);
}

.bi-topics {
    vertical-align: -.125em;
    fill: currentColor;
}

.icon-square {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
}

.page-title {
    font-size: 3rem;
    line-height: 5rem;
}

.navbar-brand {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.navbar-nav .nav-link {
    font-size: 1.2rem;
}

.footer {
    border-top: 1px rgb(0, 177, 197) solid;
}

.footer-logo {
    height: 70px;
}

.footer-image {
    height: 70px;
}

.profile-pic {
    margin-left: 10px;
    margin-bottom: 10px;
}

.bg-banner {
    height: 300px;
    background-image: url(/media/img/221221_CampusAfternoon-7.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media (min-width: 1162px) {
    .bg-banner {
        height: 400px;
    }
}

.header-info {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Sponsors */

.sponsor-level {
    padding-top: 1rem;
    border-bottom: 1px solid #ccc;
}

.sponsors .logo {
    padding: 2rem;
    max-width: 300px;
}

.penguin-thanks {
    font-size: 1.2rem;
}

.penguin-logo {
    max-width: 300px;
}

.penguin-emperor {
    max-width: 400px;
}

/* Card deck */
/* Based on styles from Bootstrap, but with different breakpoint */

@media (min-width: 768px) {
    .card-deck-md {
        display: flex;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .card-deck-md .card {
        display: flex;
        flex: 1 0 0%;
        flex-direction: column;
        margin-right: 15px;
        margin-left: 15px;
    }
}

/* Keynote images */
/* Extends base .img and .figure-caption classes from Bootstrap */

.keynote-figure {
    float: right;
    clear: none;
    margin: 2% 0 2% 2%;
    width: 40%;
}
.keynote-img {
    position: relative;
    width: 100%;
    border: 0.5px solid black;
}
.keynote-figure-caption {
    font-size: 1.1 rem;
    font-style: italic;
    padding: 1% 0 0 0;
}

/* Style the Dashboard nav button */

.nav-dashboard {
    display: flex;
    border: 0.5px solid white;
    background-color: rgb(250, 166, 26);
    padding: 2%;
    height: 100%;
    align-items: center;
    width: max-content;
}

.nav-dashboard:hover, .nav-dashboard:active {
    color: white;
}

/* Styles for the Food and Bev page */

.VenueOptionAvailable {
    color: #198754 /* same as the bootstrap success green */
}
.VenueOptionNotAvailable {
    color: #dc3545 /* same as the bootstrap danger red */
}
.venue {
    width: 80%;
    padding: 3% 0% 3% 0;
}
.venue-figure {
    float: right;
    clear: none;
    margin: 2% 0 2% 2%;
    width: 30%;
}
.venue-img {
    position: relative;
    width: 100%;
    border: 0.5px solid black;
}

/* From https://github.com/twbs/icons/issues/1886#issuecomment-2561243934 */
.bi-bluesky::before {
    content: "";
    background-color: currentColor;
    -webkit-mask: url("/media/img/bluesky.svg") no-repeat 50% 50%;
    mask: url("/media/img/bluesky.svg") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    height: 16px;
    width: 16px;
}