/*

Author: Achmad Nur Widhiyanto
Description: theme for masnuy.web.id
url: http://lp.masnuy.com
Version: 2026

*/
@import url("header.css");
@font-face {
    font-family: EpicRide;
    src: url("../fonts/epicRide.ttf") format("truetype");
}
: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;

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

  /* Background */
  --bg: #fafafa;
  --white: #ffffff;
  --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(--sel-txt); }
/*  --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); text-align: center; margin: 10px 0 0 0; font: italic 14px/21px Georgia, "Times New Roman", Times, serif; }
/* 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; top: 0;left: 0;width: 100%;height: 5px;background: url("../images/bg/color-bar.png") center top;z-index: 100; }
body											{ background: url("../images/body-bg.jpg"); background-color: var(--warm-white); line-height: 1em; font: 14px/130% "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; }
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											{ padding: 15px 0 0.3em; }
p											{ margin: 0 0 10px; }
hr											{ border: none; border-bottom: 1px solid #DDE0E3; height: 1px; margin: 20px 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; }

/* navbar
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#navbar											{ display: none; }

/* css Uyeee! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#wrapper, #main-menu									{ margin: 5% auto; padding: 2% 4%; width: 92%; max-width: 708px; }
#wrapper { padding: 0 4%; margin: 0 auto; background: url("../images/bg/note-bg.jpg") repeat-y center top; }
.section										{ width: 100%; }
#content										{}
.posts											{ width: 70%; float: left;}

.green-highlight {
  background: linear-gradient(to top, rgba(197, 225, 165, 0.9) 70%, rgba(197, 225, 165, 0.9) 45%, transparent 45%);
  display: inline;
  /* box-shadow: 0 0 6px rgba(197, 225, 165, 0.8); */
  border-radius: 2px;
}
.yellow-highlight {
  background: linear-gradient(
    to top,
    rgba(255, 235, 130, 0.9) 30%,
    rgba(255, 235, 130, 0.9) 45%,
    transparent 35%
  );
  display: inline;
  /* box-shadow: 0 0 6px rgba(255, 235, 130, 0.7); */
  border-radius: 2px;
}
.outlined { position: relative; }
.outlined svg { position: absolute; width: 100%; left: 0; }
/* menu
-----------------------------*/
#main-menu										{ margin: 0 auto; }
#wmain-menu										{ padding: 0; width: 100%; }

#navigation										{ float: right; font-family: 'Hind', sans-serif; }
#navigation li										{ float: left; line-height: 60px; margin-right:; }
#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.2; 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; }


/* Header
--------------------------------------------------------------------------------------------------------------------*/
#header											{ border-top: 1px solid #EEE; padding: 5%; font-family: 'Libre Baskerville'; }
#header p										{
    font-family: hw1;
    font-size: xx-large;
    line-height: 1em;
}
.big-quote {
	font-size: 4em;
	line-height: 60px;
	margin: 0;
	padding: 0 0 5% 0;
	float: none;
	font-family: 'Montserrat', sans-serif;
}

