:root {

/* UI */
  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ui-el-size: 140px;
  --ui-stroke-width: 1px;
  --ui-color: #F5F5F5;/* UPDATE bang script */


    /* Background colors */
  --bg-main: black;        /* Light gray background */
  --bg-panel: rgb(68, 68, 68);       /* Slightly darker panel background */
  --bg-highlight: #d6eaff;   /* Soft blue highlight */

  /* Text colors */
  --text-primary: #1a1a1a;   /* Almost black for main text */
  --text-panel: rgb(204, 204, 204);;
  --text-secondary: #F5F5F5; /* Medium gray for secondary text */
  --text-muted: #888888;     /* Muted gray for disabled or less important text */


  /* Accent colors */
  --accent-blue: #3a8dde;    /* Bright blue accent */
  --accent-green: #4caf50;   /* Green accent for success or active states */
  --accent-orange: #ff9800;  /* Orange accent for warnings */

  /* Borders and lines */
  --border-light: #cccccc;   /* Light border */
  --border-dark: #999999;    /* Darker border */

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.1);

}

@media only screen
and (max-width : 900px) {
	:root {
		--ui-el-size: 60px;
	}

	.extra-ui.visible{
	width: 121px!important;
}

.extra-ui.visible.single{
	width: 61px!important;
}



}


#loading{
	backdrop-filter: blur(40px);
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 8000;
	transition: 1s;
}

#loading p{
	margin:0;
	position: fixed;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 0.3;
	font-weight: 500;
}

@keyframes opening {
  from {width: 0px; opacity: 0}
  to {width: 40px; opacity: 1}
}

#loading p span{
width: 0px;
overflow: hidden;
display: inline-flex;
animation-name: opening;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.vanish{
	opacity: 0;
	pointer-events: none;
}


body {
	overflow-y: scroll;
	overflow-x: hidden;
	background-color:var(--bg-main);
	color: var(--text-secondary);
  	font-family: var(--font-family-system);

  	font-size: 17.6px;
  	font-weight: 500 ;
  	-webkit-font-smoothing: antialiased;  /* Better font rendering on WebKit */
  	-moz-osx-font-smoothing: grayscale;   /* Better font rendering on Firefox/macOS */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



.slide{
	position: fixed;
	top:0;
	opacity: 0;
	transition: opacity 0.8s ease;

	background-position: center; background-size: cover; width: 100vw; height:100vh; z-index: 100; filter: brightness(0.8);
}

.slide.active{
	opacity: 1;
}

.wi{
	backdrop-filter: blur(20px);
	cursor: pointer;
}

.wi:hover{
	background-color: rgba(255,255,255,0.17);
}


#second{
overflow-y: scroll;
width: 100vw;
height: 100vh;
box-sizing: border-box;
position: fixed;
background-color: black;
transition: opacity 0.4s ease;
z-index: 300;
top: 0;
transform: translate(0,100%); */
backdrop-filter:  blur(15px) ;
opacity: 0; 
}



.logo{
	padding: 1.25rem;
	position: fixed;
	top:0;
	left:0;
	text-decoration: none;
	color: inherit;
	z-index: 400;
	transition: 0.3s ease;
width: 100%;

}

.logo span{
max-width: 0px;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
max-width: 50px;
transition: 0.3s;
}

.logo::after{
	content:"";
	border-bottom: 1px solid var(--ui-color) ;
	position: absolute;
	bottom:15px;
	left:0;
	width: 0;
	margin-inline: 1.25rem;
	box-sizing: border-box;

}

.logo::before{
	    content: "";
    border-bottom: 1px solid var(--ui-color);
    position: absolute;
    bottom: 15px;
    left: 0;
    width: calc(100vw - 2.5rem);
    margin-inline: 1.25rem;
    box-sizing: border-box;
    opacity: 0.4;
}

.logo.loaded::after{
		transition: 15s linear ;
	animation-delay: 0.5s;
	width: calc(100vw - 2.5rem) ;
}

.caption{
	padding: 1.25rem;
	transition: opacity 0.6s ease;
	z-index: 400;


}

