/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/*
*{	
	outline-color:red;
	outline-width: 1px;
	outline-style:solid;
}
*/

* {
  box-sizing: border-box;
}

body {
	color: black;
	font-family: Verdana;
	margin: 4% 18%;
	padding: 0.5%;
	background: #523939;
	background: linear-gradient(180deg,rgba(82, 57, 57, 1) 0%, rgba(74, 52, 52, 1) 39%, rgba(48, 35, 35, 1) 100%);
	background-attachment: fixed;
	border:10px;
	border-style:solid;
	border-color: rgb(110,59,59);
	border-radius:30px;
	background-size: cover;
	background-repeat: no-repeat; 
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 0px;
}

/*
DESKTOP
*/

.main-text{
	margin-left:15px;
	margin-right:25px;
	line-height: 20px;
}

header {
    background-color: rgba(190, 155, 123, 1);
    text-align: center;
    font-size: 14px;
	margin-bottom:8px;
	padding-bottom:5px;
	border-radius:20px;
	border: 6px solid rgba(30, 0, 0, 0.15);
}


header a:hover{
	text-decoration:none;
}


.menu-button {
	text-align: center;
	outline: rgba(30, 0, 0,0.2) 2px solid;
	background-color:rgba(30, 0, 0, 0.1);
	margin: 2px 3px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	border-radius:10px;
	position:relative;
}
.menu-button p{
	padding: 0 15px;
}

span { 
  position:absolute; 
  display:inline-block;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}  

nav {
	display:flex;
	justify-content: space-evenly;
}

.main-flex {
    display: flex;
}

/* ASIDE */

aside {
	padding:20px;
	flex-basis: 20%;
    background-color: rgba(190, 155, 123, 1);
	text-align: center;
	margin-right:5px;
	margin-bottom:8px;
	border-radius:20px;
	border: 6px solid rgba(30, 0, 0, 0.15);
}

#petrapixel{
	font-size: 0.7em;
}

.divider{
	margin-top:-5px;
	margin-bottom:-10px;
}

/* END OF ASIDE */

main {
	flex-basis: 80%;
    background-color: rgba(190, 155, 123, 1);
	text-align: left;
	margin-bottom:8px;
	margin-left:3px;
	border-radius:20px;
	border: 6px solid rgba(30, 0, 0, 0.15);
}

main p{
	padding-left:10px;
	font-size:14px;
}

footer {
    background-color: rgba(190, 155, 123, 1);
	grid-area: 4 / span 2;
	text-align: center;
	border-radius: 20px;
	border: 6px solid rgba(30, 0, 0, 0.15);
}

.center{
	text-align:center;
}


.menu-button:hover {
	background-color:rgba(30, 0, 0, 0.3);
	color: rgba(200, 68, 66, 1);
	transform: scale(0.95);
	transition-duration: 0.2s;

}

.menu-button:hover a {
	color: rgba(200, 143, 143, 1);
}


#browser-menu {
    display: flex;
} 

#browser-menu a{
	text-decoration: none;
}



.blog-post {
	background-color:rgba(100, 50, 50, 0.1);
	border:3px maroon double;
	border-radius:20px;
	padding: 30px;
	margin: 20px 40px 20px;
}


.post-addendum {
    background-color: rgba(100, 50, 50, 0.1);
    border: 2px maroon dotted;
    border-radius: 50px;
    padding-bottom: 15px;
    margin: 20px 30px;
    text-align: center;
    width: auto;
    font-size: 0.9em;
}


.post-addendum a:hover{
	text-decoration: none;
}


#next{
	margin-left:10px;
	float:left;
}

#previous{
	margin-right:10px;
	float:right;
}


#more-posts{
	position:inline-block;
}

#map {
	width:500px;
	margin: auto;
	display: block;
}

.notfounda {
  height: 80%;
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notfound {
  height: 100%;
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.break {
  flex-basis: 80%;
  height: 0;
}

.image-fill{
	width: 100%;
	height: 100%;
	object-fit: fill;
}


a:link {
  color: rgba(133, 68, 66, 1);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: rgba(133, 68, 66, 1);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: rgba(200, 68, 66, 1);
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

#postlistdiv ul {
  font-size: 0.95em;
  padding: 10px 40px;
  list-style-type: circle;
}
#recentpostlistdiv ul {
  font-size: 1em;
  padding-left: 30px;
  list-style-type: none;
}

#recentpostlistdiv h3{
	color:#763333;
	padding-left:20px;
}

#postTitleH1 {
	font-size: 1.3em;
	color:#5e1f1f;
}