/* whoami
--------------------------------------------------------------------------------------------------------------------*/
#whoami { color: var(--white); padding: 0; }
#whoami p {
    line-height: 1.1em;
    margin: 0 0 30px 0;
    font-family: 'hw1';
    font-size: x-large;
}
/* #whoami .left { background-color: #ff7873; } */
#whoami .left .inner-col {
	float: right; width: 50%;
	text-align: left;       /* Optional: aligns the actual text lines to the right */
	max-width: 40%;        /* Optional: prevents text from stretching too wide */
	padding: 5%;
}
#whoami .left .inner-col { position: relative; }
#whoami .right {
    position: relative;
    margin-right: -6%;
    /* width: 125%; */
    padding: 5%;
    flex: 0 0 46%;
    background: url(../images/green-about-me-bg.png) repeat-y top left;
    color: var(--sel-txt);
    float: right;
}
#whoami .right h3 {
	padding: 0; margin: 0 0 30px 0;
}
#whoami .right p {
    font-family: "hw1", serif;
    font-size: x-large;
    color: var(--sel-txt);
}
.about-me-pics {
	position: absolute;
	left: -76%;
	border: 6px solid white;
	border-radius: 5px;
	width: 70%;
	bottom: 22%;
	transform: rotate(-5deg);
	box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.1);
}
.about-me-pics:hover {
	animation: spin 1s linear;
	transform: rotate(0deg);
}
@keyframes spin {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.aboutme {
	float: left;
	width: 125%;
	flex: 0 0 75% !important;
	min-height: 486px;
	margin-left: -25%;
	background: url("../images/about-me-bg.png") no-repeat bottom right;	
	display: flex;           /* Enables flexbox */
	flex-direction: column;  /* Stack items vertically */
	justify-content: flex-end; /* Pushes content to the bottom */
	align-items: flex-end;   /* Pushes content to the right */
}
.aboutme h1				{ margin: 0 0 15% 0; }
.aboutme h1, .aboutme a			{ color: var(--white); }
/* .aboutme a:hover			{ color: var(--red); } */

/* homelab
--------------------------------------------------------------------------------------------------------------------*/
#homelab				{ min-height: 179px; background: url("../images/1762373375676.jfif") no-repeat center center;
background-size: cover; }
#homelab .inner-col {
	display: flex;
	justify-content: center; /* horizontal center */
	align-items: center;     /* vertical center */
	min-height: 179px;           /* or whatever height you need */
	background-color: rgba(0, 0, 0, 0.1);
}
#homelab .inner-col h2 { color: var(--white);     font-family: 'Montserrat', sans-serif;
    font-size: 3em; opacity: .9; }

/* 
-----------------------------*/
#whatamidoing				{ min-height: 135px; }
#whatamidoing {
    background: url("../images/topo.png") repeat;
}

/* learning
--------------------------------------------------------------------------------------------------------------------*/
#learning {
	/* background: url(./images/learning-bg.jpg) no-repeat center top; */
}