#captionCont{
	max-width: 600px;
}

#captionCont p{
	margin-block: 1rem;
	position: relative;
}

#captionCont p::after{
	content: "";
position: absolute;
bottom: -0.5rem;
border-bottom: 1px solid;
width: 100%;
left: 0;
}

#captionCont p:last-child::after{
	border-bottom: none;
}

#captionCont p:last-child{
	margin-bottom: 0rem;
}

#captionTitle{

	
}



.panel{
	font-size: 0.7rem;
	color: var(--text-panel);
	background-color: var(--bg-panel);
	width: fit-content;
	padding-block: 0.6125rem;
	padding-inline: 1rem;

	border-radius: 10px;
	border: 1px solid var(--border-light);
	position: fixed;
	top:50%;
	left:50%;
}

.bang{
	width: var(--ui-el-size);
	height: var(--ui-el-size);
	border: var(--ui-stroke-width) solid  var(--ui-color);
	position: relative;

}

.bangInner{
	position: absolute;
	top:0px;
	left:0px;
	border: var(--ui-stroke-width) solid var(--ui-color);; ;
	border-radius: var(--ui-el-size);
	height: var(--ui-el-size);
	width: var(--ui-el-size);
	box-sizing: border-box;
}

.arrow {

  position: relative;
  width: var(--ui-el-size);
  height: var(--ui-el-size);
  border: var(--ui-stroke-width) solid var(--ui-color);;
}

/* Common styles for both lines */
.v-shape {
box-sizing: border-box;
position: absolute;
width: var(--ui-stroke-width) ;
height: calc(var(--ui-el-size) + var(--ui-el-size) * 0.11);
background-color: var(--ui-color);
transform-origin: top;
}

/* Left line: from top-left to bottom-center */
.v-shape-left {
  top: 0;
  left: 0;
  transform: rotate(-26.5deg); /* Angle from vertical axis */
}

/* Right line: from top-right to bottom-center */
.v-shape-right {
  top: 0;
  right: 0;
  transform: rotate(26.5deg);
}





.toggle{
	width: var(--ui-el-size);
	height: var(--ui-el-size);
	border: var(--ui-stroke-width) solid var(--ui-color);

}

.x-shape {
  position: relative;
  width: var(--ui-el-size);
  height: var(--ui-el-size);
  display: none;
}

.x-shape::before,
.x-shape::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ui-stroke-width);
  height: 142%;
  background: var(--ui-color);
  transform-origin: center;
}

.x-shape::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.x-shape::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#slider {
	
  position: relative;
  width:var(--ui-el-size);
  height:var(--ui-el-size);
  border: var(--ui-stroke-width) solid var(--ui-color);
}

#slider-bar {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: var(--ui-stroke-width);
background-color: var(--ui-color);
cursor: ns-resize;
transition: height 0.0s, width 0.4s;
transform: translate(-50%, -50%);
/* border-radius: 100px; */
margin-inline: auto;
box-sizing: border-box;
}

#slider:hover #slider-bar{
	height: 4px;
	width: 90%;
}

#twoDSlider {

  position: relative;
  width: var(--ui-el-size);
  height: var(--ui-el-size);
  border: var(--ui-stroke-width) solid var(--ui-color);
}

#xBar {
  position: absolute;
  top: 80%;
  left: 0;
  width: 100%;
  height: var(--ui-stroke-width);
  background-color: var(--ui-color);
  cursor: ns-resize;
}

#yBar {
  position: absolute;
  top: 0;
  left: 35%;
  width: var(--ui-stroke-width);
  height: 100%;
  background-color: var(--ui-color);
  cursor: ew-resize;
}

.ui{
	position: fixed;
	display: flex;
	gap: -0.5px;
	padding: 1.25rem;
	bottom:0;
	right:0;
	z-index: 900;

	flex-direction: row;


}

.extra-ui{
transition: 0.5s ease;
width: 0;
overflow: hidden;
display: flex;
gap: 0;
}

.extra-ui.visible{
width: 281px;
}

.extra-ui.visible.single{
	width: 141px;
}