/*

Author: Achmad Nur Widhiyanto
Description: theme for blog.masnuy.com
url: http://blog.masnuy.com
Version: 2025

*/
@import url("fonts.css");
:root {
  /* Base */
  --black: #000000;
  --white: #ffffff;
  --warm-white: #faf8f7;
  --gray-900: #333333;
  --gray-700: #696969;
  --gray-500: #999999;
  --gray-300: #dde0e3;
  --gray-200: #dadbe3;
  --gray-100: #afb0bb;
  --gray-50: #eeeeee;

  /* Accent */
  --bluegray: #4f6367;
  --red: #ff7474;
  --yel-sel: rgba(251, 246, 35, 0.5);
  --cap: #7f8c8d;
  --slash: #cccccc;

  /* Background */
  --bg: #fafafa;
  --bg-menu: rgba(255, 255, 255, 0.9);
  --bg-in: rgba(255, 255, 255, 0.1);
  --bg-grad: hsla(48, 70%, 78%, 0.1);

  /* Selection */
  --sel-txt: #2b2b2b;
  --sel-txt-alt: #000000;
}

/* Text Colors 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* --salt */
::selection										{ color: var(--black); background: var(--yel-sel);  }
::-moz-selection									{ color: var(--black); background: var(--yel-sel);  }
/* --gray-900 */
body,h1, h2, h3, h4, h5, h6,input, textarea, select, .single .post-meta, .post-title a, .post-title a:hover { color: var(--gray-900); }
/* --gray-700 */
span, li, dt, dd, blockquote, #navigation li a 						{ color: var(--gray-700); }
/*  --gray-500 */
input::placeholder, textarea::placeholder						{ color: var(--gray-500); }
/* --bluegray */
a											{ color: var(--bluegray); }
/* --red */
a:hover											{ color: var(--red); }
/* --white */
button, input[type="submit"], input[type="button"]					{ color: var(--white); }
/* --black */
code, pre										{ color: var(--black); }
/* --cap */
small, figcaption									{ color: var(--cap); }
figure {     margin: 0 0 5% 0; }
figure img { margin: 0 0 15px 0; }
figure figcaption { text-align: center;     font-style: italic; }

/* Background Colors
------------------------------------------------------------------------------------*/
/* --white */
html											{ background-color: var(--warm-white); }
input, textarea, select									{ background-color: var(--white); }
/* --bluegray */
button, input[type="submit"], input[type="button"]					{ background-color: var(--bluegray); }
/* --gray-700 */
button:hover										{ background-color: var(--gray-700); }
/* --g300 */
code, pre										{ background-color: var(--g300); }
/* --bgi */
blockquote										{ background-color: var(--bgi); }
/* --ysel */

/* Borders
------------------------------------------------------------------------------------*/
/* --gray-200 */
input, textarea, select, .blogger-comment-from-post					{ border: 1px solid var(--gray-200); }
blockquote										{ border-left: 4px solid var(--gray-200); }
/* --slash */
hr											{ border-color: var(--slash); }
button, input[type="submit"],input[type="button"]					{ border: none; }

/* General
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
*											{ margin: 0; padding: 0; }
body:before										{ content: ""; position: absolute; background: url(../images/color-bar.png) center top; top: 0; left: 0; width: 100%; height: 5px; z-index: 100; }
body											{font: 14px/130% "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;display: flex;flex-direction: column;min-height: 100vh;height: 100%;}
ul											{ list-style: none; }
a											{ text-decoration: none; outline: none; }
a:hover											{ text-decoration: underline; cursor: pointer; }
h1, h2											{ word-wrap: break-word; line-height: normal; /* font-family: Georgia, Times, "Times New Roman", serif; */ }
h3											{ font-size: 1.1rem; padding: 15px 0 0.3em; }
p											{ margin: 0 0 10px; }
hr											{ border: none; border-bottom: 1px solid var(--gray-50); height: 1px; margin: 3em 0; width: 100%; }
blockquote										{ margin: 0 0 21px 0; padding: 5px 0 5px 20px; font: italic 14px/21px Georgia, "Times New Roman", Times, serif; }
img											{ vertical-align: middle; }
h1, h2, h3, h4, h5, h6									{ }
#navigation:before,
#navigation:after,
#wmain-menu:before,
#wmain-menu:after									{ display: table; content: " "; clear: both; }
.hidden											{ display: none; }

