@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width: 10px;
	background: transparent;
}

::-webkit-scrollbar-track {
	/*
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
	background-color: var(--surface-color-level-1);
	*/
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-clip: content-box;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 0.25rem;

	transition: background-color ease-out 0.2s;
}

::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
	background-color: #ffdb18;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100vh;

	font-family: 'Kanit', sans-serif;

}

body {
	background-color: #111111;
	background-size: cover;
	overflow-x: hidden;
}

h3 {
	font-size: 3rem;
	font-weight: 600;
	line-height: 3rem;
	padding: 0;
	margin: 0;
	margin-bottom: 2rem;

	color: #ffffff;
}

.wrapper {
	position: relative;

	object-fit: cover;
	height: 100%;
	width: 100%;
}

.container {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	padding: 2rem;
}

.navigation-wrapper {
	width: 100%;

	padding: 1rem;
	margin-bottom: 2rem;

	background-color: #000;
	color: #ffffff;

	border-radius: 0.5rem;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

.navigation-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-content: center;
	align-items: center;

	gap: 1rem;
}

.navigation-container .logo {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-content: center;
	align-items: center;

	width: 8rem;

}

.navigation-container .logo img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.navigation-container .links {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-content: center;
	align-items: center;
}

.navigation-container .services {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	align-content: center;
	align-items: center;

	margin-left: auto;
	justify-self: end;
}

ul.navlist {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

ul.navlist li {
	float: left;
}

.navigation-container .services ul.navlist li {
	margin-right: 0.75rem;
}

.navigation-container .services ul.navlist li:last-child {
	margin-right: inherit;
}

ul.navlist li a {
	display: block;
	color: white;
	text-align: center;
	padding: 0.5rem;
	text-decoration: none;
	border-radius: 0.25rem;

	transition: color ease-out 0.2s, background-color ease-out 0.2s;
}

.navigation-container .services ul.navlist li a {
	padding: 0;
	font-size: 1.5rem;
}

ul.navlist li a:hover {
	background-color: #ffdb18;
	color: #000;
}

.navigation-container .services ul.navlist li a:hover {
	background-color: inherit;
	color: inherit;
}

.latest-release-wrapper {
	margin-bottom: 2rem;
}

.latest-release-container {
	display: flex;

	gap: 2rem;
}

.latest-release-cover {
	width: 33%;
	min-height: 256px;
	min-width: 256px;
	max-height: 640px;
	max-width: 640px;
}



.latest-release-cover img {
	display: block;
	border-radius: 1rem;
	height: 100%;
	width: 100%;
	object-fit: cover;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
	transition: box-shadow ease-out 0.1s;
}

.latest-release-cover img:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2), 0px 10px 20px rgba(0,0,0, 0.6);
}

.latest-release-text {

}

.latest-release-header {
	margin-bottom: 2rem;
}

.latest-release-title {
	word-wrap: break-word;
	word-break: break-all;
}

.latest-release-title h1 {
	font-size: calc(7vw + 1rem);
	line-height: calc(6vw + 1rem);
	padding: 0;
	margin: 0;
	margin-top: 1rem !important;

	text-transform: uppercase;

	/*
	color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,

    1px 22px 10px rgba(16,16,16,0.1);
    */

	color: #d4d4d4;
	text-shadow: 
	0 0px 2px #bbb, 
	0 -1px 0px #fff, 
	0 -2px 0px #fff, 
	0 -3px 0px #fff, 
	0px 1px 0px #454545, 
	0px 2px 0px #454545, 
	0px 3px 0px #454545, 
	rgba(0,0,0,0.5) 0 10px 25px;

	word-wrap: break-word;
	word-break: break-word;
}

.latest-release-title-prefix {
	background-color: #000;
	color: #ffffff;
	padding: 0.5rem;

	font-size: 1rem;
	font-weight: 400;
	width: fit-content;

	border-radius: 0.25rem;
}

video {
	position: absolute;
	top: 0;
	left: 0;

	object-fit: cover;
	height: 100%;
	width: 100%;

	filter: blur(0) opacity(33%) grayscale(100%);
	-webkit-filter: blur(0) opacity(33%) grayscale(100%);
	mix-blend-mode: screen;
}

.video-wrapper {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;

	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;


}

video::after, .video-wrapper::after, .bg-image::after {
	content: '';
	position: absolute;
	left: 0px;
	right: 0px;
	height: 25%;
	bottom: 0px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(17,17,17,1) 100%);
	pointer-events: none;


}

.action-wrapper {
	position: relative;
	width: 100%;
	height: 5rem;

	text-align: center;
	display: flex;
	align-items: center;
	justify-content: start;
}

.action-container {
	position: absolute;
	bottom: 0;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	gap: 1rem;
}

