/*
Theme Name: RamStudiosComics
Template: twentyfourteen
Theme URI: https://wordpress.org/themes/twentyfourteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: RamStudiosComics
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: RamStudiosComics

https://www.proko.com/
https://howtodrawcomics.com
*/

:root {
  --width-max: 1260px;
  --width-percent: 80%;
  --width-handheld: 90%;
  --width-mobile: 96%;
  --form-width-max: 800px;
  
  --background-color: #202124;
  --background-contrast: #efefef;
  --menu-contrast: #41a62a;
}

body { background-color: var(--background-color); }
.site { max-width: 100%; background-color: var(--background-contrast); }
.site:before { background-color: transparent; }
.site-header { margin: auto; }
.site-footer { background-color: var(--background-color); }
.masthead-fixed .site-header { left: 50%; transform: translate(-50%); }
#site-header { background-color: var(--background-color); }
#site-header a { display: block; max-width: var(--width-max); margin: auto; }
#main { max-width: var(--width-max); margin: auto; background-color: #fff; }
#primary {  }
#content {  }
.site-content { margin: 0; }
.content-area { padding-top: 0; }
body.page-template-ram-studios-home .site-content .entry-content,
body.page-template-ram-studios-home .site-content .entry-header,
body.page-template-ram-studios-default .site-content .entry-content,
body.page-template-ram-studios-default .site-content .entry-header { clear: both; max-width: 100%; padding: 1% 4%; }
body.page-template-ram-studios-default .post-thumbnail { background-image: none; background-color: #fff; margin-top: 8%; }

.hentry { margin: 0; }
.primary-navigation { float: none; text-align: center; }
#search-container { background-color: var(--menu-contrast); }

/**** SINGLE POSTS ****/
body.single-post .post-thumbnail { background-image: none; background-color: #fff; margin-top: 8%; }
body.single-post .post-thumbnail img { border: ridge 2px var(--background-color); }
body.single-post .content-area { width: 75% !important; }
body.single-post .entry-content { max-width: 100%; }
.full-width .site-content .has-post-thumbnail .entry-header { margin-top: 4% !important; text-align: center; }

body.page-template-ram-studios-blog .site-content .entry-header { clear: both; max-width: 100%; padding: 1% 4%; text-align: center; }
body.page-template-ram-studios-blog .site-content .entry-content { clear: both; width: 80%; max-width: 80% !important; padding: 1% 4%; float: right; }
body.page-template-ram-studios-blog .grid-items img { display: none; } 
body.page-template-ram-studios-blog .main-content { width: 75%; }
#secondary { width: 20%; float: left; background-color: var(--background-color); margin: 0; }

/**** GUMROAD / IFRAME PAGES ****/
body.page-gumroad .entry-header { display: none; }
body.page-gumroad .site-content .entry-content { padding: 0; }
body.page-gumroad iframe { width: 100%; height: 3500px; scrollbar-color: red yellow; }

/**** HOME PAGE ****/
body.home h1.entry-title { display: none; }
body.home .featured_post_text { width: 55%; height: auto; float: left; }
body.home .featured_post_image { width: 42%; height: auto; float: right; text-align: right; }
body.home .featured_post_image img { width: 98%; border: ridge 2px var(--background-color); }
body.home .home_section_2 { background-color: #ccc; }
body.home .home_section_2 .content { width: 33%; float: left; }
body.home .home_section_2 .content img { border: ridge 1px var(--background-color); width: 96%; height: auto; }
body.home .home_section_3 .content { width: 33%; float: left; }
body.home .home_section_3 .content img {  }

.inner_wrapper { width: 96%; margin: 2% auto 0 auto; }
.clear { clear: both; font-size: 0; line-height: 0; }