@charset "utf-8";
@font-face {
	font-family: 'JMH Cthulhumbus UG';
	src: url("../font/JMH Cthulhumbus UG.ttf") format('truetype');
}

* {
    margin: 0;
    padding: 0;
	/*outline: thin dotted #5A5A5A;*/
}

#index-body {
    background-image: url("../assets/img/mike-giles-5655-unsplash.jpg");
		/* Photo by Mike Giles on Unsplash: https://unsplash.com/photos/IiwYeihxC58 */
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

#about-body {
    background-image: url("../assets/img/mike-giles-5654-unsplash.jpg");
		/* Photo by Mike Giles on Unsplash: https://unsplash.com/photos/-urZReSkkr0 */
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

#container {
    /*margin-left: 20px;
    margin-right: 20px;*/
	background-color: rgba(56,15,11,0.50);
	
}

a:link, 
a:visited {
    color: #FBD9AB;
}
 
a:hover, 
a:active {
    color: #b10000;
	text-shadow: 
		/*0 0 6px #e66003,
		0 0 4px #b10000,
		0 0 2px #380f0b,*/
		2px 2px 1px black,
		-1px 0 black, 
		0 1px black, 
		1px 0 black, 
		0 -1px black;
}

section {
	margin-bottom: 2em;
}

header img, 
footer img {
    width: 64px;
    height: 64px;
    /*border-radius: 96px;*/
}

header {
	position: sticky;
	top: 0px;
	background-color: rgba(56,15,11,0.75);
	z-index: 10;
}

footer {	
	background-color: rgba(56,15,11,0.75);	
}

h1,
h2, 
label {
    font-family: "JMH Cthulhumbus UG", serif;
    color: #FBD9AB;
	text-shadow: 
		0 0 16px #e66003,
		0 0 10px #b10000,
		0 0 4px #380f0b,
		2px 2px 2px black,	
		-2px 0 black, 
		0 2px black, 
		2px 0 black, 
		0 -2px black;	
			
}

p,
li,
label {	
    font-family: 'Hammersmith One', sans-serif;	
	font-size: 1.2em;
    color: #FBD9AB;	
	text-shadow:
		0 0 6px #e66003,
		0 0 4px #b10000,
		0 0 2px #380f0b,		
		2px 2px 1px black,
		-1px 0 black, 
		0 1px black, 
		1px 0 black, 
		0 -1px black;					
}

header li,
footer li {
    font-size: 1.3em;
}	

h1,
h2 {
	text-align: center;
}

@media only screen and (min-width: 1501px) {
	#about-flex-container { 
		display: flex;
	}
	header, 
	main, 
	footer { 
		width: 1500px; 
		margin: 0 auto;
	}
}

@media only screen and (min-width: 1131px) and (max-width: 1500px) {
    #about-flex-container {		
		display: flex;
	}
	header,
	main,
	footer {		
		width: 100%;
	}
}

@media only screen and (min-width: 751px) and (max-width: 1130px) {
	#about-flex-container {		
		display: block;
	}
	header,
	main,
	footer {		
		width: 100%;
	}
	.about-box {
		display: block;
		min-width: 800px;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 837px) {
    #about-flex-container {		
		display: block;
	}
	header,
	main,
	footer {		
		width: 100%;
	}
	.about-box {
		display: block;
		min-width: 100%;
		margin-left: 1em;
		margin-right: 1em;		
	}
}

a {
	text-decoration: none;
	font-weight: bold;
}

header, 
header ul,
footer,
footer ul {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
footer {
	flex-direction: row-reverse;
}


header li,
footer li {
	display: flex;
	margin-left: 1em;
	margin-right: 1em;
}

li {
	list-style: none;
}

header img,
footer img {
	max-height: 96px;
	max-wifth: 96px;
}


	
		


/*--------------------------- Welcome ---------------------------*/



about-flex-container {
	justify-content: space-between;
}

#home-section p {
	width: 650px;
	margin: 0 auto;
}

#about-2 img {
    opacity: 0.60;
    border-radius: 128px;
}
	

