@charset "utf-8";
/*
 /$$$$$$$   /$$$$$$   /$$$$$$  /$$$$$$  /$$$$$$        /$$$$$$$   /$$$$$$   /$$$$$$  /$$$$$$$$        /$$$$$$  /$$$$$$$$ /$$$$$$$$ /$$   /$$ /$$$$$$$ 
| $$__  $$ /$$__  $$ /$$__  $$|_  $$_/ /$$__  $$      | $$__  $$ /$$__  $$ /$$__  $$| $$_____/       /$$__  $$| $$_____/|__  $$__/| $$  | $$| $$__  $$
| $$  \ $$| $$  \ $$| $$  \__/  | $$  | $$  \__/      | $$  \ $$| $$  \ $$| $$  \__/| $$            | $$  \__/| $$         | $$   | $$  | $$| $$  \ $$
| $$$$$$$ | $$$$$$$$|  $$$$$$   | $$  | $$            | $$$$$$$/| $$$$$$$$| $$ /$$$$| $$$$$         |  $$$$$$ | $$$$$      | $$   | $$  | $$| $$$$$$$/
| $$__  $$| $$__  $$ \____  $$  | $$  | $$            | $$____/ | $$__  $$| $$|_  $$| $$__/          \____  $$| $$__/      | $$   | $$  | $$| $$____/ 
| $$  \ $$| $$  | $$ /$$  \ $$  | $$  | $$    $$      | $$      | $$  | $$| $$  \ $$| $$             /$$  \ $$| $$         | $$   | $$  | $$| $$      
| $$$$$$$/| $$  | $$|  $$$$$$/ /$$$$$$|  $$$$$$/      | $$      | $$  | $$|  $$$$$$/| $$$$$$$$      |  $$$$$$/| $$$$$$$$   | $$   |  $$$$$$/| $$      
|_______/ |__/  |__/ \______/ |______/ \______/       |__/      |__/  |__/ \______/ |________/       \______/ |________/   |__/    \______/ |__/      
*/

li {
	list-style-type: none;
}

/* JOB HISTORY LAYOUT ================================================================================================= */
.job-entry {
	display: grid;
	grid-template-columns: 120px 1fr 250px;
	grid-template-rows: auto auto;
	gap: 0 30px;
	margin-bottom: 28px;
	padding-bottom: 64px;
	border-bottom: 1px solid #ddd;
	position: relative;
	align-items: baseline;
}


.job-date {
	font-size: 16px;
	color: #666;
	line-height: 1.4;
	position: relative;
	grid-row: 1 / -1;
	align-self: start;
}


.job-content {
	position: relative;
	display: contents;
}


.job-title {
	font-size: 19px;
	font-weight: bold;
	font-family: "Satoshi", sans-serif;
	color: #000;
	margin: 0;
	padding: 0;
	line-height: 1.2;
	grid-column: 2;
	grid-row: 1;
}

.job-description {
	font-size: 14px;
	color: #666;
	line-height: 2;
	margin: 8px 0 0 0;
	padding: 0;
	grid-column: 2;
	grid-row: 2;
}

.job-company {
	text-align: right;
	display: contents;
}

.company-name {
	font-size: 13px;
	font-family: "Satoshi", sans-serif;
	font-weight: bold;
	color: #000;
	margin: 0;
	padding: 0;
	line-height: 1.2;
	text-transform: uppercase;
	grid-column: 3;
	grid-row: 1;
	text-align: right;
}

.company-location {
	font-size: 14px;
	color: #666;
	line-height: 2;
	margin: 8px 0 0 0;
	padding: 0;
	grid-column: 3;
	grid-row: 2;
	text-align: right;
}

/* MOBILE RESPONSIVE ================================================================================================= */
@media all and (max-width: 768px) {
	.job-entry {
		display: grid;
		grid-template-columns: 80px 1fr 120px;
		grid-template-rows: auto auto;
		gap: 0 15px;
		margin-bottom: 20px;
		padding-bottom: 48px;
		align-items: baseline;
	}
	
	.job-date {
		font-size: 14px;
		grid-row: 1 / -1;
		align-self: start;
	}
	
	.job-content {
		display: contents;
	}
	
	.job-title {
		font-size: 18px;
		font-family: "Satoshi", sans-serif;
		margin: 0;
		padding: 0;
		line-height: 1.2;
		grid-column: 2;
		grid-row: 1;
	}
	
	.job-description {
		font-size: 14px;
		margin: 6px 0 0 0;
		padding: 0;
		grid-column: 2;
		grid-row: 2;
	}
	
	.job-company {
		display: contents;
	}
	
	.company-name {
		font-size: 14px;
		font-family: "Satoshi", sans-serif;
		font-weight: bold;
		margin: 0;
		padding: 0;
		line-height: 1.2;
		grid-column: 3;
		grid-row: 1;
		text-align: right;
	}
	
	.company-location {
		font-size: 12px;
		margin: 6px 0 0 0;
		padding: 0;
		grid-column: 3;
		grid-row: 2;
		text-align: right;
	}
}

