html, body {
	background-color:#990000;
}
.container {
	background-color:#ffffee;
}

/* things in the header 
================================== */
div.logo {
	display:block;
	width:100px; 
	height:100px;
}
div.logo:hover {
 transform: rotate(20deg);
}

.wrapper-red {
	background-color:#990000;
	color:#fff;
}
.wrapper-red a {
	color:#fff;
}
.wrapper-red a:hover {
	color:#222;
}
.wrapper-red .container {
	background:transparent;
}
.navbar {
	margin-bottom:15px;
}
.nav-item a {
	color:#000;
	font-variant:small-caps;
}
.nav-item a:hover {
	color:#990000;
}
.nav-item.active a{
	color:#990000;
	font-weight:bold;
}
.navbar-toggler {
	border:1px solid #000;
}
.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* text stuff 
================================== */
/* general*/
a {
	color:#990000;
}
a:hover {
	color:#222; 
}
.caps {
	font-variant:small-caps;
}
.large {
	font-size:1.3em;
}
.georgia {
	font-family:georgia, 'times new roman', serif;
}
.center {
	text-align:center;
}
.right {
	text-align:right;
}
h1, h2, h3, h4, h5, h6 {
	font-family:georgia, serif;
	text-align:center;
	width:100%;
	display:block;
	margin-top:10px;
}
blockquote {
	border-left:2px solid #990000;
	margin: 20px;
	padding-left:10px;
}
blockquote p:before {
	content:'\201C';
	font-family:georgia, serif;
	font-size:2em;
	line-height:1;
	position:relative;
	top:5px;
}
blockquote p:after {
	content:'\201D';
	font-family:georgia, serif;
	font-size:2em;
	line-height:.6;
	position:relative;
	top:5px;
}
p {
	margin:.5rem 0;
}

/* specific */
.author {
	font-style:italic;
}
.carousel {
	padding-bottom:30px;
}

/* footer
================================== */
#footer {
	border-top:15px solid #990000;
	margin-top:20px;
	padding:30px 0;
	text-align:center;
}

/* the gallery page
================================== */
#gallery {
  
  img {
    height: 40vw;
    object-fit: cover;
    
    @media (min-width: 768px) {
      height: 25vw;
    }
    
    @media (min-width: 992px) {
      height: 18vw;
    }
  }
}// Crop images in lightbox.
.carousel-item {
  
  img {
    height: 60vw;
    object-fit: cover;
    
    @media (min-width: 576px) {
      height: 350px;
    }
  }
}
#gallery .row, .w-100  {
	margin-bottom:30px;
}
.modal-body .carousel-inner {
	max-width:600px;
	max-height:75vh;
}