@media only screen and (max-width: 707px) {
	#home-section p {
		font-size: 1.2em;
		width: 100%;
		/*margin: 0 auto;*/
	}	
}	

@media only screen and (max-width: 1130px) {
	#about-2 img {
		display: none;
	}
}

.about-box {
	margin: 1.25em;
}

.about-box p {
	padding-left: 1em;
	padding-right: 1em;
}

#about-1 img {
	margin-left: 1em;
	margin-top: 1em;
}




/*--------------------------- Rates Section ---------------------------*/

#rates-section {
	background-color: rgba(56,15,11,0.5);
}

#rates-flex-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.rates-box {
	width: 300px;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
}

.rates-box p,
.rates-box li {	
	margin-bottom: 0.75em;	
}

.rates-box li {	
	margin-left: 2em;	
	font-size: 1.5em;
}

@media only screen and (max-width: 707px) {
	.rates-box {
		width: 100%;
		margin-bottom: 1.5em;
	}
}


/*--------------------------- Contact Section ---------------------------*/


#contact-flex-container {
	display: flex;
	margin-left: 225px;
	margin-right: 225px;
	justify-content: center;
}

#contact-flex-container p, 
#contact-flex-container form {
	margin-left: 2em;
	margin-right: 2em;
}


#contact-section p {
	width: 65%;
}

/*#contact-section form p {
	width: 100%;	
}*/

#contact-section form {
	display: flex;
	flex-direction: column;
	width: 300px;
}

form input,
form textarea {
	margin-bottom: 1em;
}

@media only screen and (max-width: 1362px) {
	#contact-flex-container {
		margin: 0 auto;
		display: block;
	}
	#contact-flex-container p, 
	#contact-flex-container form {
		margin: 0 auto;
		/*width: 100%;*/
	}
	#contact-section p {	
		margin-bottom: 1em;
	}
}


/*--------------------------- author.html page ---------------------------*/


.about-box {
	width: 50%;
}

#about-1 img {
	float: left;
	margin-right: 1em;
}


/*--------------------------- Temporary ---------------------------*/


.w3-modal {
	width: 50%;
	margin: 0 auto;
}

@media only screen and (max-width: 675px) {
	header, 
	header ul,
	footer,
	footer ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}	
	#about-flex-container {		
		display: block;
	}	
	header,
	main,
	footer {		
		width: 100%;
	}	
	.about-box {
		display: block;
		min-width: 100%;
		/*margin: 0 auto;*/
	}
}

@media only screen and (min-width: 402px) and (max-width: 865px) {
	header, 
	footer {
		display: block;
	}
	header h1 {
		margin: 0 auto;
	}
	header nav,
	header h1 {
		margin: 0 auto;
	}
	header h1,
	footer h1 {
		text-align: center;
	}
}

@media only screen and (max-width: 680px) {
	header img,
	footer img {
		display: none;
	}
	header h1,
	footer h1 {
		text-align: center;
	}
}

/*@media only screen and (min-width: 1064px) {
	.medium-text,
	.short-text {
		display: none;
	}
	.full-text {
		display: block;
	}
}*/

/*@media only screen and (min-width: 961px) and (max-width: 1063px) {
	.full-text,
	.short-text {
		display: none;
	}
	.medium-text {
		display: block;
	}
}*/

@media only screen and (min-width: 815px) and (max-width: 961px) {
	/*.full-text,
	.medium-text {
		display: none;
	}
	.short-text {
		display: block;
	}*/
	header img,
	footer img {
		display: none;
	}
}

@media only screen and (max-width: 814px) {
	/*.full-text,
	.medium-text {
		display: none;
	}
	.short-text {
		display: block;
	}*/
	header img,
	footer img {
		display: none;
	}
}

/*.about-box {		
	margin: 0 auto;
}*/

#about-desc {
	padding-top: 1em;
	margin: 0 auto;
	width: 725px;
}

#about-desc p {
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

@media only screen and (max-width: 670px) {
	#about-desc {		
		margin: 0 auto;
		width: 100%;
	}	
}

@media only screen and (min-width: 838px) and (max-width: 1130px) {
	.about-box {
		margin: 0 auto;
	}
}