@font-face {
  font-family: 'Maragsa';
  src: url('../fonts/Maragsa.otf');
  font-weight: normal;
}

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

body > header h1 {
	font-family: 'Maragsa';
	color: black;
	text-shadow: -3px -3px 1px #dd7a57,
					-3px -2px 1px #dd7a57,
					-3px -1px 1px #dd7a57,
					-3px  0px 1px #dd7a57,
					-3px  1px 1px #dd7a57,
					-3px  2px 1px #dd7a57,
					-3px  3px 1px #dd7a57,

					-2px -3px 1px #dd7a57,
					-2px -2px 1px #dd7a57,
					-2px -1px 1px #dd7a57,
					-2px  0px 1px #dd7a57,
					-2px  1px 1px #dd7a57,
					-2px  2px 1px #dd7a57,
					-2px  3px 1px #dd7a57,

					-1px -3px 1px #dd7a57,
					-1px -2px 1px #dd7a57,
					-1px -1px 1px #dd7a57,
					-1px  0px 1px #dd7a57,
					-1px  1px 1px #dd7a57,
					-1px  2px 1px #dd7a57,
					-1px  3px 1px #dd7a57,

					0px -3px 1px #dd7a57,
					0px -2px 1px #dd7a57,
					0px -1px 1px #dd7a57,
					0px  1px 1px #dd7a57,
					0px  2px 1px #dd7a57,
					0px  3px 1px #dd7a57,

					1px -3px 1px #dd7a57,
					1px -2px 1px #dd7a57,
					1px -1px 1px #dd7a57,
					1px  0px 1px #dd7a57,
					1px  1px 1px #dd7a57,
					1px  2px 1px #dd7a57,
					1px  3px 1px #dd7a57,

					2px -3px 1px #dd7a57,
					2px -2px 1px #dd7a57,
					2px -1px 1px #dd7a57,
					2px  0px 1px #dd7a57,
					2px  1px 1px #dd7a57,
					2px  2px 1px #dd7a57,
					2px  3px 1px #dd7a57,

					3px -3px 1px #dd7a57,
					3px -2px 1px #dd7a57,
					3px -1px 1px #dd7a57,
					3px  0px 1px #dd7a57,
					3px  1px 1px #dd7a57,
					3px  2px 1px #dd7a57,
					3px  3px 1px #dd7a57;
	letter-spacing: 90px;
	border-bottom: black 2px solid;
}

@media (min-width: 1200px) { /* xl size */
    body > header h1 {
        letter-spacing: 100px;
    }
}

/* because of line-spacing, the last character E needs to be treated speacially */
h1 span:last-child {
  letter-spacing: 0;
}

.color-text,
blockquote p:before,
blockquote p:after {
	color: #dd7a57;
}

.color-background,
.carousel-subheading {
	background-color: #dd7a57;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small,
blockquote footer {
	color: #9e492a;
}

blockquote {
	border-left-color: #9e492a;
}

hr {
	border-top-color: #9e492a;
}

/*** section background, shadow-container and block (thumbnail styling) starts ***/
section#content {
	/* background-color: #caa495; */
	background-color: #ecece7;
}

.shadow-container {
	/* background-color: #f8e4dc; */
	background-color: #eaebd0;
}

.block {
	border-color: #9e492a;
	box-shadow: 0px 0px 2px #9e492a;
}

.block .card-header {
	background-color: #dd7a57;
}

/*** section background, shadow-container and block (thumbnail styling) ends ***/

/*** navbar and footer bar styling starts ***/
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus,
.navbar-dark .navbar-nav > li.nav-item > a.nav-link,
footer,
footer a:link,
footer a:visited {
	color: #dd7a57;
}

.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li.nav-item > a.nav-link:hover {
	color: black;
	background-color: #dd7a57;
}
/*** navbar and footer bar styling ends ***/

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #495057;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #dd7a57;
}

input {
    accent-color: #9e492a;
}

.btn:focus, .btn.focus {
    box-shadow: 0 0 0 0.2rem #dd7a57;
}