/* SMALLEST MOBILE - STACK DATE ABOVE 2-COLUMN CONTENT ================================================================================================= */
@media all and (max-width: 480px) {
	.job-entry {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 0;
		margin-bottom: 16px;
		padding-bottom: 32px;
		align-items: baseline;
	}
	
	.job-date {
		grid-column: 1 / -1;
		margin-bottom: 15px;
		font-size: 14px;
		color: #666;
		grid-row: 1;
	}
	
	.job-content {
		display: contents;
	}
	
	.job-title {
		grid-column: 1;
		grid-row: 2;
		padding-right: 10px;
		box-sizing: border-box;
	}
	
	.job-description {
		grid-column: 1;
		grid-row: 3;
		margin: 4px 0 0 0;
		padding-right: 10px;
		box-sizing: border-box;
	}
	
	.job-company {
		display: contents;
	}
	
	.company-name {
		font-size: 14px;
		font-weight: bold;
		margin: 0;
		padding: 0;
		line-height: 1.2;
		grid-column: 2;
		grid-row: 2;
		padding-left: 10px;
		box-sizing: border-box;
		text-align: right;
	}
	
	.company-location {
		font-size: 12px;
		color: #666;
		margin: 4px 0 0 0;
		padding: 0;
		grid-column: 2;
		grid-row: 3;
		padding-left: 10px;
		box-sizing: border-box;
		text-align: right;
	}
}

/* SOCIAL MEDIA SECTION =============================================================================================== */
.social-media-section {
	display: flex;
	align-items: flex-start;
	margin-top: 0;
	position: relative;
}


.social-spacer {
	flex: 0 0 150px; /* job-date (120px) + margin-right (30px) = 150px */
}


.social-links {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
	padding: 0;
	margin: 0;
	justify-items: start;
}

.social-links > * {
	padding: 0;
	margin: 0;
}

.social-links > *:first-child {
	padding-left: 0;
	margin-left: 0;
}


.social_media {
	text-align: left;
	padding: 0;
	margin: 0;
	display: inline-block;
}

.social_media img {
	width: 60px;
	height: 60px;
	margin-bottom: 10px;
	transition: all 0.3s ease;
}

/* Trigger both image opacity and text underline when hovering over the entire social media container */
.social_media:hover img {
	filter: alpha(opacity=20);
	opacity: 0.2;
}

.social_media:hover .social_media_link {
	background-size: 100% 2px;
}

.social_media_link {
	font-size: 12px;
	color: #000;
	font-family: "Georgia", Serif;
	letter-spacing: 0px;
	font-weight: normal;
	text-decoration: none;
	background-image:
	  linear-gradient(
	      transparent 0px,
	      #DBD332 0px,
	      #DBD332 2px,
	      transparent 2px
	  ),
	  linear-gradient(
	      transparent 0px,
	      #000 0px,
	      #000 2px,
	      transparent 2px
	  );
	background-size: 0% 2px, 100% 2px;
	background-position: 0 bottom, 0 bottom;
	transition: background-size 0.3s ease-in-out;
	background-repeat: no-repeat;
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
}

.social_media_link:hover {
	background-size: 100% 2px;
}

/* MOBILE RESPONSIVE FOR SOCIAL MEDIA =============================================================================== */
@media all and (max-width: 768px) {
	.about_social_padding {
		padding-top: 50px !important; /* Reduced spacing for mobile */
	}
	
	.social-media-section {
		flex-direction: column;
		margin-top: 0 !important;
		padding: 0 20px; /* Add padding to prevent edge touching */
	}
	
	.social-spacer {
		display: none; /* Hide spacer on mobile to use full width */
	}
	
	.social-links {
		flex: none;
		display: flex;
		justify-content: space-between; /* Spread evenly across full width */
		width: 100%;
		padding: 0;
		gap: 0;
	}
	
	.social_media {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1; /* Each icon takes equal space */
		min-width: 0;
		position: relative; /* Enable absolute positioning for text */
	}
	
	.social_media img {
		width: 80px !important; /* Bigger icons for mobile */
		height: 80px !important; /* Bigger icons for mobile */
		margin-bottom: 0 !important; /* No gap between icon and text */
		object-fit: contain;
		flex-shrink: 0;
	}
	
	.social_media_link {
		font-size: 11px;
		text-align: center;
		word-wrap: break-word;
		position: absolute !important; /* Position text absolutely */
		top: 80px !important; /* Position text directly below 80px icon */
		left: 50% !important; /* Center horizontally */
		transform: translateX(-50%) !important; /* Center horizontally */
		line-height: 1 !important; /* Tight line height */
		margin: 0 !important;
		width: auto !important; /* Auto width so underline only covers text */
		white-space: nowrap !important; /* Prevent text wrapping */
	}
}