.action-button, .action-button a, .action-button a:link, .action-button a:visited {
	display: block;
	width: auto;
	padding: 1rem 2rem;

	background: #00ffb7;
	background-size: 0% 100%;

	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
	text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.75);

	border-radius: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 6px solid rgba(0, 0, 0, 0.25);

	-webkit-box-shadow: 0px 16px 32px -4px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 16px 32px -4px rgba(0,0,0,0.5);
	box-shadow: 0px 16px 32px -4px rgba(0,0,0,0.5);

	transition: all ease-out 0.2s, background-color .5s;
}

.action-button:hover, .action-button a:focus {

	background-color:#ffcc00;
	background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
	background-repeat:no-repeat;
	background-size: 200% 100%; 

	border-bottom: 2px solid rgba(0, 0, 0, 0.25);

	-webkit-box-shadow: 
	0px 4px 16px -4px rgba(0,0,0,0.5),
	5px 0px 20px -4px #00ffb7,
	-5px 0px 20px -4px #00ffb7,
	0px 5px 20px -4px #00ffb7,
	0px -5px 20px -4px #00ffb7,
	0px 0px 64px 0px #00ffb7;
	-moz-box-shadow: 
	0px 4px 16px -4px rgba(0,0,0,0.5),
	5px 0px 20px -4px #00ffb7,
	-5px 0px 20px -4px #00ffb7,
	0px 5px 20px -4px #00ffb7,
	0px -5px 20px -4px #00ffb7,
	0px 0px 64px 0px #00ffb7;
	box-shadow: 
	0px 4px 16px -4px rgba(0,0,0,0.5),
	5px 0px 20px -4px #00ffb7,
	-5px 0px 20px -4px #00ffb7,
	0px 5px 20px -4px #00ffb7,
	0px -5px 20px -4px #00ffb7,
	0px 0px 64px 0px #00ffb7;

	transition: all ease-out 0.2s, background-size 0.75s, background-color 0.5s;
}

.action-button:active {
	background-color:#ff255d;

	text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.4);

	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	border-top: 2px solid rgba(0, 0, 0, 0.25);

	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}

.action-button-spotify {
	font-size: 2rem;
}

.block-wrapper {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

.block-container {
	width: 100%;
	padding: 2rem;

	border-radius: 1rem;
}

.block-header {
	text-align: center;
}

.block-header h3 {
	--shadow-color: rgba(255,255,255,0.15);
	text-shadow:
	-1px -1px 0 var(--shadow-color),
	0   -1px 0 var(--shadow-color),
	1px -1px 0 var(--shadow-color),
	1px  0   0 var(--shadow-color),
	1px  1px 0 var(--shadow-color),
	0    1px 0 var(--shadow-color),
	-1px  1px 0 var(--shadow-color),
	-1px  0   0 var(--shadow-color);

	letter-spacing: 0.4rem;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 2.5rem;
	color: #000;
}

.block-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.block-content ul {
	display: inline-block;

	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 600px;
}

.block-content ul li {
	float: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.block-content ul li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-content: center;
	align-items: center;

	color: white;
	font-weight: 200;
	padding: 1rem 1rem;
	margin: 0;
	text-decoration: none;
	border-radius: 0.25rem;

	transition: color ease-out 0.2s, background-color ease-out 0.2s;
}

.block-content ul li a:hover {
	background-color: #ffdb18;
	color: #000;
}

.releases .block-content ul li a img {
	margin-right: 1rem;
	width: 3.5rem;
	height: auto;
	border-radius: 0.35rem;

	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.4);
}

.footer {
	display: flex;
	flex-wrap: wrap;

	padding: 2rem;
	gap:  1rem;

	font-size: 0.85rem;
	font-weight: 200;
	letter-spacing: 0.075rem;

	color: rgba(255, 255, 255, 0.6);
}

.footer a, .footer a:link, .footer a:visited {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color ease-out 0.2s;
}

.footer a:hover, .footer a:focus {
	color: #ffcc00;
}

.footer>div {
	flex-basis: 100%;
	flex: 1;
}

.footer-social {
	flex: 1;
	display: flex;
	justify-content: end;
	align-items: center;
	align-content: center;
	gap: 1rem;
	font-size: 1.15rem;
}

div[data-tippy-root] {
	-webkit-animation-name: animateopacity;
	-webkit-animation-duration: 0.25s;
	animation-name: animateopacity;
	animation-duration: 0.25s;
}

.tippy-box[data-theme~='translucent'] {
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
}

.tippy-box[data-theme~='translucent'][data-placement^='top'] > .tippy-arrow::before {
	border-top-color: rgba(0, 0, 0, 0.8);
}
.tippy-box[data-theme~='translucent'][data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: rgba(0, 0, 0, 0.8);
}
.tippy-box[data-theme~='translucent'][data-placement^='left'] > .tippy-arrow::before {
	border-left-color: rgba(0, 0, 0, 0.8);
}
.tippy-box[data-theme~='translucent'][data-placement^='right'] > .tippy-arrow::before {
	border-right-color: rgba(0, 0, 0, 0.8);
}

