@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box; }
/* GLOBAL Start! */
:root{
	--mainWhite: rgb(248, 248, 248);
	--mainGray: #333333;
	--mainRed: #a6192e;
	--mainFont: Calibri, sans-serif;
	--tabFont: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;
	--tabLinkFont: "Futura", sans-serif;
	--fontS10: clamp(0.58rem, calc(0.55rem + 0.13vw), 0.76rem);
	--fontS9: clamp(0.65rem, calc(0.61rem + 0.19vw), 0.91rem);
	--fontS8: clamp(0.90rem, calc(0.68rem + 0.26vw), 1.09rem);
	--fontS7: clamp(1.00rem, calc(0.75rem + 0.35vw), 1.31rem);
	--fontS6: clamp(0.93rem, calc(0.83rem + 0.46vw), 1.57rem);
	--fontS5: clamp(1.04rem, calc(0.92rem + 0.60vw), 1.88rem);
	--fontS4: clamp(1.17rem, calc(1.01rem + 0.78vw), 2.26rem);
	--fontS3: clamp(1.32rem, calc(1.12rem + 1.00vw), 2.71rem);
	--fontS2: clamp(1.48rem, calc(1.23rem + 1.27vw), 3.26rem);
	--fontS1: clamp(1.67rem, calc(1.35rem + 1.60vw), 3.91rem);
	--fontBase: clamp(1.88rem, calc(1.47rem + 2.01vw), 4.69rem);
	--fontB1: clamp(2.11rem, calc(1.61rem + 2.51vw), 5.63rem);
	--fontB2: clamp(2.37rem, calc(1.75rem + 3.13vw), 6.75rem);
	--fontB3: clamp(2.67rem, calc(1.89rem + 3.88vw), 8.10rem);
	--fontB4: clamp(3.00rem, calc(2.04rem + 4.80vw), 9.72rem);
	--fontB5: clamp(3.38rem, calc(2.20rem + 5.92vw), 11.66rem);
	--fontB6: clamp(3.80rem, calc(2.34rem + 7.28vw), 14.00rem);
	--fontB7: clamp(4.28rem, calc(2.49rem + 8.94vw), 16.80rem);
	--fontB8: clamp(4.81rem, calc(2.62rem + 10.96vw), 20.16rem);
	--fontB9: clamp(5.41rem, calc(2.73rem + 13.41vw), 24.19rem);
	--fontB10: clamp(6.09rem, calc(2.81rem + 16.38vw), 29.02rem);
}

html, body {
	min-width: 100vw;
	min-height: 100vh;

	padding: 0;
	margin: 0;

	font-size: 100%;
	/* fontBfamily: Verdana, Geneva, sans-serif; */

	overflow-x: hidden;
}

body {
	background-color: #000000;
	color: rgb(248, 248, 248);
	font-family: var(--mainFont);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal; /* Change this value to adjust boldness */
}

h1 {
	font-size: var(--fontS2);
}

h2 {
	font-size: var(--fontS4);
}

h3 {
	font-size: var(--fontS6);
	margin-bottom: 0.1rem;
}

h4 {
	font-size: var(--fontS7);
}

h5{
	font-size: var(--fontS8);
}

h6{
	font-size: var(--fontS9);
}

li strong {
	font-size: var(--fontS7);
}

li p {
	font-size: var(--fontS8);
}

a, a:link, a:visited, a:active {
	text-decoration: none;
	font-size: var(--fontS7);
	/* color: #a6192e; */
}

a:hover {
	color: var(--mainRed); /* Color change when hovering over the link */
}

textarea, textarea::placeholder, input, input::placeholder{
	font-size: var(--fontS7);
}

p{
	font-size: var(--fontS7);
	/* font-weight: bold; */
}
option, select{
	font-size: var(--fontS7);
}
address{
	font-size: var(--fontS7);
}
hr {
	display: block;
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
	margin-inline-start: auto;
	margin-inline-end: auto;
	unicode-bidi: isolate;
	overflow: hidden;
	border-style: inset;
	border-width: 1px;
}
.pointer{
	cursor: pointer;
}
.pointer:hover{
	cursor: pointer;
	color: #a6192e;
}
/* GLOBAL End! */
/* Core site styles start! */
.iframeSet16-9{
	width: 100%;
	aspect-ratio: 16 / 9;
}
.loader{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
	background-color: #fffdf2;
}
.bodyLoaderSpinner{
	display: block;
	width: 15rem;
	height: 15rem;
}