#postTitle {
	font-size: 1.3em;
	color:#5e1f1f;
}


#postDate {
	margin-top: -12px;
	font-size: 0.8em;
	margin-left: 20px;
	color: #5e1f1f;
}

.moreposts {
  margin-top: 0.2em;
  margin-left: 50px;
}


#nextprev {
	text-align: center;
	margin-top: 1.2em;
}

/*DISQUS STYLE*/
#disqus_thread {
	margin-top: 1.6em;
}


/*Guestbook*/

.guestbook-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.guestbook{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 90%;
	height: 100%;
	margin-left:auto;
	margin-right:auto;
	border:none;
}


/*End of Guestbook*/

/*START OF MOBILE HAMBURGER MENU*/

#menu-button {  /* The button itself */ 
	position: absolute;
	top: 2%;
	left: 2%;
	display: none;
	font-size: 3.5em;
	border-radius: 50%;
	border: 5px double rgba(30, 0, 0, 0.3);
	width: 70px;
	height: 70px;
	background-color:rgba(190, 155, 123, 1);
	color:brown;
}


#mobile-menu { /* Menu block that appears when you hover on top of the hamburger menu */ 
	display:none;
	position:absolute;
	top: 3%;
	left: 8%;
	text-decoration:none;
	border: 6px solid rgba(30, 0, 0, 0.15);
	border-radius: 20px;
	background-color:rgba(190, 155, 123, 1);
}

#mobile-menu a{
	color:white;
	text-decoration:none;
	color: rgba(133, 68, 66, 1);
	font-weight: bold;
}

#mobile-menu li{
	margin: 10px 0px;
}


#mobile-menu ul{
	list-style-type: none;
	padding: 10px;
	margin: 0px;
	font-size: 1.5em;
	color:white;
}


#menu-button:hover + #mobile-menu {
	display:block;
}

#mobile-menu:hover{
	display:block;
}

#mobile-menu a:hover {
  color: rgba(200, 68, 66, 1);
  background-color: transparent;
  text-decoration: none;
}


@media screen and (max-width: 1000px) {
	#menu-button {
		display: inline;
	}
	
	#browser-menu{ /* Hiding the normal menu */
		display: none;
	}
}

/*END OF MOBILE HAMBURGER MENU*/

/*
MOBILE
*/

@media screen and (max-width: 820px) {
	
	body {
		color: black;
		font-family: Verdana;
		margin-top: 4%;
		margin-left: 2%;
		margin-right: 2%;
		margin-bottom: 4%;
		background: #523939;
		background: linear-gradient(180deg,rgba(82, 57, 57, 1) 0%, rgba(74, 52, 52, 1) 39%, rgba(48, 35, 35, 1) 100%);
		background-attachment: fixed;
		border:10px;
		border-style:solid;
		border-color: rgb(110,59,59);
		border-radius:15px;
		background-size: cover;
		background-repeat: no-repeat; 
	}
	
	
	.main-text{
		margin-left:15px;
		margin-right:25px;
		line-height: 20px;
	}

	header {
		background-color: rgba(190, 155, 123, 1);
		text-align: center;
		font-size: 14px;
		margin-bottom:10px;
		padding-bottom:5px;
		border-radius:10px;
	}
	
		
	aside {
		background-color: rgba(190, 155, 123, 1);
		text-align: center;
		border-radius:10px;
		margin-right:0px;
	}
	main {
		flex-basis: 100%;
		background-color: rgba(190, 155, 123, 1);
		text-align: left;
		margin-bottom:10px;
		margin-left:0px;
		border-radius:10px;

	}
	
	

	main p{
		padding-left:10px;
		font-size:14px;
		
	}


	.center{
		text-align:center;
	}



	footer {
		background-color: rgba(190, 155, 123, 1);
		text-align: center;
		border-radius:10px;
	}
	

	.menu-button {
		text-align: center;
		outline: rgba(30, 0, 0,0.2) 2px solid;
		background-color:rgba(30, 0, 0, 0.1);
		margin: 2px 3px;
		cursor: pointer;
		text-decoration: none;
		display: inline-block;
		border-radius:10px;
		position:relative;
	}
	
	.menu-button p{
		font-size: 12px;
		padding: 0 5px;
	}

	span { 
		position:absolute; 
		display:inline-block;
		width:100%;
		height:100%;
		top:0;
		left: 0;
		z-index: 1;
	}
	
	.main-flex {
		display: flex;
		flex-direction: column-reverse;
	}
	
	.blog-post {
		margin: 20px;
	}
	
	
}/* END OF MOBILE */