#button-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;

	font-size: 2rem;

	transition: color ease-out 0.2s, background-color ease-out 0.2s;
	cursor: pointer;
}

#button-nav:hover,
#button-nav:focus {
	color: #ffdb18;
}

.modal {
	display: none;
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5);

	animation-name: animateopacity;
	animation-duration: 0.2s;
}

.modal-container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 2.63rem 3rem;

	background-color: #000;
	color: #ffffff;
	font-size: 2.5rem;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
	animation-name: animatemodal;
	animation-duration: 0.4s;
}

.modal-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-content: center;
	align-items: center;

	gap:  1rem;

	color: #ffffff;
	font-size: 2rem;
}

.modal-header .logo {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-content: center;
	align-items: center;

	width: 8rem;

}

.modal-header .logo img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.modal-header .modal-close {
	display: inline-block;
	margin-left: auto;
	justify-self: end;

	transition: color ease-out 0.2s, background-color ease-out 0.2s;
}

.modal-header .modal-close:hover,
.modal-header .modal-close:focus {
	color: #ffdb18;
	text-decoration: none;
	cursor: pointer;
}

.modal-content {
	margin: 0 auto;
	margin-top: 1rem;
	max-width: 500px;

	font-weight: 700;
}

.modal-container ul.navlist {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.modal-container ul.navlist li {
	float: none;
	margin-bottom: 0.5rem;
}

.modal-container .services ul.navlist li {
	margin-right: 0.75rem;
}

.modal-container .services ul.navlist li:last-child {
	margin-right: inherit;
}

.modal-container ul.navlist li a {
	display: block;
	color: white;
	text-align: center;
	padding: 0.5rem;
	text-decoration: none;
	border-radius: 0.25rem;

	transition: color ease-out 0.2s, background-color ease-out 0.2s;
}

.modal-container .services ul.navlist li {
	float: left;
}

.modal-container .services ul.navlist li a {
	padding: 0;
	font-size: 1.5rem;
}

.modal-container ul.navlist li a:hover {
	background-color: #ffdb18;
	color: #000;
}

.modal-container .services ul.navlist li a:hover {
	background-color: inherit;
	color: inherit;
}

.js-tilt-glare {
	border-radius: 1rem !important;
}

.js-tilt-glare>.js-tilt-glare-inner {
	border-radius: 1rem !important;
	background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	width: 200% !important;
	height: 200% !important;

}

#loader {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 4rem;
	height: 4rem;
	margin: -3rem 0 0 -3rem;
	border: 1rem solid #000;
	border-radius: 50%;
	border-top: 1rem solid #ffdb18;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.animate-top {
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.5s;
	animation-name: animatetop;
	animation-duration: 0.5s;
}

@keyframes animatetop { 
	from{ top:-1rem; opacity:0 } 
	to{ top:0; opacity:1 }
}

@keyframes animateopacity { 
	from{ opacity:0 } 
	to{ opacity:1 }
}

@keyframes animatemodal {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
}

.color-spotify {
	color: #1ed760;
}

.color-instagram {
	background: #f09433; 
	background: -moz-linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%); 
	background: -webkit-linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%); 
	background: linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.color-twitter {
	color: #ffffff;
}

.color-youtube {
	color: #ff0000;
}

.color-twitch {
	color: #6438aa;
}

.color-tiktok {
	color: #111111;
	filter: drop-shadow(1px 0px 0px #FD3E3E) drop-shadow(-1px -1px 0px #4DE8F4);
}

.color-apple-music {
	color: #fb4058;
}

.color-deezer {
	background: rgb(247,146,20);
	background: linear-gradient(90deg, rgba(247,146,20,1) 0%, rgba(226,48,101,1) 33%, rgba(37,59,187,1) 72%, rgba(28,169,86,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {

	.latest-release-container {
		display: flex;
		flex-flow: row wrap;
		flex-wrap: wrap;
		justify-content: center;

		background-color: rgba(255, 255, 255, 0.02);
		box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10px);

		padding: 2rem;
		border-radius: 1rem;
	}

	.latest-release-cover {
		width: 100%;
	}

	.latest-release-text {
		width: 100%;
	}

	.latest-release-title-prefix {
		margin: 0 auto;
	}

	.latest-release-title h1 {
		text-align: center;
	}

	.action-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.action-button {
		font-size: 1.25rem;
	}

	.block-container {
		background-color: rgba(255, 255, 255, 0.02);
		box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10px);
	}

	.footer-social {
		justify-content: center;
	}
}

@media (max-width: 390px) {
	.action-button {
		font-size: 1rem;
	}
}

@media (max-width: 360px) {
	.action-button-spotify {
		display: none;
	}
}