.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
}
.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* Core site styles end! */
.breakerBody{
	width: 100%;
}

.wrapper{
	max-width: 160rem;
	margin: 0 auto;
	overflow-x: hidden;
}

.info {
	font-size: var(--fontS7);
	display: inline;
	margin: 0; /* Removes extra spacing */
	text-align: right; /* Aligns text to the right */
}

.list {
	margin-top: 0;
	padding-top: 0;
	font-size: var(--fontS7);
}

.header-container {
	display: flex;
	justify-content: space-between; /* Pushes elements to opposite ends */
	align-items: center; /* Aligns them vertically */
}

.space {
	margin: 0; 
	font-size: var(--fontS5);
	font-weight: 500;
}

.Bio {
	text-align: justify;
	margin-top: 0;
}
.floating{
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
	max-width: 300px; /* adjust as needed */
}
.floating img{
	width: 100%;
	max-width: 400px;
}
.mycontent {
	margin-top: 20px;
	text-align: center;
}
.imgFrame {
	width: 100%; /* Makes the image responsive */
	/*max-width: 400px;*/ /* Optional: Limit the image width */
	height: auto; /* Maintain image proportions */
	display: block;
	margin: 20px auto; /* Adds space above and below the image */
}

a {
	color: rgb(255, 255, 255); /* Set default color for links */
	text-decoration: none; /* Optionally remove the underline */
}

.Specific-link {
	color: rgb(255, 255, 255); /* Set default color for links */
	text-decoration: none; /* Optionally remove the underline */
}



.tabs {
	display: flex;
	text-align: center;
	margin-bottom: 24px;
}

/* Hide tab content by default */
.tab-content {
	display: none;
}

/* Show active tab content */
.tab-content.active {
	display: block;
}



li {
	margin: 5px 0;
}


.tab-link {
	font-family: var(tabLinkFont);
	padding: 10px;
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	cursor: pointer;
	font-size: var(--fontS7);  /* This increases the font size */
}

.tab-link.active {
	background-color: var(--mainRed);
	font-size: var(--fontS6);  /* You can make the font size of the active tab bigger if you want */
}

.newlists {
	text-align: center;
	list-style-type: none;
}

/* Compositions styles. */
.container {
	display: flex;
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.left-panel {
	width: 15%;
	padding: 24px;
	position: relative;
}

.right-panel {
	width: 85%;
	padding: 50px;
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.composition-details {
	display: none;
	position: relative;
	text-align: center;
}

.composition-details.active {
	display: block;
}

.frame-set-A{
	padding:56.25% 0 0 0;
	position:relative;
}

.soundcloud-credit {
	font-size: 10px;
	color: #cccccc;
	line-break: anywhere;
	word-break: normal;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--tabFont);
	font-weight: 100;
}
.soundcloud-credit a {
	color: #cccccc;
	text-decoration: none;
}

.backToTopBtn {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #333;
	color: white;
	border: none;
	font-size: 24px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s, background-color 0.2s;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.backToTopBtn:hover {
	background-color: #555;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.backToTopBtn:active {
	transform: translateY(0);
}

.backToTopBtn.visible {
	opacity: 1;
	visibility: visible;
}

.backToTopBtn:focus {
	outline: 2px solid #4CAF50;
	outline-offset: 2px;
}

/* Screens Start! */
/* @media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 576px) and (min-width: 480px) {
}
@media only screen and (max-width: 768px) and (min-width: 576px){
}
@media only screen and (max-width: 992px) and (min-width: 768px){
}
@media only screen and (max-width: 1200px) and (min-width: 992px){
}
@media only screen and (max-width: 1600px) and (min-width: 1200px){
}
@media only screen and (max-width: 1920px) and (min-width: 1600px){
}
@media only screen and (max-width: 2600px) and (min-width: 1920px){
} */