/* css Uyeee! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#content, #menu-wrapper, .footerCopy, .single, #page, #h-title, #footer,
#single .photo .post-image, #single .photo .caption					{ margin: 0 auto; }
#content, #menu-wrapper, .footerCopy							{ width: 92%; max-width: 1200px; }
#content										{padding: 2% 4%;margin: 3em auto;flex: 1;}
#menu-wrapper, .footerCopy								{ padding: 3em 4%; }
.posts											{ width: 70%; float: left;}

/* Header
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#navbar											{ display: none; }
/* #side-bg										{ height: 5px; left: 0; top: 0;
	/* background-image: linear-gradient(180deg, hsla(48, 70%, 78%, .1), hsla(48, 70%, 78%, .1)), url("../images/bar.jpg");
	background-position: 0px 0px, -590px 0px;
	background-size:auto, 617px;
	background: url("../images/bar.jpg") center top;
	width: 100%; } */

/* menu
-----------------------------*/
#main-menu										{ background-color: rgba(247, 242, 238, 1); }
#wmain-menu										{ padding: 0; width: 100%; }

#navigation										{ float: left; font-family: 'Hind', sans-serif; }
#navigation li										{ float: left; line-height: 60px; }
#navigation li:after									{ content: "/"; color: #CCC; }
#navigation li:last-child:after								{ content: " "; }
#navigation li a									{ font-weight: 700; padding: 20px; }
#navigation li a:hover									{ text-decoration: none; color: #FF7474; }
.logo											{ font-size: 2em; line-height: 60px; margin: 0 3% 0 0; float: left; font-family: 'Montserrat', sans-serif; }
.logo a											{ color: #333; }
.logo a:hover										{ text-decoration: none; }
.logo span										{opacity: 0.3;font-weight: 200;}
.search-top										{ float: right !important; display: none !important; }
.search-top input									{ width: 90%; padding: 5%; border-radius: 3px; border: none; background: rgba(255,255,255,.1); }
.search-top input:focus									{ border-color: none; outline: none; outline-color: none; outline-style: none; outline-width: none; }

/* content
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* sidebar
-----------------------------*/
#sidebar									{width: 25%;/* padding: 0 0 0 5%; */float: right;z-index: 9999;position: relative;}
#sidebar .section .widget							{ padding: 0 0 35px 0; }
#sidebar .section .widget h2 {
    /* color: #a5a5a5; */
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    margin: 0 0 15px;
    font-size: 2em;
    text-align: center;
}
#sidebar .section .Label {  }
#sidebar .section .Label ul {  }
#sidebar .section .Label ul li { float: left; padding: 0 2% 0 0; }
#sidebar .section .Label ul li span { display: none;}

/* Cloud category */
.cloud-label-widget-content						{  }
.cloud-label-widget-content ul li					{ display: inline-block; }
.cloud-label-widget-content ul li a					{ padding: 0 0 10px 0; }

