/* CUSTOM FONTS */
/* goudy */
@font-face {
	font-family: 'goudy-bookletter';
	src: url('../assets/fonts/GoudyBookletter1911-Regular.ttf');
	font-weight: 400;
	font-style: normal;
}
/* raleway */
@font-face {
	font-family: 'Raleway';
	src: url('../assets/fonts/Raleway-Regular.ttf');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src: url('../assets/fonts/Raleway-SemiBold.ttf');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src: url('../assets/fonts/Raleway-Bold.ttf');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src: url('../assets/fonts/Raleway-Black.ttf');
	font-weight: 900;
	font-style: normal;
}



body {
	background-color: #f0ead2;
	font-family: "Raleway";
	margin: 0;
	padding: 0;
}

section {
	margin-top: 25px;
}

h1 {
	margin-bottom: 1.5rem;
	font-family: "goudy-bookletter";
	letter-spacing: 1px !important;
	text-transform: uppercase;
}

h2 {
	margin-bottom: 1.5rem;
	font-family: "goudy-bookletter";
	letter-spacing: 1px !important;
}

h5 {
	color: #795548;
	font-weight: 600;
	margin-bottom: 1.25rem;
}

label i {
	color: #f44336;
	font-weight: bolder;
}

.navbar-light {
	box-shadow: 0px 2px 4px rgba(0,0,0,0.25);
}

.nav-link {
	color: #ffffff !important;
	font-weight: 600;
	text-transform: uppercase;
}

.card {
	border: none;
	border-radius: 10px;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.25);
}

.bg-custom {
	background-color: #a1887f;
}

.btn:focus {
	box-shadow: 0px 2px 4px rgba(0,0,0,0.25);
}

.btn-primary {
	background-color: #8d6e63;
	border: none;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.25);
}

.btn-primary:hover {
	background-color: #6d4c41;
}

.btn-primary:active {
	background-color: #6d4c41;
}

.btn-primary:focus {
	background-color: #6d4c41;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.25) !important;
}

form .feedback-invalid {
	color: #c62828;
	font-size: 14px;
	padding-left: 5px;
}

.form-control.bad-value:focus {
	outline: 4px solid #ef9a9a;
	box-shadow: none;
}

input.bad-value {
	color: #c62828;
	outline: 1px solid #f44336;
    border: 1px solid #c62828 !important;
	transition: border-color .15s ease-in-out,outline .15s ease-in-out;
}

.btn-action {
    border: 2px solid #c0a080;
    border-radius: 5px;
    background-color: #795548;
    color: #f4e5c3;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
	letter-spacing: 1px;
    padding: 20px;
    text-decoration: none;
    box-shadow: 2px 2px 0px #a67c52;
    transition: all 0s ease;
}

.btn-action:hover {
    color: #f4e5c3;
    background-color: #6b6a3b;
}

.btn-action:active {
    color: #f4e5c3;
	box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.5);
	transform: translateY(2px) translateX(2px);
}

.btn-action:focus {
    box-shadow: 2px 2px 0px #a67c52;
}

.text-story {
	font-family: "goudy-bookletter";
	letter-spacing: 1.5px;
}

.toast-success {
	background-color: #4caf50;
	color: #fff;
}

.toast-error {
	background-color: #f44336 ;
	color: #fff;
}

input[type="range"] {
	cursor:grab;
}

input[type="range"]:active {
	cursor: grabbing;
}

input[type="range"]:focus {
	box-shadow: none;
	outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    background: #795548;
}

input[type="range"]::-moz-range-thumb {
	background: #795548;
}

input[type="range"]::-moz-range-thumb:active {
	background: #795548;
}

input[type="range"]::-moz-range-thumb:focus {
	box-shadow: none;
}

#storyImageContainer img {
	width: 100%;
}