/*================GENERAL STUFF=====================*/

:root { 
	--limegreen: #73BA20;
	--juniper: #3e9160;
	--lightjuniper: #68BA89;
	--yellow: #f4dc80;
	--lighterjuniper: #bfdfa2;
	font-size: 1rem;
}

::selection {
  background: #bfdfa2; /*webkit/blink browser*/
}
::-moz-selection {
  background: #bfdfa2; /*gecko browser*/
}

* { 
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scrollbar-color: var(--lightjuniper) transparent;
	overscroll-behavior: none;
}



/*================BODY CONTENT=====================*/

body {
	color: black;
	font-size: 1empx;
	padding: 2em;
	line-height: 1.4;
	font-family: times new roman;
	background: linear-gradient(0deg,rgba(245, 245, 245, 1) 0%, rgba(255, 244, 181, 1) 100%);
	background-attachment: fixed;
}




/*================TYPOGRAPHY, LINKS, STYLIZATION ETC=====================*/


p, h1, h2, h3, h4, ul, ol, blockquote, figure {
	margin: 0.4em 0; 
}

p, ul, ol {
	line-height: 1.5;
}

h1 {
	font-family: garamond;
	font-size: 3.5rem;
	color: var(--juniper);
}

h2 {
	font-family: garamond;
	font-size: 1.8rem;
	color: var(--juniper);
}

h3 {
	font-family: garamond;
	font-size: 1.25rem;
	color: var(--limegreen);
}
 
h4 { 
	font-family: garamond;
	font-size: 1.25rem;
	font-style: italic;
	font-weight: normal;
	color: black;
}

a {
  color: var(--juniper);
  text-decoration: underline;
}

a:hover {
  color: var(--lightjuniper);
  text-decoration: wavy underline;
  background-color: var(--lighterjuniper);
}





nav a {
	font-family: 'Monaco', lucida console;
	margin: 0 0.6em; /*space between links*/
	color: var(--lightjuniper);
	text-decoration: none;
	padding: 0.3em;
}

nav a:hover {
  color: var(--lightjuniper);
  text-decoration: none;
}






blockquote {
    position: relative;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.2;
    border-left: 2px solid yellowgreen;
    padding: 1em 1.5em;
    margin: 1.5em auto;
    max-width: 850px;
}


blockquote::before {
    content: "“";
    font-size: 2rem;
    position: absolute;
    top: -10px;
    left: 10px;
}

blockquote::after {
    content: "”";
    font-size: 2rem;
    position: absolute;
    bottom: -10px;
    right: 10px;
}




















/*================FOOTER====================*/

footer {
	font-size: 1rem;
	text-align: center;
	color: var(--lightjuniper);
	margin-top: 3em;
	
}


/*================DEVIL'S MACHINES=====================*/

@media only screen and (max-width: 600px) {
  
	
	main {
		display: flex;
		flex-direction: column;
	} 
	
	main article {
		width: 100%;
		text-align: center;
	  }

	main aside {
		width: 100%;
		text-align: center;
	  }
	 
	main aside img { 
		max-width: 20%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
}