/* EXTRA SMALL MOBILE RESPONSIVE ================================================================================= */
@media only screen and (max-width: 480px) {
	.about_social_padding {
		padding-top: 35px !important; /* Reduced from 70px to 35px (50% reduction) */
	}
	
	.social-media-section {
		margin-top: 0 !important;
	}
	
	.social-links {
		gap: 5px !important;
		padding: 0 5px !important;
	}
	
	.social_media {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		min-width: 0 !important;
	}
	
	.social_media img {
		width: 100px !important; /* Even bigger icons for smallest mobile */
		height: 100px !important; /* Even bigger icons for smallest mobile */
		margin-bottom: 1px !important; /* Much smaller gap between icon and text */
		object-fit: contain !important;
		flex-shrink: 0 !important;
	}
	
	.social_media_link {
		font-size: 10px !important;
		text-align: center !important;
		word-wrap: break-word !important;
	}
}

/* 36EM BREAKPOINT FOR SOCIAL MEDIA ================================================================================= */
@media all and (max-width: 36em) {
	.about_social_padding {
		padding-top: 40px !important; /* Reduced spacing for 36em */
	}
	
	.social-media-section {
		margin-top: 0 !important;
	}
	
	.social_media img {
		width: 90px !important; /* Bigger icons for 36em */
		height: 90px !important; /* Bigger icons for 36em */
		margin-bottom: 1.5px !important; /* Very small gap between icon and text */
	}
	
	.social_media_link {
		font-size: 10px !important;
	}
}

/* ABOUT PAGE BOTTOM NAVIGATION ===================================================================================== */
/* Override the default hover text for about page navigation */
#nav-prev a:hover:before {
	content: "隨想";
}

