body::before {
    content: '';
    display: block;
    background-attachment: scroll;
    height: 100vh;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scale(1);
    width: 100vw;
    z-index: 0;
    background-image: linear-gradient(to top, rgba(128,93,42,0.859), rgba(128,93,42,0.859)), url('bg.jpg');
    background-position: 0% 0%, center;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-color: #E6C8AC;
}

body {
    font-family: "Raleway", sans-serif !important;
}

body a {
    color: #a4324b;
}

body a:hover {
    color: #de6c3e;
}

.page {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#navbar-container {
    justify-content: space-between;
}

.navbar-brand {
    white-space: normal !important;
}

.nav-item {
    align-self: flex-end;
}

.page-content {
    background-color: #e8b654;
    border-radius: 24px;
    width: fit-content;
    margin: 0 auto;
}

.gallery-item img {
    display: block;
    max-width: 100%;
}

.lightbox-caption {
    background-color: black;
    margin-top: -100px !important;
}

.page-footer-spacer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#footer-art {
    text-align: center;
    position: relative;
}

#home-tab-pane {
    width: calc(100vw - 6rem);
}

#stickers-tab-pane {
    width: calc(100vw - 6rem);
}

#calendar-tab-pane {
    width: calc(100vw - 6rem);
}

#portfolio-gallery {
    opacity: 0;
    transition: opacity 0.15s linear;
}

#portfolio-gallery.masonry {
    opacity: 1;
}

#about-tab-pane {
    max-width: 1000px;
}

#about-tab-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#about-me-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px 10px;
}

#icon-framed-parent {
    max-width: 300px;
}

#icon-framed {
    width: 100%;
    height: auto;
    display: block;
    border: 3px solid #B48018;
}

#about-text {
    max-width: 450px;
}

#about-link-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 750px;
}

.btn.link-button {
    border: 0;
    background-color: #B48018;
    padding: 0 1.875rem;
    border-radius: 2.5rem;
    display: inline-flex;
    height: 3.75rem;
    width: auto;
    align-items: center;
    font-size: 18px;
}

.btn.link-button:hover {
    background-color: #F0D193;
}

.btn.link-button svg {
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    min-width: 16px;
    width: 1.5rem;
    margin-right: 0.5em;
    fill: rgba(0,0,0,0.29);
}

@media screen and (max-width: 600px) {
    #navbar-container {
        justify-content: center;
    }

    .navbar-brand {
        text-align: center;
    }

    .nav-item {
        align-self: center;
    }
}