@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=RocknRoll+One&display=swap');

body { 
	font-family: 'Roboto', sans-serif; 
	color:#000; 
	font-size:20px;
	margin:0;
	padding:0;
	background-color:#e9e4e1;
}

a:link, a:visited { color:#ed9b47; text-decoration:none; }
a:hover, a:active, a:focus { color:#3d5241; }

nav a:link, a:visited { font-size:1.5em; font-weight:bold; }

#wrapper { width:80%; max-width:900px; margin:auto; }

header img.cacti { width:100%; }

header { margin-bottom:20px; }

article.photo img { width:100%; margin:20px 0px 20px 0px; }

img.logo { width:20%; position:absolute; right:25%; top:10%; }
header h1 { position:absolute; right:22%; top:16%; }

h1 { font-size:.8em; background-color:#fff; padding:2px 3px 2px 3px; }
h2 { font-family: 'RocknRoll One', sans-serif; font-size:1.5em; margin-bottom:0px; color:#9f5844; }
h3 { 
	font-family: 'RocknRoll One', sans-serif; 
	font-size:1.1em; 
	padding-left:10px; 
	margin-top: 5px; 
	color:#3D5241;
	text-align:center;
}
h4 { font-size:1em; }

article.current img { float:left; width:30%; margin:10px; border:4px solid #fff; }

article.current h3 { border-left:15px solid #3D5241; text-align:left; }

article.previous { border-radius:30px; background-color:#fff; padding:10px; }

aside.spider { float:left; width:30%; padding:12px; border-right:2px solid #e9e4e1; }
aside.water { float:left; width:30%; padding:12px; border-right:2px solid #e9e4e1;}
aside.calatheas { float:left; width:30%; padding:12px; }

article.previous::after { content:''; display:block; clear:both; }

article.author img { width:18%; border-radius:150px; float:left; border:4px solid #fff; margin:20px; }
article.author::after { content:''; display:block; clear:both; }

footer { font-size:.8em; text-align:center; }

footer li { list-style-type:none; display:inline-block; padding:5px; }

footer ul { padding:0px; }

nav { text-align:center; }

nav li { list-style-type:none; display:inline-block; padding:20px; }

nav ul { padding:0px; }

@media screen and (max-width:1000px) {
	img.logo { width:30%; position:absolute; right:15%; top:5%; }
	header h1 { position:absolute; right:10%; top:10%; }
	
	aside.spider { width:95%; padding:15px; border-right:none; border-bottom:2px solid #e9e4e1; }
	aside.water { width:95%; padding:15px; border-right:none; border-bottom:2px solid #e9e4e1; }
	aside.calatheas { width:95%; padding:15px; }
}

@media screen and (max-width:400px) {
	body { font-size:15px;  line-height:140%; }
	
	#wrapper { width:95%; }
	
	header img.cacti { display:none; }
	
	img.logo { width:90%; position:static; margin-top:5px; }
	header h1 { position:static; }
	
	nav a:link, a:visited { font-size:1.3em; }
	nav li { padding:10px; }
	
	h2 { font-size:1.2em; }
	h3 { font-size:1.1em; }
	
	article.previous { border-radius:0px; }
	
	article.current img { display:none; }
	
	article.photo { display:none; }
	
	article.author img { display:none; }
}