#nav-next a:hover:before {
	content: "精選作品";
}
body {
	font-family: "Georgia", Serif;
	font-size: 21px;
	line-height: 35px;
	font-weight: normal;
	background-color: #f4f4f4;
}
h1 {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif !important;
	font-weight: 900 !important;
	font-style: normal !important;
	letter-spacing: 0px;
	position: fixed;
	text-align: left;
	right: -50px;
	top: 100px;
	font-size: 50px;
	color: #05081e;
	opacity: 0.05 !important;
	z-index: -1000;
	/* Debug: Force font loading */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Safari */
	-webkit-transform: rotate(90deg);
	/* Firefox */
	-moz-transform: rotate(90deg);
	/* IE */
	-ms-transform: rotate(90deg);
	/* Opera */
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
h2 {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 23px;
}
.about_top_padding {
	padding-top: 360px;
}
.about_mid_padding {
	padding-top: 100px;
}
.about_padding {
	padding-top: 20px;
}
.about_skills_padding {
	padding-top: 100px;
}
.about_social_padding {
	padding-top: 100px;
}
.date {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
    padding-right: 50px;
}
.skills {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	font-size: 12px;
}
.industry {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	font-size: 12px;
    line-height: 18px;
}
.list_skills {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 22px;
}
.social_media {
	text-align: center;
}
.social_media img:hover {
	filter: alpha(opacity=20);
	opacity: 0.2;
}
.clients {
	font-family: "Georgia", Serif;
	font-size: 14px;
	line-height: 35px;
}
.position {
	font-family: 'Satoshi', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	overflow: visible;
	display: inline-block;
	margin-top: 7px;
}
.container {
	margin-left: 10%;
	margin-right: 10%;
}
/*
 /$$      /$$ /$$$$$$$$ /$$$$$$$  /$$$$$$  /$$$$$$         /$$$$$$  /$$   /$$ /$$$$$$$$ /$$$$$$$  /$$$$$$ /$$$$$$$$  /$$$$$$ 
| $$$    /$$$| $$_____/| $$__  $$|_  $$_/ /$$__  $$       /$$__  $$| $$  | $$| $$_____/| $$__  $$|_  $$_/| $$_____/ /$$__  $$
| $$$$  /$$$$| $$      | $$  \ $$  | $$  | $$  \ $$      | $$  \ $$| $$  | $$| $$      | $$  \ $$  | $$  | $$      | $$  \__/
| $$ $$/$$ $$| $$$$$   | $$  | $$  | $$  | $$$$$$$$      | $$  | $$| $$  | $$| $$$$$   | $$$$$$$/  | $$  | $$$$$   |  $$$$$$ 
| $$  $$$| $$| $$__/   | $$  | $$  | $$  | $$__  $$      | $$  | $$| $$  | $$| $$__/   | $$__  $$  | $$  | $$__/    \____  $$
| $$\  $ | $$| $$      | $$  | $$  | $$  | $$  | $$      | $$/$$ $$| $$  | $$| $$      | $$  \ $$  | $$  | $$       /$$  \ $$
| $$ \/  | $$| $$$$$$$$| $$$$$$$/ /$$$$$$| $$  | $$      |  $$$$$$/|  $$$$$$/| $$$$$$$$| $$  | $$ /$$$$$$| $$$$$$$$|  $$$$$$/
|__/     |__/|________/|_______/ |______/|__/  |__/       \____ $$$ \______/ |________/|__/  |__/|______/|________/ \______/ 
                                                               \__/                                                          
*/

/* MEDIA QUERIES 1920px MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 1920px 
  __    ___    ___     ___  
 /_ |  / _ \  |__ \   / _ \ 
  | | | (_) |    ) | | | | |
  | |  \__, |   / /  | | | |
  | |    / /   / /_  | |_| |
  |_|   /_/   |____|  \___/ 
*/

@media all and (min-width: 1920px) {
	.container {
		max-width: 1200px;
		margin-left: 15%;
		margin-right: 30%;
	}
}
@media all and (max-width: 1920px) {
	.container {
		max-width: 1200px;
		margin-left: 7%;
	}
}
/* MEDIA QUERIES 1366px MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM  MEDIA QUERIES 1366px 
  __   ____      __      __  
 /_ | |___ \    / /     / /  
  | |   __) |  / /_    / /_  
  | |  |__ <  | '_ \  | '_ \ 
  | |  ___) | | (_) | | (_) |
  |_| |____/   \___/   \___/ 
*/

@media all and (max-width: 1366px) {}
/* ++END++ */

/* MEDIA QUERIES 64em MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 64em 
    __    _  _   
   / /   | || |  
  / /_   | || |_ 
 | '_ \  |__   _|
 | (_) |    | |  
  \___/     |_|  
*/

@media all and (max-width: 64em) {
    h1 {
        right: -80px;
        font-size: 45px;
    }	
    .icon_padding_2 {
		padding-left: 50px;
		padding-right: 50px;
	}
	.description_left {
		font-size: 12px;
		padding-right: 0px;
	}
	.category {
		font-size: 12px;
		padding-right: 30px;
	}	
    .date {
		margin-bottom: -20px;
		text-align: left;
    	padding-right: 0px;
	}
}
/* ++END++ */

/* MEDIA QUERIES 48em MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 48em 
  _  _      ___  
 | || |    / _ \ 
 | || |_  | (_) |
 |__   _|  > _ < 
    | |   | (_) |
    |_|    \___/ 
*/

@media all and (max-width: 48em) {
    h1 {
        right: -90px;
    }	
    .social_media img {
		max-width: 60%;
	}
}
/* ++END++ */

/* MEDIA QUERIES 36em MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MEDIA QUERIES 36em 
  ____      __  
 |___ \    / /  
   __) |  / /_  
  |__ <  | '_ \ 
  ___) | | (_) |
 |____/   \___/ 
*/

@media all and (max-width: 36em) {
	.container {
		margin-left: 0px;
		margin: 0 auto;
		max-width: 100%;
		margin: 0 0 0 0;
		padding-right: 30px;
		padding-left: 30px;
	}
	h2 {
		font-size: 16px;
	}
	body {
		font-size: 14px;
		line-height: 30px;
		font-weight: normal;
	}
	.about_top_padding {
		padding-top: 180px;
	}
	.about_mid_padding {
		padding-top: 30px;
	}
	.date {
		margin-bottom: -20px;
	}
	.clients {
		line-height: 25px;
		padding-top: 5px;
	}
	.about_padding {
		padding-top: 0px;
	}
	.about_skills_padding {
		padding-top: 70px;
	}
	.about_social_padding {
		padding-top: 70px;
	}
	.position {
		padding-bottom: 5px;
		background-size: 100% 5px;
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		margin-top: 7px;
	}
}
/* ++END++ */