.category								{ }
.category ul li								{ display: inline-block;}
.category ul li a							{ padding: 0 10px 10px 0; }
.mini-about								{ display: none; background: #fafafa none repeat scroll 0 0; margin: 0 0 10%; padding: 10%; }
.mini-about-img								{ width: 50%; margin: 0 25% 20px; border-radius: 50%; }
.widget_search								{ display: none; }
input									{ width: 90%; padding: 5%; border-radius: 3px; border: 1px solid #dadbe3; }
input:focus								{ border-color: #AFB0BB; }

/* status-msg
---------------------------------------------------------------------------------------*/
.status-msg								{ margin-bottom: 5rem; }
.status-msg h3								{ font-size: 2em; line-height: normal; font-family: 'Libre Baskerville', serif; font-weight: 400; padding: 0; text-align: left; }
.status-msg h3 a							{ font-size: 70%; color: var(--gray-500); text-transform: lowercase; display: block; margin: 0.5em 0 0 0; }

/* posts // post
---------------------------------------------------------------------------------------*/
.posts									{ }
.post									{ margin-bottom: 5rem; }
.post:first-child							{ margin-bottom: 20%; }
.post:first-child .post-title						{ font-size: 300%; line-height: 120%; font-weight: 400; }
#content-box .post:first-child .post-title a:hover			{  }


.post a									{  }
.post-head								{ margin: 0 0 30px 0; position: relative; }

/* date */
.post-date								{ display: none; background: #000000; color: #FFF; position: absolute; text-transform: uppercase; padding: 10px; width: 60px; height: 60px; box-sizing: border-box; border-radius: 999px; text-align: center; font-weight: bold; top: 0; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); }
.post-date span								{ display: block; }
.post-date span.year							{ display: none; }

.post .post-image							{ display: none; margin-bottom: 5%; }
.post-image								{ width: 100%; margin: 0; }
.post-title								{ font-size: 2em; font-family: 'Libre Baskerville', serif; font-weight: 400; padding-bottom: 1rem; text-align: left; }
.post-title a								{ }
.post-title a:hover							{ text-decoration: none; border-bottom: 1px solid #CCC; }
.post-meta								{ margin: 0; text-align: left; }
.post-meta a								{ color: #999; }


.post-img								{ width: 100%; }
.post-content .post-img							{ display: none; }
.post-content								{ margin: 0; }
.post-content h2 {
    margin: 0 0 1em 0;
    font-weight: bold;
    font-family: 'Montserrat';
}
.post-content img							{ margin: 0 0 1em 0; }
.post-content p								{ line-height: 1.75; font-size: 1rem; font-weight: 300; font-family: 'Roboto', sans-serif; font-family: 'Libre Baskerville'; }
.caption								{ padding: 20px; }
.post-footer								{  }
.readmore								{ display: none; }
.readmore a								{ padding: 12px 32px; border-radius: 3px; border: 1px solid #CCC; }
.readmore a:hover							{ text-decoration: none; }


/* Single
----------------------------------------------------------*/
.single									{ width: 100%; padding: 0 ; float: none; }
.single .post-image							{ display: none; width: 100%; }
.single .post-image img							{ width: calc(100% + 26.7%); width: calc(100% + 20%); margin-left: 0; }
.single .post-head							{ margin: 0; }
.single .post-title							{padding: 0 0 5% 0;font-family: 'Poly', serif;font-weight: bold !important;}

/* meta -------------*/
.single .post-meta							{ position: absolute; line-height: 230%; text-align: left; }
.single .post-meta time,
.single .meta-labels a,
.single p a								{ display: block; font-size: 100%; line-height: 170%; }
.single .post-meta .meta-time						{ margin: 0 0 1em 0; }
.single .post-meta .meta-author						{ display: none; }

/* content ----------*/
.single .post-content							{ padding: 0 0 0 25%; }
.single .post-content ul						{ list-style-type: circle; }
.single .post-content ul li						{ margin: 0 0 0 2em; }
.single img								{ width: 100%; }
.single p img								{ max-width: 49%; vertical-align: bottom; }
.single img.big-img							{ width: calc(100% + 66%); margin-left: -33%; margin-right: -33%; }
.single .post-content p {
    margin: 0 0 2em 0;
}
.single .post-content p,
.single .post-content h2,
.single .post-content ul						{ padding: 0 10%; }
.single .post-content h3						{padding: 0.5em 10% 0.5em 10%;}



/* single photo
-------------------------------*/
#single .photo								{  }
#single .photo .post-image						{ max-width: 960px; }
#single .post .post-container .post-image img				{ width: 100% !important; }
#single .photo .caption							{ width: 600px; padding: 30px 0; }
#single .photo .caption p {
    color: #7F8C8D;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 34px;
}

/* Comment
-------------------------------*/
#comments								{ margin: 0 0 0 25%; }
.comment								{  }
.h3-comment								{ text-align: center; }
.h3-comment a								{ color: #000; }
.add-comment								{ display: none; }
#comments-block								{ margin: 0 0 50px 0  !important; }
#comments-block ul li							{ margin: 0 0 25px 0; padding: 0 0 0 60px; position: relative; }
#comments-block ul li img						{ width: auto; }
.comment-author em							{ display: none; }
#comments-block .avatar-image-container					{ position: absolute; left: 0; border-radius: 999px; }
.comment-timestamp							{ font-size: 70%; }
.comment-timestamp a							{ color: #999; }
.comment-body								{ line-height: 1.7; margin-top: 5px; }
h3#respond								{ text-align: center; margin: 0 0 10px 0; }
.comment-guide								{ display: none; }
.blogger-comment-from-post						{ min-height: 300px; }

/* single2
-------------------------------*/
#single2								{  }
#single2 .post								{ width: 50%; }
.s2comment-container							{ height: 500px; }

/* page
-------------------------------*/
#page									{ width: 100%; }

.about-p								{  }
#awesome_video								{ position: absolute; top: 60px; left: 0; width: 100%; }

#h-title								{ padding: 100px 0 0 0; }
#h-title a								{ color: #FFF; }
#h-title h1								{ font-size: 500%; }
#h-title h1 a								{ background: #262626; padding: 5px; }
#h-title h1 a:hover							{ text-decoration: none; }
#h-title p								{ margin: 10px 0 0 0; font-size: 16px; line-height: 24px; }
#h-title p span								{ background: #262626; padding: 1px 5px; }

/* footer
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#footer									{ background-color: rgba(247, 242, 238, 1); width: 100%; }
.footerCopy								{ padding: 1em 4%; }
.footerCopy p								{ margin: 0;color: var(--gray-500); }