/*
 * claranguyen.me Main CSS File
 *
 * Description:
 *     Defines the main stylesheet used around my page. This includes basically
 *     everything, written completely from scratch.
 *
 * Author:
 *     Clara Nguyen (@iDestyKK)
 */

/* ------------------------------------------------------------------------- */
/* Custom Fonts                                                         {{{1 */
/* ------------------------------------------------------------------------- */

@font-face {
	font-family: ssans-bold;
	src: url("../font/SourceSansPro-Bold.ttf");
}

@font-face {
	font-family: ssans-regular;
	src: url("../font/SourceSansPro-Regular.ttf");
}

@font-face {
	font-family: ssans-light;
	src: url("../font/SourceSansPro-Light.ttf");
}

@font-face {
	font-family: kosugimaru;
	src: url("../font/KosugiMaru-Regular.ttf");
}

/* ------------------------------------------------------------------------- */
/* Main Page Configurations                                             {{{1 */
/* ------------------------------------------------------------------------- */

html, body {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: ssans-regular, kosugimaru;
	color: #FFF;
	text-size-adjust: none;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background-color: #666;
}

::-webkit-scrollbar-track-piece {
	background-color: #111;
}

/* ------------------------------------------------------------------------- */
/* Div Element Classes                                                  {{{1 */
/* ------------------------------------------------------------------------- */

	/* --------------------------------------------------------------------- */
	/* Top Bar                                                          {{{2 */
	/* --------------------------------------------------------------------- */

	/*
	 * Top Bar when ".top-bar" means it's at the top of the page. When it is
	 * ".hover-bar", it is hovering above the page while the user scrolls down.
	 */

	.top-bar {
		position: absolute;
		top: 0px;
		color: #FFF;
	}

	#top-bar {
		left: 0px;
		z-index: 99999;
		width: 100%;
		height: 28px;
		font-family: ssans-light, kosugimaru;

		text-shadow: 0px 0px 4px rgb(0 0 0 / 50%), 0px 0px 12px #000, 0px 0px 24px #000;
	}

	@keyframes bg-fade-in-light {
		0% {
			color: #FFF;
		}
		100% {
			color: #FFF;
			backdrop-filter: blur(15px) contrast(1.2) saturate(1.5);
			background-color: rgba(0, 0, 0, 0.5);
			box-shadow: 0px 0px 15px rgb(0 0 0 / 25%);
		}
	}

	.hover-bar {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 28px;
		padding-bottom: 28px;
		animation: bg-fade-in-light 0.5s forwards;
	}

	#top-bar .banner-links-inner {
		margin: 0px auto;
		height: 28px;
		padding: 16px 0px 8px 0px;
		width: 90%;
		max-width: 1280px;

		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	}

	#top-bar .banner-links-inner a {
		color: inherit;
		text-decoration: inherit;
	}

	.hover-bar .banner-links-inner {
		border-bottom: 0px solid transparent !important;
	}

	#top-bar .hover-bar {
		position: fixed;
	}

	#top-bar .top-title {
		height: 28px;
		float: left;
		padding: 0px 6px;
		margin: 0px 4px;
		line-height: 28px;
		font-weight: bold;
	}

	#top-bar .banner-link {
		height: 28px;
		float: right;
		padding: 0px 6px;
		margin: 0px 10px;
		line-height: 28px;
		border-radius: 4px;
		font-weight: bold;
	}

	#top-bar .banner-link:hover {
		color: #000;
		text-shadow: 0px 0px 4px transparent;

		backdrop-filter: invert(0.4) contrast(2.5) saturate(2) blur(15px);
		background-color: rgba(16, 16, 16, 0.25);
	}

	#top-bar .banner-links-inner {
		border-bottom: 0px solid transparent;
	}

	/* --------------------------------------------------------------------- */
	/* Background                                                       {{{2 */
	/* --------------------------------------------------------------------- */

	/*
	 * Due to using z-index in the negatives, the background has to be manually
	 * set. We can cheat and use a rectangle that is always covering the page.
	 */

	.bg-tri-bg, .bg-tri-left, .bg-tri-right {
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
	}

	.bg-tri-left, .bg-tri-right {
		background-size: cover;
		background-position: center center;
	}

	.bg-tri-bg {
		background-color: #15151B;
		z-index: -999;
	}

	.bg-tri-left {
		background-image: url('../../img/bg_purple_tri_left.svg');
		z-index: -998;
	}

	.bg-tri-right {
		background-image: url('../../img/bg_purple_tri_right.svg');
		z-index: -997;
	}

	/* --------------------------------------------------------------------- */
	/* Sections                                                         {{{2 */
	/* --------------------------------------------------------------------- */

	a.anchor {
		position: relative;
		top: -15vh;
	}

	.inner-box {
		position: relative;
		margin: 0px auto;
		width: 90%;
		max-width: 960px;
		font-size: 20px;
	}

	.inner-box a {
		color: #008AC6;
		text-decoration: none;
	}

	.top-intro-decoy {
		width: 100vw;
		height: 100vh;
	}

	.top-intro-real {
		width: 90%;
		max-width: 960px;
		position: absolute;
		top: 50vh;
		left: 50vw;
		transform: translate(-50%, -50%);
	}

	.txt-hello {
		font-size: 42px;
	}

	span.hl-letter {
		color: #9999FF;
	}

	.txt-my-name {
		font-size: 84px;
		font-family: ssans-bold, kosugimaru;
	}

	.txt-desc-1 {
		width: 85%;
		font-size: 24px;
		font-family: ssans-regular, kosugimaru;
	}

	.txt-header {
		font-size: 64px;
		font-family: ssans-bold, kosugimaru;
	}

	.header-block {
		position: absolute;
		left: -72px;
		top: 16px;
		width: 50px;
		height: 50px;
		background-color: #9999FF;
	}

	table.am {
		width: 100%;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		border-spacing: 0px;
		border-collapse: separate;
	}

	table.am td {
		vertical-align: top;
		padding: 0px;
	}

	table.am td.text {

	}

	table.am td.between {
		width: 32px;
	}

	table.am td.pic {
		width: 280px;
	}

	.avi-bsq-container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.avi-bsq1, .avi-bsq2, .avi-bsq3 {
		position: absolute;
		width: 264px;
		height: 264px;
	}

	.avi-bsq1 {
		left: 0px;
		top : 0px;
		background-color: rgba(153, 153, 255, 50%);
	}

	.avi-bsq2 {
		left: 8px;
		top : 8px;
		background-color: rgba(153, 153, 255, 100%);
	}

	.avi-bsq3 {
		left: 16px;
		top : 16px;
		background-image: url('../../img/me.jpg');
		background-size: cover;
	}

	.visual-skip {
		width: 100%;
		height: 40vh;
	}

	/* --------------------------------------------------------------------- */
	/* Contact Information                                              {{{2 */
	/* --------------------------------------------------------------------- */

	.contact-wrapper {
		width: 100%;
		text-align: center;
	}

	.contact-container {
		background-color: rgba(64, 64, 64, 0.15);
		width: 180px;
		margin: 8px 6px;
		padding: 8px;
		display: inline-block;
		box-sizing: border-box;
		font-size: 17px;
		font-variant: all-small-caps;
	}

	.contact-container .imgfill {
		width: calc(180px - 16px);
		height: calc(180px - 16px);
		margin: 0 auto;
		box-sizing: border-box;
		padding: 16px;
	}

	.contact-container .imgfill img {
		width: 100%;
		height: 100%;
	}

	/* --------------------------------------------------------------------- */
	/* Recent Projects                                                  {{{2 */
	/* --------------------------------------------------------------------- */

	table.recent-projs {
		width: 100%;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		border-spacing: 0px;
		border-collapse: separate;
		margin-top: 64px;
	}

	table.recent-projs td {
		vertical-align: top;
		padding: 0px;
	}

	table.recent-projs td.screenshot {
		width: 576px;
		height: 324px;
		background-color: #000;
	}

	table.recent-projs td.screenshot img {
		width: 100%;
		height: 100%;
	}

	table.recent-projs td.between {
		width: 32px;
	}

	table.recent-projs td.desc-right {
		text-align: right;
	}

	table.recent-projs td.desc-left,
	table.recent-projs td.desc-right {
		position: relative;
	}

	table.recent-projs td.desc-left  .title a,
	table.recent-projs td.desc-right .title a {
		color: inherit;
	}

	table.recent-projs td.desc-left  .written-in,
	table.recent-projs td.desc-right .written-in {
		position: absolute;
		width: 100%;
		bottom: 0px;
		left: 0px;
	}

	table.recent-projs .title {
		font-size: 28px;
		font-family: ssans-bold, kosugimaru;
	}

	table.recent-projs .sub-date {
		color: #FFF;
		font-variant: all-small-caps;
	}

	table.recent-projs .rect {
		width: 42px;
		height: 4px;
		margin: 10px 0px;
		background-color: #9999FF;
	}

	table.recent-projs td.desc-right .rect {
		margin-left: auto;
	}

	.proj_tag {
		float: left;
		background-color: #9999FF;
		margin: 2px 6px 2px 0px;
		padding: 1px 6px;
		border-radius: 3px;
		font-weight: bold;
		font-size: 90%;
	}

	table.recent-projs td.desc-right .proj_tag {
		float: right;
	}

	span.sub-name {
		font-size: 80%;
		font-variant: all-small-caps;
	}

	table.proj_list {
		width: 100%;
		border-spacing: 0px;
		border-collapse: collapse;
	}

	table.proj_list tr.hl-h:hover {
		background-color: rgba(255, 255, 255, 0.05);
	}

	table.proj_list th, table.proj_list td {
		padding: 8px 6px;
		white-space: nowrap;
	}

	table.proj_list th {
		text-align: left;
		font-variant: all-small-caps;
		border-bottom: 1px solid #FFF;
	}

	table.proj_list td {
		border-top: 1px solid rgba(66, 66, 66, 0.5);
		border-bottom: 1px solid rgba(66, 66, 66, 0.5);
		vertical-align: top;
	}

	table.proj_list td.icon {
		width: 24px;
		height: 24px;
	}

	table.proj_list td.icon img {
		width: 100%;
		height: 100%;
		transform: scale(1.3);
	}

	table.proj_list td.name, table.proj_list td.date, table.proj_list td.cat {
		padding: 10px 6px 6px 6px;
	}

	#cat_list {
		width: 100%;
		text-align: center;
	}

	.cat-button {
		display: inline-block;
		box-sizing: border-box;
		margin: 8px;
		padding: 0px 12px 4px 12px;
		font-variant: all-small-caps;
		border-radius: 3px;
		font-size: 18px;
		user-select: none;
	}

	@keyframes cat-fade-enabled {
		0% {
			background-color: rgba(64, 64, 64, 0.45);
		}
		100% {
			background-color: rgba(153, 153, 255, 0.4);
		}
	}

	@keyframes cat-fade-disabled {
		0% {
			background-color: rgba(153, 153, 255, 0.4);
		}
		100% {
			background-color: rgba(64, 64, 64, 0.45);
		}
	}

	.cat-enabled {
		animation: cat-fade-enabled 0.5s forwards;
	}

	.cat-disabled {
		animation: cat-fade-disabled 0.5s forwards;
	}

	/* --------------------------------------------------------------------- */
	/* Project Detail Window                                            {{{2 */
	/* --------------------------------------------------------------------- */

	body.vs-lock {
		overflow-y: hidden;
	}

	.blur-bg {
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		overflow-y: auto;
		visibility: hidden;

		/* Position over content but under top-bar */
		z-index: 5000;

		/* Blur everything behind and shade */
		background-color: rgba(111, 111, 111, 0.5);
		backdrop-filter: blur(50px);
	}

	.proj-details-body {
		width: 90%;
		max-width: 1024px;
		margin: 96px auto;

		background-color: #0D0D11;
		border-radius: 16px;
		box-shadow: 4px 4px 25px rgba(0, 0, 0, 0.25);

		box-sizing: border-box;
		padding: 48px;
	}

	.proj-details-body table.top {
		font-size: inherit;
		font-color: inherit;
		font-family: inherit;

		border-spacing: 0px;
		border-collapse: separate;
	}

	.proj-details-body table.top td {
		padding: 0px;
		vertical-align: center;
	}

	.proj-details-body table.top td.icon {
		width: 96px;
		height: 96px;
		position: relative;
	}

	.proj-details-body table.top td.icon .icon-inner {
		background-color: rgba(0, 0, 0, 0.5) /* #212125 */;
		width: 96px;
		height: 96px;
	}

	@keyframes ico-zoom-in {
		0% {
			background-color: rgba(0, 0, 0, 0.5);
			border: 0px solid transparent;
			border-radius: 0px;

			width: 96px;
			height: 96px;
			left: 0px;
			top: 0px;
		}
		100% {
			border: 8px solid rgba(0, 0, 0, 0.25);
			border-radius: 6px;
			width: 272px;
			height: 272px;

			left: -88px;
			top: -88px;
		}
	}

	.proj-details-body table.top td.icon:hover .icon-inner {
		background-color: rgba(0, 0, 0, 0.7);
		box-shadow: 0px 0px 3px #000;
		backdrop-filter: blur(15px);

		box-sizing: border-box;

		position: absolute;

		animation: ico-zoom-in 0.25s forwards;
	}

	.proj-details-body table.top td.icon img {
		width: 100%;
		height: 100%;
		transform: scale(1.1);
	}

	.proj-details-body table.top td.gap {
		/* don't judge */
		width: 32px;
	}

	.proj-details-body table.top td.app-info {
		width: calc(100% - 128px);
	}

	.proj-details-body table.top td.app-info .app-name {
		font-size: 38px;
		margin-bottom: 8px;
	}

	.proj-details-body table.top td.app-info .app-cat {
		font-size: 18px;
		margin-bottom: 8px;
	}

	.proj-details-body .category-label {
		font-variant: all-small-caps;
		font-size: 20px;
		color: #666666;
	}

	.proj-details-body .category-body {
		width: 100%;
		font-size: 17px;
		margin: 16px 0px;
		overflow: auto;
	}

	.proj-details-body #app-screenshots {
		overflow-x: auto;
		white-space: nowrap;
		overflow-y: hidden;
	}

	.proj-details-body .category-body a {
		color: #008AC6;
		text-decoration: none;
	}

	.proj-details-body .category-body img.scr-preview {
		height: 200px;
		background-color: #212125;
		margin: 0px 4px 4px 0px;
		padding: 6px;
	}

	/* --------------------------------------------------------------------- */
	/* Footer                                                           {{{2 */
	/* --------------------------------------------------------------------- */

	.footer {
		width: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #252528;
	}

	.footer-bg {
		position: relative;
		width: 100%;
		padding: 20px;
		padding-bottom: 0px;
		background-color: rgba(0, 0, 0, 0.75);
	}

	.footer .footer-inner {
		width: calc(100% - 64px);
		max-width: 1280px;
		margin: auto;
		position: relative;
		box-sizing: border-box;
		padding: 42px 32px;
		overflow: auto;
		font-family: ssans-regular, kosugimaru;
	}

	.footer .footer-inner .section {
		float: left;
		width: unset;
		background-color: transparent;
		padding: 0px 0px 0px 32px;
		font-size: 110%;
	}

	.footer .footer-inner .section a {
		color: #BBB;
		text-decoration: none;
		font-family: ssans-regular, kosugimaru;
	}

	.footer .footer-inner .section .title {
		font-variant: all-small-caps;
		color: rgba(255, 255, 255, 0.5);
		font-size: 125%;
	}

	.copyright-bottom {
		width: 100%;
		text-align: center;
		font-weight: bold;
		padding-bottom: 6px;

		font-family: ssans-light, kosugimaru;
		color: #FFF;
	}