/* Theme Name: bright ways
Theme URI: https://sunnydays.blog
Description: a splash of brightness
Version: 1.0
Author: Sunny
Author URI: https://sunnydays.blog
*/
body, html { padding : 0px;margin : 0; } 
body {background: #fff; font: 12pt/190% "Roboto", sans-serif; color: #000; text-align: left;}

/* Structure */
#title {margin: 3% auto 1.75% 2.5%; text-align: left; } 
#search {margin: 0; padding: 3px;} 
#container {width:100%; }
#content {float: left; width:69%; padding: 0.75% 1% 2% 2%;}
.post { background: #fff;padding: 10px; width:auto; margin-bottom: 20px;}
#footer {clear: both;margin:1%;font-size:110%;text-align: center;}
#nav {text-align: left; margin: 2% 0 0.25% 3%; }
a.nav {font: 125% "EB Garamond", serif;color: #A5A5A3; margin-right: 16px;text-decoration: none; border-bottom:none; border-left: 15px solid #f3e669; padding-left: 8px; letter-spacing: 2px; font-weight:100; }
a.nav:hover {color: #c9c9c7;}
#sidebar {float: right;width: 23%; padding: 0.33% 2% 2% 1%; margin-top:-6.66%; } 
.box {padding: 5px 10px;border-bottom: 1px solid #ddd; font-size:90%; line-height:180%; }
h1 {  font-size:200%; font-family: "Roboto", sans-serif; text-align: left; text-transform: lowercase; color: #d15f89; border: 0; margin: 4px 0 10px 0; font-weight: 300; } 
h2 {font: 135%/205% "Roboto", sans-serif; color: #dd8d7e; margin: 0;text-transform: lowercase; border-left: 15px solid #f3e669; padding-left: 8px;} 
h2.user{color: #c9c9c7; background: #fff; padding: 6px; text-transform: none;} 
h3{background: #fff;color: #000;border-bottom: 1px solid #c9c7c7;font-weight: normal;text-align: left;margin: 0;text-indent: 5px;} 
h4 {color: #a9a9a9;margin: 6px 0 2px 0;padding: 2px 4px 2px 4px;} 
h5{background: transparent;color: #A5A5A3;font-size:12pt;font-weight: normal;text-align: left;padding-right:2px;margin: 12px 0 0 0;text-decoration: none;} 
a.title { font-family: "EB Garamond", serif; font-size:500%; color: #000; border-bottom: none; font-weight:600; background: linear-gradient(45deg, #f3e669 0%, #d15f89 75%); color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
text-fill-color: transparent; letter-spacing:-3px;  }
a {color: #d15f89; text-decoration: none; border-bottom: 1px dotted #d15f89; }
a:hover {color: #dd8d7e;text-decoration: none; border-bottom: 1px dotted #dd8d7e; } 
blockquote {margin: 0 auto; width: 70%;border-bottom: 2px solid #000;background-color: #fff;padding: 1.50%;color: #000;}
 input, textarea, select, submit  {font: 12pt/190% "Roboto", sans-serif; margin: 5px 0 auto 0;border: 1px solid #000;color: #333; padding: 11px; background-color: #fff; }
 input:focus, textarea:focus, select:focus{ color: #000;}
ul {margin-bottom: 13px;margin-left: -15px;} li {margin: 3px;} strong, b {color: #8C8C8C; } 
 #s {margin: 0 auto 0 auto;}    
 
 /* Alignment */ 
 .center {text-align: center;} 
 img.center {	display: block;	margin-left: auto;	margin-right: auto;	} 
 img.right {	padding: 4px;	margin: 0 0 2px 7px;	display: inline;	} 
 img.left{	padding: 4px;	margin: 0 7px 2px 0;	display: inline;	} 
 .right, .alignright {	float: right; padding: 12px;	} 
 .left, .alignleft { float: left; padding:12px;	}  
.alignright::after, .alignleft::after { content: "";  clear: both;  display: table; }
 
 /* Wordpress Styles */
 img.blogimg {margin: 0px 5px 5px 5px; border: 3px solid #a9a9a9; }  
 img.avatar  {float: right;margin: 0 5px 0 0;border: 3px solid #fff;-moz-border-radius: 3px;-webkit-border-radius: 3px;}  
 .meta  {color: #444;font-size: 105%;margin: 0;border-bottom: 1px solid #fff; padding: 6px 0 5px 0; border-bottom: 1px solid #ddd;} 
 .feedback  {font-size: 105%;margin: 7px 0 0 0;color: #444; border-top: 1px solid #ddd;padding: 6px 0 0 0;} 
 .commentmetadata {display: block;background: #EEE;padding: 12px;margin-top: 14px;color: #222;} 
 .cmntstats{margin: 0 auto 0;width: 360px; background-color: #EEE;padding: 8px;color: #222;}
 .postmetadata { background: #eee;padding: 10px; -moz-border-radius: 3px;-webkit-border-radius: 3px;}
 .cmntmetadata { width: 87%; margin: 0 auto; padding-top: 10px; border-top: 1px dotted #fff; } 
 .storycontent { overflow:auto;}



@media screen and (max-width: 799px) { 
	#container { display:flex; flex-direction: column; }
	#sidebar, #content { width: 97%; }
	#content { order: 1; margin-top:5px; }
	#sidebar {order: 2; margin-top:15px;}
	#footer { order: 3; }
	a.title { line-height: 95%; }
	.right, .alignright, .left, .alignleft { display:block; float:none; } 
}