/*
 * claranguyen.me Music CSS File
 *
 * Description:
 *     Defines the stylesheet used around the music pages on my site. This
 *     includes basically everything, written completely from scratch.
 *
 * Author:
 *     Clara Nguyen (@iDestyKK)
 */

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

@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;
	text-size-adjust: none;

	font-family: ssans-light, kosugimaru;
}

html {
	background-color: #FFF;
}

/* ------------------------------------------------------------------------- */
/* 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;
			border-bottom: 1px solid transparent;
		}
		100% {
			color: #000;
			backdrop-filter: blur(15px) contrast(1.2) saturate(2);
			background-color: rgba(242, 243, 244, 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 Banner                                                       {{{2 */
	/* --------------------------------------------------------------------- */

	.bg-header {
		width: 100%;
		height: 75vh;
		overflow: hidden;
	}

	@media (orientation:portrait) {
		.bg-header {
			height: 45vw;
		}
	}

	.bg-header .bg-img {
		background-image: url("../../img/banner.jpg");
		background-size: cover;
		background-position: center center;
		width: 100%;
		height: inherit;
		position: fixed;
		z-index: -1;
	}

	.bg-header table.top-headers {
		z-index: 2;
		width: 100%;
		height: inherit;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.35);
	}

	.bg-header table.top-headers td {
		color: #FFF;
		font-family: ssans-regular, kosugimaru;
		font-size: 50px;
		font-weight: bold;
		text-shadow: 2px 2px 5px #000;
		vertical-align: center;
	}

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

	.section {
		width: 100%;
		padding: 64px 0px 0px 0px;
		background-color: #EDEEEF;
	}

	.section .section-inner {
		margin: 0px auto;
		padding-bottom: 64px;
		width: 90%;
		max-width: 1280px;
		font-family: ssans-regular, kosugimaru;
	}

	.section-b-border {
		border-bottom: 1px solid rgba(67, 67, 67, 0.25);
	}

	.section-altbg {
		background-color: #FFF;
	}

	.section .section-inner .title {
		width: 100%;
		text-align: center;
		padding-bottom: 32px;
	}

	.section .section-inner .title span.text {
		font-size: 34px;
		border-bottom: 3px solid pink;
		padding: 0px 10px;
		color: #232527;
	}

	.section .section-inner .content {
		font-size: 125%;
		line-height: 26px;
		text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
	}

	/* --------------------------------------------------------------------- */
	/* 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;
	}