/* By default, "dark" mode */
:root {
  --bs-primary: #fff;
  --bs-secondary: #ccc;
  --bs-tertiary: #eee;
  --bs-primary-rgb: 255, 255, 255;
  --bs-secondary-rgb: 202, 202, 202;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #fff;
  --bs-body-bg: #000;
}

body, #mainNav {
	background: var(--bs-body-bg);
}
a, #mainNav .navbar-nav li.nav-item a.nav-link {
	color: var(--bs-secondary);
	text-decoration: none;
}
a:hover, a.section-active, #mainNav .navbar-nav li.nav-item a.nav-link.section-active {
	color: var(--bs-tertiary);
}
.footer, .copyright {
	background: var(--bs-body-bg);
}


/* Disappearing sidebar */
.main-wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}
.portfolio-sidebar {
  min-width: 200px;
  max-width: 200px;
  /* transition: all 0.2s; */
  padding: 20px;
}
.portfolio-main {
  width: 100%;
  min-height: 100vh;
  padding: 20px 0;
  /* transition: all 0.2s; */
}
/* Sidebar styling */
.sidebar-nav-list {
	list-style-type: none;
	padding-left: 2px;
}
.sidebar-nav-list li a, .navbar-nav li a {
	text-transform: lowercase;
}




.portfolio .row {
	padding-right: 0;
	margin-right: 0;
}
.portfolio-main .row {
	padding: 0;
	margin-right: 0;
}
.portfolio-main .col {
	padding: 0;
}

#mainNav {
	border-bottom: 1px solid var(--bs-tertiary);
}
.navbar-toggler {
	border: 1px solid var(--bs-primary);
}
.page-section {
	padding: 0.5rem 0;
}



.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 576px) {
  #mainNav .container {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  #mainNav .container {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  #mainNav .container {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  #mainNav .container {
    max-width: 100%;
  }
}
@media (min-width: 1400px) {
  #mainNav .container {
    max-width: 100%;
  }
}

/* Hide the top nav bar unless 992px or narrower */
@media (min-width: 992px) {
  #mainNav {
	display: none;
  }
}

/* On narrow (mobile) view, hide the sidebar (because the top nav bar will become visible) and other things */
@media (max-width: 991px) {
  .portfolio-sidebar, .view-prev-next {
	display: none;
  }
  
  .page-section {
	padding: 6rem 0;
  }
  
  .grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
	.grid-container {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
}




/* Site title / name brand should be serif */
.name-brand {
	font-family: 'Bitter', 'Times New Roman', serif;
  font-weight: normal;
}
.name-brand a {
  color: var(--bs-body-color);
}

.navbar-single-back {
	width: 15%;
}


.portfolio .portfolio-item {
  border-radius: 0;
  aspect-ratio: 4 / 3;
  max-width: 80%;
  background-size: cover;
}
.portfolio-item img {
	object-fit: none;
}

/* Single artwork view */
/* .portfolio-main img {
  max-height: 60%
} */
.single-artwork-container {
  padding: 0 1rem;
}
.single-artwork-container img {
  display: block;
  max-height: 66vh;
}
.view-prev-next {
  max-width: 90%;
  color: var(--bs-secondary);
}