/*

Author: Achmad Nur Widhiyanto
Description: Achmad Nur Widhiyanto - theme
url: http://cv.masnuy.com
Version: 1.1

*/
:root {
  /* Backgrounds */
  --bg-main: #FFF;
  --bg-container: #111;

  /* Text colors */
  --sel-txt: #2b2b2b;
  --text-primary: #2b2b2b;
  --text-secondary: #999;
  --text-muted: #666;
  --text-dim: #777;
  --text-heading: #111;

  /* Accent */
  --accent: #4F6367;
  --highlight: rgba(251, 246, 35, 0.5);

  /* Borders */
  --border: #DDE0E3;
}

/* Reset
-----------------------------------------------------------------------------------------------*/
::selection									{ background: var(--highlight); color:#2b2b2b; }
::-moz-selection								{ background: var(--highlight); color:#000; }
*										{ margin: 0; padding: 0; box-sizing: border-box; }

body:before									{ content: ""; position: fixed; top: 0px; left: 0; width: 100%; height: 5px; z-index: 100; }
body										{background: #faf8f7;overflow-: hidden;line-height: 1em;font: 14px/130% "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;}
body										{ font-family: "Google Sans Code", monospace; }
/* reset */
ul										{ list-style: circle; }
ul, ol										{ margin: 0 0 2em 2em; }
li										{ margin: 0 0 1em 0; }
a										{ color: var(--text-muted); text-decoration: none; outline: none; }
a:hover										{ text-decoration: underline; cursor: pointer; color: var(--text-primary); }
h1, h2										{ word-wrap: break-word; line-height: normal; }
p										{ margin: 0 0 15px; }
hr										{ border: none; border-bottom: 1px solid var(--border); 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 {
  color: var(--text-heading);
}

/*
-----------------------------------------------------------------------------------------------*/
#wrapper {
	max-width: 900px;
	margin: 5% auto;
	color: var(--text-primary);
	padding: 50px;
	background: #FFF;
	border: 1px solid #eee;
}

/* Grid Layout */
.grid {
	grid-template-columns: 25% 1fr; 
	display: grid;
	gap: 40px;
	position: relative;
}
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
}
.inner-col { }

.highlight		{ background: var(--highlight); color:#2b2b2b; }

/* Header */
#header {}
#header .name-title .inner-col .photo { flex: 0 0 10%; }
#header .name-title .inner-col .meta { flex: 1;     padding: 0px 0 0 3%; }
#header .name-title .inner-col .meta h2 { margin: 0 0 1% 0;}

#header section{
	margin: 0 0 10% 0;
}

section.name-title { margin: 0;}
.photo		{ width: 100px; }
.dp		{ border-radius: 100px; }
.label {
	position: absolute;
	left: 0;
}

/* About
------------------------------------------*/
.about h2{ margin: 0 0 2% 0;}
.about p { color: var(--text-primary);}
.about .label {
	font-size: 20px;
	font-weight: 600;
}
.name-title .label {
	font-size: 2em;
	font-weight: 600;
}
.name-title .meta {
    margin: 0;
}

.meta span {
	margin: 0 30px 5px 0;
	font-size: 14px;
	color: var(--text-muted);
	display: block;
}



/* Left column */
.left {
  display: flex;
  flex-direction: column;
  gap: 60px;
  color: var(--text-dim);
  font-size: 14px;
}

/* Right column */
.right section {
	margin-bottom: 15%;
}



/* Job styling */
.job {
  margin-bottom: 60px;
}
.job-detail						{ margin: 2em 0; }

.job h3 {
							font-size: 16px;
							font-weight: 600;
							margin: 0 0 .5em 0;
}

.job h3 span {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
}

.job p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 8px 0;
  line-height: 1.5;
}

.job h4 {
	font-size: 15px;
	margin: 0 0 1em 0;
}

.date {
  font-size: 12px;
  color: var(--text-dim);
}

/* Education two columns */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

h4 {
	font-size: 15px;
}

p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
/* =====================
   Mobile Responsive
   ===================== */

@media (max-width: 600px) {

  /* Wrapper padding */
  #wrapper {
    padding: 20px 16px;
    margin: 0;
    border: none;
    border-radius: 0;
  }

  /* Photo: shrink a bit */
  .photo { width: 64px; }

  /* Meta links: inline instead of stacked block */
  .meta span {
    display: block;
    margin-right: 12px;
    margin-bottom: 4px;
  }

  /* Section spacing */
  #header section { margin: 0 0 8% 0; }

  /* Grid: collapse sidebar into single column */
  .grid {
    grid-template-columns: 1fr;
    gap: 0;
    position: static;          /* removes the positioning context for .label */
  }

  /* Section labels: reflow from absolute to normal flow */
  .label {
    position: static;
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: 12px;
  }

  /* Right column sections: tighter spacing */
  .right section { margin-bottom: 32px; }

  /* Education: single column */
  .two-col {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Job title + role: stack role below company name */
  .job h3 span {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
}
.print-button {
    margin: 0 auto;
    max-width: 900px;
    margin: 5% auto;
    color: var(--text-primary);    
    background: #FFF;
    border: 1px solid #eee;';
    max-width: 900px;
    max-width: 900px;
}
.print-button a {
    display: block; width: 100%; text-align: center; padding: 50px;
}