#learning .left {
	float: left;
	width: 125%;
	flex: 0 0 75% !important;
	min-height: 486px;
	margin-left: -25%;
	/* background: url("../images/left-note-bg.png") no-repeat top right;	 */
	display: flex;           /* Enables flexbox */
	flex-direction: column;  /* Stack items vertically */
	justify-content: flex-start; /* Pushes content to the bottom */
	align-items: flex-end;   /* Pushes content to the right */
}
#learning .inner-col h2 {
	color: var(--sel-txt);
	font-family: 'hw1', Montserrat, sans-serif;
	font-size: 3em;
	opacity: .9;
	margin: 0 0 25px 0;
}
#learning .inner-col h3 {
	color: var(--sel-txt);
	font-family: 'hw1', Montserrat, sans-serif;
	font-size: 2em;
	opacity: .9;
	margin: 29px 0 0 0;
}
#learning .left .inner-col { width: 60%; margin: 73px 0 0 0; }
#learning .left .inner-col ul { margin: 10px 0 0 0; }
#learning .left .inner-col ul li {
    /* width: 60%; */
    margin: 0 0 4px 0;
    line-height: 1.7em;
}
.homelabs-pics {
	margin: 40px 0 0 77px;
	opacity: 0.8;
	filter: grayscale(100%);
	/* width: 400px; */
	height: 200px;
	object-fit: cover;
	object-position: 5% 50%;
	/* border-radius: 130px; */
	border: 4px solid white;
	box-shadow: 1px 2px 13px rgba(0, 0, 0, 0.1);
	transform: rotate(-1deg);
}
.learning-quote {
	border: none;
	margin: 0;
	padding: 3em 0;
	color: var(--gray-100);
}
/* unordered-section
--------------------------------------------------------------------------------------------------------------------*/
#unordered-section .left {
    width: 125%;
    flex: 0 0 75% !important;
    margin-left: -25%;
}
#unordered-section .left .block {
	float: right;
	width: 67%;
}
#unordered-section .right {
	float: right;
	flex: 0 0 75% !important;
	min-height: 486px;
	margin-right: -25%;
	display: flex;           /* Enables flexbox */
	flex-direction: column;  /* Stack items vertically */
	justify-content: flex-start; /* Pushes content to the bottom */
	align-items: flex-start;   /* Pushes content to the right */
	transform: rotate(-0.1deg);
}
#unordered-section .right .inner-col {
	width: 60%; margin: 96px 0 0 20px; transform: rotate(-0.1deg);
}
#unordered-section .inner-col h2 {
    color: var(--sel-txt);
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    opacity: .9;
}
#unordered-section .right .inner-col ul {
    margin: 30px 0 0 0;
}
#unordered-section .right .inner-col ul { margin: 30px 0 0 0; }
#unordered-section .right .inner-col ul li {
    /* width: 60%; */
    margin: 0 0 4px 0;
    line-height: 1.7em;
}
.right .photo .inner-col {
	margin: 0 !important;
}
.photo .inner-col img {
    border: 10px solid white;
    box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.1);
    transform: rotate(0.5deg);
}
.yellow-note {
	float: left;
	min-height: 486px;
	background: url("../images/right-yellow-note-bg.png") no-repeat top left;	
	display: flex;           /* Enables flexbox */
	flex-direction: column;  /* Stack items vertically */
	justify-content: flex-start; /* Pushes content to the bottom */
	align-items: flex-start;   /* Pushes content to the right */
}
.yellow-note .inner-col { width: 76% !important; }
.green-note {
	float: left;
	min-height: 486px;
	background: #95d3cf;	
	display: flex;           /* Enables flexbox */
	flex-direction: column;  /* Stack items vertically */
	justify-content: flex-start; /* Pushes content to the bottom */
	align-items: flex-start;   /* Pushes content to the right */
	width: 75%;
	color: var(--white);
}
.green-note h2, .green-note ul li { color: var(--white) !important; }

/* small-quote
-----------------------------*/
.traveling .inner-col {
    padding: 10%;
    background: url(../images/travel/20250529_082337.jpg) no-repeat center top;
    background-size: cover;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.traveling .inner-col p {
	text-align: center;
	align-self: center;
	margin-top: auto;
	color: white;
	font-family: 'EpicRide';
	font-size: xx-large;
}
.traveling h2 { text-align: center; color: var(--white) !important; }
.traveling .inner-col .plane {
    position: absolute;
    left: -96px;
    top: 100px;
}
.inner-col img.bali {
	transform: rotate(-0.5deg);
	margin: 0px 0 0 -3px;
}
/* small-quote
-----------------------------*/
#small-quote {
	background: url(../images/topo.png) repeat;
	border-top: 1px solid var(--gray-300);
}
#small-quote .inner-col {
	display: flex;
	justify-content: center; /* horizontal center */
	align-items: center;     /* vertical center */
	min-height: 135px;           /* or whatever height you need */
	background: url("../images/topo.png") repeat;
}
.iquotations:before {
    content: "\22";
}
#small-quote .inner-col h2 {
    color: var(--sel-txt);
    font-family: caveatBold, sans-serif;
    font-size: 2em;
    opacity: .9;
    padding: 5%;
    text-align: center;
    line-height: 1.7em;
    font-size: 3em;
    font-weight: normal;
}

/* 
-----------------------------*/
#otherthings .inner-col {
	display: flex;
	justify-content: center; /* horizontal center */
	align-items: center;     /* vertical center */
	min-height: 135px;           /* or whatever height you need */
	background: url("../images/jobs_topo.png") repeat;
}

#otherthings .inner-col h2 {
  margin: 0;
}
/* footer
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#footer									{ width: 100%; margin: 0 auto; }
#copy p									{ color: var(--cap); text-align: center; margin: 0; padding: 20px 0 32px 0; }