/*
 █████████     █████      ████     ███ ███████████   ██████  
 ███         ███    ███   ██ ███   ███     ███     ███    ███
 ███       ███        ███ ███ ███  ███     ███      ███      
 ███████   ███        ███ ███  ███ ███     ███        ███    
 ███       ███        ███ ███   ██ ███     ███           ███ 
 ███         ███     ███  ███    ██ ██     ███     ███    ███
 ███           █████      ███      ███     ███       ██████  
*/                                                         

@font-face {
  font-family: 'RobotoMono';
  src: url('fonts/RobotoMono-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 50% 200%;
}
@font-face {
  font-family: 'NunitoSans';
  src: url('fonts/NunitoSans-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 50% 200%;
}
@font-face {
  font-family: 'Monospace Argon';
  src: url('fonts/MonaspaceArgon-Regular.otf') format('opentype');
  font-weight: 400; 
}

@font-face {
  font-family: 'Monospace Krypton';
  src: url('fonts/MonaspaceKrypton-Regular.otf') format('opentype');
  font-weight: 400;
}
@font-face {
  font-family: 'Alice';
  src: url('fonts/Alice-Regular.ttf') format('truetype');
  font-weight: 400;
}

/*NEW FONTS*/
@font-face {
  font-family: 'Kode Mono';
  src: url('fonts/KodeMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
}
@font-face {
  font-family: 'SourceCode Mono';
  src: url('fonts/SourceCodePro-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
}
@font-face {
  font-family: 'Oxanium';
  src: url('fonts/Oxanium-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
}

/*
    █████     ███            █████      █████           ██        ███       
  ██    ███   ███          ███    ███   ██  ███        ██ ██      ███       
 ██           ███        ███        ███ ██   ███      ██  ███     ███       
 ███          ███        ███        ███ ██████       ███   ███    ███       
 ███   ██████ ███        ███        ███ ██    ███   ███████ ███   ███       
  ███    ██   ███          ███     ███  ██     ██  ███       ███  ███       
   ██████     ██████████     █████      ████ ███  ███         ███ ██████████
*/                                                                       

::selection {
	color: black;
	background: #FFFEEF;
	text-shadow: 0px 0px 2px gray;
}
:root {
  /* CURSORS */
  --cursor-default: auto;
  --cursor-pointer: pointer;

  /* GENERAL COLORS */
	--color-logo: #FFFEEF;
  --color-icon-social: #FFFEEF;

	--color-link: #00C3FF; /*blue*/
	--color-link-hover: #00C3FF; /*blue*/
	--color-link-visited: #007396; /*blue*/

  --color-text: #FFFEEF; /*yellowish white*/
	--color-content-block-bg: #000000;

  /* MENU COLORS */
  --color-menu-link: #fffeefce;
	--color-menu-link-active-bg: rgba(255, 255, 255, 0.9);
	--color-menu-link-active: rgba(17, 17, 17, 0.9);
  --color-menu-category: rgba(255, 255, 255, 0.4);

  /* MENU BALLOON */
  --color-menu-balloon-text: #fffeefce;
	--color-menu-balloon-fill: #7575752d;
	--color-menu-balloon-border: #7a7a7a52;

  /* FONTS */
	--project-font: 'NunitoSans';

  --font-menu-link: 'Kode Mono';
	--font-menu-link-weight: 600;
	--font-menu-link-size: 10pt;

	--font-menu-category: 'Kode Mono';
	--font-menu-category-weight: 600;
	--font-menu-category-size: 12pt;

	--font-menu-balloon: 'Kode Mono';
	--font-menu-balloon-weight: 600;
	--font-menu-balloon-size: 9pt;
	
  --content-padding: 0px 40px 0px 40px;
}

.theme-default{
  --color-content-block-bg: transparent;
}
.theme-jex{
  --color-content-block-bg: rgba(20, 23, 32, 0.8);

  --color-menu-balloon-text: #fffeefce;
	--color-menu-balloon-fill: #2c3c49d2;
	--color-menu-balloon-border: #75818b9a;
}
.theme-jarfall{
  --project-font: 'Alice';

  --color-content-block-bg: #976f57;

  --color-menu-link: rgba(80, 53, 23, 0.95);
  --color-menu-link-active-bg: rgba(80, 53, 23, 0.95);
  --color-menu-link-active: rgb(255, 245, 231);
  --color-menu-category: rgba(80, 53, 23, 0.6);

  --color-menu-balloon-text: rgb(255, 245, 231);
  --color-menu-balloon-fill: rgba(80, 46, 23, 0.678);
  --color-menu-balloon-border: rgb(94, 64, 30);

  --color-logo: rgba(80, 53, 23, 0.95);
  --color-icon-social: rgba(80, 53, 23, 0.95);
  --social-icons-color: rgba(80, 53, 23, 0.95);
}
.theme-sweeper{
  /* TO DO */
  --color-content-block-bg: #000;
}
.theme-rebounce{
  /* SHOULD BE THE SAME AS MAIN PAGE */
  --color-content-block-bg: #000;
}
.theme-besiege{
  /* TO DO */
  --color-content-block-bg: rgba(17, 17, 17, 0.8);
}
.theme-armorcraft{
  --color-content-block-bg: rgba(17, 17, 17, 0.6);

  --color-menu-balloon-text: rgb(255, 245, 231);
  --color-menu-balloon-fill: rgba(63, 61, 59, 0.897);
  --color-menu-balloon-border: rgb(92, 88, 85);

  --project-font: 'Oxanium';
}
.theme-alchemy{
  --color-menu-balloon-fill: #ffffff2d;
	--color-menu-balloon-border: #ffffff49;

  --color-content-block-bg: #15293f;
  --color-content-block-bg: #1d3d57f5;
}
.theme-store{
  /* SHOULD BE THE SAME AS MAIN PAGE */
  --color-content-block-bg: transparent;
}
.theme-creativeboard{
  /* SHOULD BE THE SAME AS MAIN PAGE */
  --color-content-block-bg: transparent;
}
.theme-about{
  /* SHOULD BE THE SAME AS MAIN PAGE */
  --color-content-block-bg: transparent;
}


body {
	width: 100%; 
  height: auto;
	background: rgb(14, 14, 14);
	overflow-x: hidden; 
  overflow-y: auto;
	padding: 0;
	margin: 0;
	z-index: 0;
	
	font-family: var(--project-font);
  color: var(--color-text);
}
body.menu-open { /* FOR MOBILE MENU to disable scroll when menu is open */
  overflow: hidden;
}
h1 {
	font-weight: 400;
	font-size: 20pt;
	text-align: center;
}
h2 {
	font-weight: 400;
	font-size: 20pt;
	text-align: center;
	margin-top: 50px;
}
h3 {
	font-weight: 300;
	font-size: 16pt;
	text-align: left;
	margin: 0px;
}
h4 {
	font-weight: 400;
	font-size: 12pt;
	text-align: center;
	margin: -10px 0px 50px 0px;
}
p {
	font-size: 11pt;
	font-weight: 400;
	text-align: left;
}
a {
	text-decoration: none; 
	font-weight: 400;
	font-size: 10pt;
	padding: 0;
	margin: 0;
}
a:hover {
	color: var(--color-link);
}
a:visited {
	color: var(--color-link);
}
img{
	user-select: none;
}





/*
 █████           ██            ███    ███   ███      █████     ████████     ██████    
 ██  ███        ██ ██       ███   ███ ███  ███     ██    ███   ███    ███   ███   ███ 
 ██   ███      ██  ███     ███        ███ ███     ██           ███    ███   ███    ███
 ██████       ███   ███    ███        ██ ██       ███          ██ ███       ███    ███
 ██    ███   ███████ ███   ███        ███  ███    ███   ██████ ███  ███     ███    ███
 ██     ██  ███       ███   ███   ███ ███   ███    ███    ██   ███    ███   ███   ███ 
 ████ ███  ███         ███    █████   ███     ███   ██████     ███      ███ ██████    
*/

/* ----------------------------------- DEFAULT BACKGROUND ----------------------------------- */
.background-image-default {
  background: #000 url(img/noise-bg-3.png) repeat bottom / contain;
  background-size: 500px 500px; /* each square tile will be 100×100 */
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ------------------------------- BACKGROUNDS FOR EACH PROJECT ----------------------------- */

/* ------------ JARFALL ------------ */
.background-image-jar {
	position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
	background: #dabb9c url(img/jar/background-v4.webp) no-repeat bottom / cover;
}
/* ------------ JEX ------------ */
.background-image-jex {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
	background: url(img/jex/background-v2.webp) no-repeat center / cover;
}
.background-image-jex::after { /* Scanlines */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* bright scanlines */
  background: repeating-linear-gradient(to bottom,rgba(255, 255, 255, 0.08) 0px,rgba(255, 255, 255, 0.03) 2px,transparent 2px,transparent 5px );
  background-size: 100% 5px; /* explicitly match the repeat interval */
  /* fade sides (vignette-like) */
  -webkit-mask-image: linear-gradient( to right, transparent 0%, black 20%, black 80%, transparent 100% );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient( to right, transparent 0%, black 20%, black 80%, transparent 100% );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  animation: scanlines-scroll 1s linear infinite; /* new animation */
  z-index: 2;
}


/* ------------ ALCHEMY ------------ */
.background-image-alchemy {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
	background: url(img/alchemy/background.png) no-repeat bottom / cover;
}
/* ------------ ARMORCRAFT ------------ */
.background-image-armorcraft {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
	background: url(img/ac/background-v2.webp) no-repeat bottom / cover;
}
.background-image-armorcraft::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
	background: repeating-linear-gradient(to bottom,rgba(255, 255, 255, 0.08) 0px,rgba(255, 255, 255, 0.08) 2px,transparent 2px,transparent 6px);
  background-size: 100% 5px; /* explicitly match the repeat interval */
  /* fade sides (vignette-like) */
  -webkit-mask-image: linear-gradient( to right, transparent 0%, black 50%, black 80%, transparent 100% );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient( to right, transparent 0%, black 50%, black 80%, transparent 100% );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  animation: scanlines-scroll-slow 1s linear infinite; /* new animation */
  z-index: 2;
}
@keyframes scanlines-scroll-slow { from { background-position: 0 0; } to { background-position: 0 -27px; }}
@keyframes scanlines-scroll { from { background-position: 0 0; } to { background-position: 0 -54px; }}
/* ------------ BESIEGE ------------ */
.background-image-besiege {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
	background: url(img/besiege/4k2.webp) no-repeat bottom / cover;
}
/* ------------ REBOUNCE + SWEEPER ------------ */
.background-image-rebounce, .background-image-sweeper {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
	background: #000;
}




/*
 ███       ███ █████████ ████     ███ ███     ███
 ██ ███   ████ ███       ██ ███   ███ ███     ███
 ███ ███ █ ███ ███       ███ ███  ███ ███     ███
 ███  ███  ███ ███████   ███  ███ ███ ███     ███
 ███   ██  ███ ███       ███   ██ ███ ███     ███
 ███       ███ ███       ███    ██ ██ ███     ███
 ███       ███ █████████ ███      ███   ██████   
*/
.hamburger-button{
  display: none;
}
.mobile-menu-container{
  display: none;
}
.scroll-to-top-button {
  position: fixed !important;
  bottom: 15px;   /* above the menu button */
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background-color: #11111180;
  z-index: 13;
  border-radius: 8px;     /* slightly more modern rounded corners */
    
  background-color: rgba(0, 0, 0, 0.55); /* dark translucent background */
  backdrop-filter: blur(10px);          /* glass effect */
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.25); /* subtle light border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); /* soft shadow for depth */

  cursor: pointer;
  opacity: 0;
}

.scroll-to-top-button.shown {
  opacity: 1;
}
.scroll-to-top-button:hover {
  width: 52px;
  height: 52px;
  bottom: 13px;
  right: 13px;
}
.scroll-to-top-button img {
  width: 24px;
  height: 24px;
}
.menu-container{
	position: fixed;
	top: 0;
	left: calc(50% - 800px/2 - 280px); /* 800 = content-block width, 250 = menu width */
	display: flex; 
  flex-direction: column;
	justify-content: center;
	align-items: left;
	width: 250px;
	height: 100%;
	float: left; 
	background-color: transparent;
	background-image: none;
	padding-left: 25px;
	z-index: 2;
}
.menu-links-group{
	display: block;  
	width: auto;
	height: auto;
	text-align: left;
	margin-bottom: 25px; 
}
.menu-link-category{
	display: block;  
	width: 200px;
	height: auto;
	margin-bottom: 5px;
	opacity: 100%;
  user-select: none;

  color:        var(--color-menu-category);
	font-family:  var(--font-menu-category);
	font-size:    var(--font-menu-category-size);
	font-weight:  var(--font-menu-category-weight);
}
.menu-link, .menu-link a {
	width: fit-content;
	height: 17px;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
  text-decoration: none;
	padding: 0px 5px;
	margin: 1px 0px;
  border-radius: 3px;
  margin-left: -5px; 
  user-select: none;

  background-color: transparent;
  color:        var(--color-menu-link);
  font-family:  var(--font-menu-link);
  font-size:    var(--font-menu-link-size);
  font-weight:  var(--font-menu-link-weight)
}
.menu-link-active a, .menu-link.highlight a, .menu-link a:hover {
  border: none;
  outline: none;
  opacity: 100%;
  background-color: var(--color-menu-link-active-bg);
  color: var(--color-menu-link-active);
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
  margin-left: -5px; 
  border-radius: 3px;
}
.balloon {
  display: none;               /* make the balloon shrink to text width */
  align-items: center;                /* vertical centering */
  justify-content: center;            /* horizontal centering */
  padding: 2px 10px;                  /* space around the text */
  border-radius: 999px;               /* always fully rounded */
  width: auto;                         /* shrink to fit text */
  height: auto;                        /* let padding control height */
  text-align: center;                  /* fallback */

  font-family: var(--font-menu-balloon);
	font-size: var(--font-menu-balloon-size);
	font-weight: var(--font-menu-balloon-weight);
  border: 1px solid var(--color-menu-balloon-border);
  background-color: var(--color-menu-balloon-fill);
  color: var(--color-menu-balloon-text);
}

.unavailable a {
  text-decoration: line-through;
  opacity: 50%;
}
.unavailable a:hover {
  color: var(--color-menu-link-active);
}

/* ------------ ICONS - LOGO AND SOCIALS ------------ */
.socials-mobile{
  display: none;
}
.logo-container,
.logo-container img{
  display: block;
  width: 60px;
  height: 60;
  text-align: left;
  padding:  0; margin: 0;
  transition: transform 0.2s ease;
}
.logo-container img:hover {
  /*transform: scale(1.066);*/
  transition: transform 0.2s ease;
  opacity: 0.8;
}
.logo-container-mobile, .description-container-mobile{
	display: none;
}
.logo-container{
	display: block;
	width: fit-content;
	height: auto;
	text-align: left;
	padding:  0;
}
.logo-container .logo {
  opacity: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.logo-container .logo:hover { 
  opacity: 1; 
  transform: scale(1.066);
  transition: transform 0.2s ease;
}
.description-container{
	display: block;
	width: 200px;
	height: 40px;
	text-align: left;
	padding: 15px 0; 
	margin-bottom: 40px; 
}
/*RUNNING TEXT GIF*/
.description-container img{
	margin-left: -5px;
	user-select: none;
}

.socials-desktop{
	display: block;
	width: 100%;
	height: auto;  
}
.socials-mobile-container{
	display: none;  
}

.social{
	display: flex;  
	flex-wrap: nowrap; 
	flex-direction: row;
	justify-content: left;
  align-items: center;
	width: 100%;
	height: auto; 
  margin-top: 5px;
}
.social-icon{
	display: flex; 
	flex-wrap: nowrap;
	width: 24px;
	height: 24px; 
	float: left;
}
.social-text{
	display: flex;
	flex-wrap: nowrap;
	font-size: 9.6pt;
  line-height: 24px;
  vertical-align: middle;
	margin-left: 10px;

  font-weight: var(--font-menu-link-weight);
	font-family: var(--font-menu-link);
	color: var(--color-icon-social);
}
.social-text.link{
  user-select: none;
}
.social-text.link:hover{
  text-decoration: underline;
}



/*
 ████████   ████████         █████           ███  █████████     ███    ███████████   ██████  
 ███    ███ ███    ███     ███    ███        ███  ███        ███   ███     ███     ███    ███
 ███    ███ ███    ███   ███        ███      ███  ███       ███            ███      ███      
 ████████   ██ ███       ███        ███      ███  ███████   ███            ███        ███    
 ███        ███  ███     ███        ███      ███  ███       ███            ███           ███ 
 ███        ███    ███     ███     ███  ██   ███  ███        ███   ███     ███     ███    ███
 ███        ███      ███     █████       █████    █████████    █████       ███       ██████                                                                                            
*/
/* This centers content-block-container in entire viewport */
.content-block-wrapper {
  display: flex;
  justify-content: center; 
  align-items: flex-start;
  position: relative;
  width: 100%;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}
.content-block-wrapper.dimmed-content{ /* dimmed out content blocks - UNUSED FOR NOW */
  opacity: 0.5;
  transition: all 0.2s ease-in-out;
  
}
/* This contains all the content blocks */
.content-block-container {
  display: block;
  width: 800px;
  height: auto;
  padding: var(--content-padding);
  border: none;
  outline: none; 
  z-index: 2;
  margin: 0 auto;
  background-color: transparent;
  background: none;
}
/* This is one block of content */
.content-block.with-padding {
  background-color: var(--color-content-block-bg);
  padding: 0px 35px 0px 35px;
  
}
.content-block.without-padding {
  padding: 0px 0px 0px 0px;
}

/* ------------ PROJECT SUMMARY INFO - Platform/Engine/Genre/etc ------------ */
.content-summary-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal-width columns */
  gap: 10px 30px;                /* row gap / column gap */
  justify-content: center;
  text-align: left;
  max-width: 550px;              /* optional, keeps it centered and not too wide */
  margin: 0 auto;
}
@media (max-width: 600px) {
  .content-summary-container {
    grid-template-columns: 1fr; /* collapse to single column */
  }
}
.content-summary-item {
  min-width: 0;                  /* important: allows text to wrap instead of forcing column wider */
  word-wrap: break-word;         /* break long words if needed */
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.295);
}
.summary-title {
  text-decoration: none; 
  font-weight: 600;
  font-size: 9pt;
  opacity: 0.5;
  display: block;
}
.summary-info {
  text-decoration: none; 
  font-weight: 400;
  font-size: 11pt;
  display: block;
}
/* ------------ APP STORES BUTTONS ----------- */
.get-on-buttons {
  display: block;
  margin-top: 20px;
  text-align: center; 
  margin: 0 auto;
  padding: 1em 0;
}
.get-on-buttons .center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 💡 allows wrapping on smaller screens */
  gap: 20px; /* consistent spacing between buttons */
  max-width: 100%;
  margin: 0 auto;
}
.get-on-buttons a {
  display: inline-block;
}
.get-on-buttons img {
  width: 180px;
  height: auto;
  display: block;
}
.get-on-buttons img:hover {
  transform: scale(1.033);
}
/* ------------ FEATURED PROJECTS - HOME ----------- */
/* Default: hide spacers on desktop */
.mobile-spacer-top,
.mobile-spacer-bottom,
.mobile-spacer-home-bottom,
.mobile-spacer-home-top,
.logo-container-mobile {
    display: none;
}
.featured-title {
  font-size: 12pt;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}
.featured-projects-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* center vertically in viewport */
  align-items: center;
  gap: 20px;
  min-height: 100vh;         /* take full screen height */
  padding: 0px;             /* breathing room on small screens */
  box-sizing: border-box;
}
.mobile-extra-projects{
  display: none;
}
.featured-project {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  flex: 0 0 auto;            /* don’t stretch weirdly */
  width: 100%;
  max-width: 800px;           /*optional: keep from being too wide */ 
}
.featured-project img {
  display: block;
  width: 100%;
  height: auto; /* fallback */
  max-height: 30vh;          /* each project takes up at most ~30% of viewport */
  min-height: 150px;         /* never shrink too small */
  object-fit: cover;
  border-radius: inherit;
  transition: all 0.1s ease-in-out;
}
.overlay-text-container {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.295);
  width: 100%;
  padding: 10px 10px 10px 50px;
  text-align: left;
  font-size: 0.9rem;
  opacity: 0;               /* hidden by default */
  pointer-events: none;     /* don't block hover */
  transition: opacity 0.3s ease;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  height: auto;
  box-sizing: border-box;
}
.featured-project:hover img {
  transform: scale(1.02);
  transition: all 0.1s ease-in-out;
}
.overlay-text-title {
  width: 100%;
  text-align: left;
  font-size: 16pt;
  font-weight: 600;
  margin: 0;
  padding: 2px 0;
  font-family: var(--font-menu-link);
  color: var(--color-text);
}
.overlay-text-desc,
.overlay-text-platform {
  width: 100%;
  text-align: left;
  font-size: 10pt;
  margin: 0;
  padding: 2px 0;
  font-family: var(--font-menu-link);
  color: var(--color-text);
  text-wrap: balance;
}
.overlay-text-desc{
  opacity: 0.6;
}
.overlay-text-role {
  display: block;
  position: absolute;
  top: 1px;
  right: 5px;
  width: auto;
  height: auto;
  text-align: right;
  padding: 2px 10px 1px 10px;
  border-radius: 6px;
  background-color: whitesmoke;
  color: black;
  margin: 5px 0 10px 0;
  font-size: 11pt;
  border: 1px solid rgba(0, 0, 0, 1);

  font-family: var(--font-menu-balloon);
  font-weight: var(--font-menu-balloon-weight);
}
/* Hover effect */
.featured-project:hover .overlay-text-container {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;               /* show on hover */
  pointer-events: auto;
}

.link-preview {
  position: fixed;
  width: 550px;
  height: 550px;
  background: transparent;
  display: none;
  pointer-events: none; /* so it doesn’t block hover */
  z-index: 9999;
  border-radius: 8px;
  overflow: hidden;
}

.link-preview img,
.link-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
}
.preview-toggle-hint {
  display: none;
  position: fixed;
  top: 25px;
  left: 15px;
  font-family: var(--font-menu-link);
  font-size: 10pt;
  color: white;
  opacity: 0.6;
  pointer-events: none;

  display: inline-flex;      /* make it a flex container */
  align-items: center;       /* vertically center children */
  gap: 4px;                  /* optional space between icon and text */

  display: none; /* disabled */
}

.preview-toggle-hint span {
  font-size: 16pt;           /* your info icon */
  line-height: 1;            /* keep it tight */
}

/* -----------------  Screenshot gallery - used to align screenshot images horizontally in the content blocks --------------------- */
.screenshot-gallery {
  display: flex;
  justify-content: center; /* centers items if fewer than 3 */
  gap: 20px; /* equal spacing between all items */
  width: 100%;
}

.screenshot-item {
  flex: 1;
  max-width: calc((100% - 32px) / 3); 
  /* (3 items case: 100% - 2 gaps) / 3 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.screenshot-gallery > .screenshot-item:nth-last-child(2):first-child,
.screenshot-gallery > .screenshot-item:nth-last-child(2):first-child ~ .screenshot-item {
  max-width: calc((100% - 20px) / 2); 
  /* (2 items case: 100% - 1 gap) / 2 */
}

.screenshot-gallery > .screenshot-item:only-child {
  max-width: 100%; /* single item fills all */
}

.screenshot-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px; /* optional */
}
.screenshot-item.no-rounding img {
  border-radius: 0;
}
.screenshot-item p {
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 8px;
  max-width: 100%;
  word-wrap: break-word;
}

/*
 █████         █████            ██        ████████     ██████    
 ██  ███     ███    ███        ██ ██      ███    ███   ███   ███ 
 ██   ███  ███        ███     ██  ███     ███    ███   ███    ███
 ██████    ███        ███    ███   ███    ██ ███       ███    ███
 ██    ███ ███        ███   ███████ ███   ███  ███     ███    ███
 ██     ██   ███     ███   ███       ███  ███    ███   ███   ███ 
 ████ ███      █████      ███         ███ ███      ███ ██████    
*/                                                        


/* ------------------ GALLERY -------------- */
.gallery {
  column-count: 2;      /* 2 columns */
  column-gap: 10px;     /* space between columns */
}
.gallery img {
  width: 100%;          /* fit column width */
  height: auto;         /* keep aspect ratio */
  margin-bottom: 10px;  /* gap between stacked images */
  display: block;
}

/* responsive: switch to 1 column on narrow screens */
@media (max-width: 600px) {
  .gallery {
	column-count: 1;
	column-gap: 5px;
  }
  .gallery img {
	margin-bottom: 5px;
  }
}

.lightboxGallery img.is-lightbox:hover {
  cursor: url(img/zicon.png), pointer;
  opacity: 1;
}
#CreativeBoard img.is-lightbox:hover {
  cursor: url(img/zicon.png), pointer;
  opacity: 1;
  filter: grayscale(1);
}


/*
   ██████   ███████████     █████      ████████     █████████
 ███    ███     ███       ███    ███   ███    ███   ███      
  ███           ███     ███        ███ ███    ███   ███      
    ███         ███     ███        ███ ██ ███       ███████  
       ███      ███     ███        ███ ███  ███     ███      
 ███    ███     ███       ███     ███  ███    ███   ███      
   ██████       ███         █████      ███      ███ █████████
*/                                                       

#Store {
  text-align: center;
}
/* Spacers above & below */
.store-spacer {
  height: 100px;
  width: auto;
}
/* Headings */
.store-heading {
  text-align: center;
}
.store-subheading {
  text-align: center;
}
/* Gallery Layout */
.store-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}
/* Product Wrapper */
.product {
  display: block;              /* make link act like a block container */
  text-align: center;
  max-width: 600px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #2a2a2a;
  text-decoration: none;       /* remove underline */
  color: inherit;              /* keep text color consistent */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgb(41, 41, 41);
}

/* Product Image */
.product-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px 12px 0 0;  /* only top corners */
  transition: all 0.2s ease-in-out;
  
}

/* Product Info (bottom card section) */
.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #1c1c1c;    /* dark gray background */
  border-radius: 0 0 12px 12px; /* only bottom corners */
  font-size: 18px;
}

/* Title & Price */
.product-title,
.product-title a {
  font-weight: 600;
  font-size: 12pt;
  color: white;
  text-decoration: none;
  text-align: left;
}
.product-title a:hover {
  text-decoration: underline;
}
.product-price {
  color: white;
  font-weight: 700;
  background-color: #ffffff22;  /* semi-transparent pill */
  padding: 2px 15px;
  border-radius: 15px;
  font-size: 12pt;
}
.game-wrapper,
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.game-wrapper iframe,
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



/*

░██         ░██████  ░██████  ░██     ░██ ░██████████░████████     ░██████   ░██    ░██ 
░██           ░██   ░██   ░██ ░██     ░██     ░██    ░██    ░██   ░██   ░██   ░██  ░██  
░██           ░██  ░██        ░██     ░██     ░██    ░██    ░██  ░██     ░██   ░██░██   
░██           ░██  ░██  █████ ░██████████     ░██    ░████████   ░██     ░██    ░███    
░██           ░██  ░██     ██ ░██     ░██     ░██    ░██     ░██ ░██     ░██   ░██░██   
░██           ░██   ░██  ░███ ░██     ░██     ░██    ░██     ░██  ░██   ░██   ░██  ░██  
░██████████ ░██████  ░█████░█ ░██     ░██     ░██    ░█████████    ░██████   ░██    ░██
                                     
 */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  z-index: 99;
}
.lightbox.open {
  display: block;
}
.lightbox img {
  max-width: 98vw;
  max-height: 80vh;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  opacity: 1;
}
.lightbox-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 98;
  opacity: 0.5;
}
.lightbox-background.open {
  display: block;
}
.lightbox-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 40px;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  z-index: 101;
}

.lightbox-close:hover {
  background: rgba(0,0,0,0.0);
  opacity: 0.8;
}
.lightbox-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgb(20, 20, 20);
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  box-sizing: border-box;
  text-align: center;
  z-index: 3;
}
/* Class injected when lightbox is open */
body.no-scroll {
	overflow-y: hidden;
	overflow-x: hidden;
  	overflow: hidden;
}
/*
   ░███    ░████████     ░██████   ░██     ░██ ░██████████
  ░██░██   ░██    ░██   ░██   ░██  ░██     ░██     ░██    
 ░██  ░██  ░██    ░██  ░██     ░██ ░██     ░██     ░██    
░█████████ ░████████   ░██     ░██ ░██     ░██     ░██    
░██    ░██ ░██     ░██ ░██     ░██ ░██     ░██     ░██    
░██    ░██ ░██     ░██  ░██   ░██   ░██   ░██      ░██    
░██    ░██ ░█████████    ░██████     ░██████       ░██  
                                     
 */
.about-container {
  max-width: 700px;
  margin: 10px 0;
  text-align: center;
  padding: 0 15px;
  text-align: left;
  margin: 0 auto;
  margin-top: 50px;
}
.about-img img {
  width: 70%;
  height: auto;
  border-radius: 3px; /* optional */
  display: block;
  margin-bottom: 0px;
  margin: 0 auto;
}
.about-text{
	color: var(--color-text);
	width: 100%;
	padding: 0;
	margin: 0;
	height: auto;
	display: block; 
	font-size: 14pt;
}
.tool-note {
    color: gray;
    font-style: italic;
}

.collapsible {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 1.2em;
  user-select: none;
}

/* Only underline the label text */
.collapsible .label {
  flex: 1;
}
.collapsible .label:hover {
  text-decoration: underline;
}
.collapsible .arrow-container {
  padding: 5px 10px;
  background-color: #1c1c1c7e;
  margin: 0;
  border-radius: 4px;
}
.collapsible .arrow {
  margin: 0;
  display: inline-block;
  transition: transform 0.2s ease;
  transform-origin: center center;
  
}

.content {
  display: none;
  margin-left: 12px;
  margin-top: 6px;
}
.content.show {
  display: block;
}

.download-resume-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.download-resume-btn{
  background-color: transparent;
  border: none;
  color: white;
  padding: 3px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10pt;
  font-family: var(--font-menu-link);
  font-weight: 600;
  margin: 10px 0 0 0; /* added margin to separate from icon */
  cursor: pointer;
  border-radius: 4px;
}
.download-resume-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.download-resume-link img {
  display: block;
  width: 50px;
  height: auto;
  margin: 0 auto;
  opacity: 0.44;
}

.download-resume-link:hover img {
  opacity: 0.9; /* increase opacity on hover */
}

.download-resume-link:hover .download-resume-btn {
  text-decoration: none;
  background-color: white;
  color: #000;
}

/* DISABLE HOVER EFFECT FOR TOUCH */
@media (hover: hover) and (pointer: none) {
  .menu-link a:hover {
    background: transparent;
    color: var(--color-menu-link);
  }
  .playOnItch:hover {
    transform: translateY(0px);
  }
  .link-preview{
    display: none;
  }
}
/* --------------------------------------------------------------------------------------------------------------------------------- CLEANED UP UNTIL HERE ------------ */

/*
      ███  █████████ ███      ███
      ███  ███        ███   ███  
      ███  ███         ███ ███   
      ███  ███████       ███     
      ███  ███         ███ ███   
 ██   ███  ███        ███   ███  
  █████    █████████ ███      ███
*/                                 

.jex-story-gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.jex-story-panel {
  flex: 1 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
  box-sizing: border-box;
}
.jex-story-inner {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
.jex-story-inner img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  filter: grayscale(100%) brightness(0.6) contrast(0.9) sepia(45%) hue-rotate(166deg);
  filter: none;
}
.jex-story-inner:hover {
  filter: none;
  transform: scale(1.3);
  z-index: 999;
}
.jex-story-panel-extra-1 {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 25%;   /* relative to parent width */
  max-width: 80px; /* cap so it doesn’t get huge */
  height: auto;
  pointer-events: none; /* don't block hover */
}
.jex-story-panel-extra-2 {
  position: absolute;
  bottom: 20px;
  right: 10px;
  width: 25%;   /* relative to parent width */
  max-width: 80px; /* cap so it doesn’t get huge */
  height: auto;
  pointer-events: none; /* don't block hover */
}
/* dim all panels when gallery is hovered */
.jex-story-gallery-container:hover .jex-story-inner {
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}
/* restore full opacity on the hovered one */
.jex-story-gallery-container .jex-story-inner:hover {
  opacity: 1;
  transform: scale(1.3);
  z-index: 999;
}
/* ------------------ cat early and final concepts -------------- */
.cat-row {
  display: flex;
  justify-content: space-around; /* equal gaps between items */
  align-items: flex-start;       /* align top edges */
  padding: 0;
  gap: 2rem;
}
/* Each image + description container */
.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* center description under image */
  gap: 0.5rem;         /* space between image and description */
  width: 35%;
}
/* Images */
.cat-item img {
  width: 100%; /* responsive size, adjust as needed */
  height: auto;
  transform: rotateY(10deg);
}

@keyframes swing {
  0%   { transform: rotate(-60deg); }
  50%  { transform: rotate(20deg); }
  100% { transform: rotate(-60deg); }
}

.rotating.floating {
  animation: swing 20s ease-in-out infinite;
  transform-origin: center center; /* pivot in the middle */
}
/* Responsive tweaks */
@media (max-width: 900px) {
  .jex-story-panel {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
@media (max-width: 600px) {
  .jex-story-panel {
    flex: 2 2 100%;
    max-width: 50%;
  }
  .jex-story-inner img {
    filter: none;
  }
}
.jex-trailer-container {
  position: absolute;
  position: fixed;
  display: block;
  top: 150px;
  right: calc(50% - 800px/2 - 360px); /* 800 = content-block width, 250 = menu width */
  width: 300px; /* adjust the width as needed */ 
  height: 250px; /* adjust the height as needed */
  text-align: center;
  cursor: pointer; /* add a pointer cursor to indicate it's a link */
  animation: float 3.5s ease-in-out infinite;
  z-index: 2;
  padding-top: 0px;
  margin: 0 auto;
}
.jex-trailer-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease-in-out;
}
.jex-trailer-container .normal-state, .jex-trailer-container:hover .hover-state { display: block; }
.jex-trailer-container .hover-state, .jex-trailer-container:hover .normal-state { display: none; }
.jex-trailer-container a {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
@media screen and (max-width: 1500px) {
  .jex-trailer-container {
		position: relative;
		display: block;
		top: 0;
		right: 0;
		width: 300px; /* adjust the width as needed */ 
		height: 250px; /* adjust the height as needed */
		text-align: center;
		cursor: pointer; /* add a pointer cursor to indicate it's a link */
		animation: float 3.5s ease-in-out infinite;
		z-index: 2;
		padding-top: 0px;
		margin: 0 auto;
	}
}

/*
      ███        ██        ████████     █████████       ██        ███        ███       
      ███       ██ ██      ███    ███   ███            ██ ██      ███        ███       
      ███      ██  ███     ███    ███   ███           ██  ███     ███        ███       
      ███     ███   ███    ██ ███       ███████      ███   ███    ███        ███       
      ███    ███████ ███   ███  ███     ███         ███████ ███   ███        ███       
 ██   ███   ███       ███  ███    ███   ███        ███       ███  ███        ███       
  █████    ███         ███ ███      ███ ███       ███         ███ ██████████ ██████████
*/      
.content-block-jarfall{
  padding: 0;
}                                                                            
.content-block-child{
  width: 100%;
  height: auto;
  background-color: var(--color-content-block-bg);
  padding: 0px 40px 0px 40px;
  box-sizing: border-box;
  margin: 0 auto;
}
.jar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 10px;                             /* spacing between images */
  margin-top: 10px;
}
.jar-row img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* ensures images fit nicely */
}
@media (max-width: 600px) {
  .jar-row {
    grid-template-columns: 1fr; /* stack on mobile */
  }
}
.play-wrapper {
  width: 200px;          /* main button width */
  margin: 0 auto;        /* center container */
  text-align: center;    /* center contents */
}

.playOnItch {
  display: block;
  transition: transform 0.15s ease-in-out;
  position: relative; /* needed for z-index to work */
  z-index: 2;         /* on top */
}

.playOnItch:hover {
  transform: translateY(-8px);
}

.button-img {
  width: 100%;
  height: auto;
  display: block;
}

.shadow-wrapper {
  margin-top: 0px;      /* tweak to move closer or farther */
}

.shadow {
  width: 220px;
  display: block;
  position: relative; /* needed for z-index */
  left: 50%;
  transform: translateX(-50%);
  margin-top: -3px;  /* spacing from button */
  z-index: 1;         /* below button */
  pointer-events: none;
}

#Jarfall a:visited { color: #3a3a3a; }
#Jarfall a:hover { color: #3a3a3a; }



/*
 ███████████       ██        █████     ███        █████████ ███████████
     ███          ██ ██      ██  ███   ███        ███           ███    
     ███         ██  ███     ██   ███  ███        ███           ███    
     ███        ███   ███    ██████    ███        ███████       ███    
     ███       ███████ ███   ██    ███ ███        ███           ███    
     ███      ███       ███  ██     ██ ███        ███           ███    
     ███     ███         ███ ████ ███  ██████████ █████████     ███    
*/                                                                   

@media screen and (max-width: 1400px) {
  .menu-container {
    left: 0;                /* stick to left edge */
    width: 250px;           /* fixed menu width */
    padding-left: 20px;     /* optional */
  }
  .menu-link:hover, .menu-link a:hover {
    color: var(--color-menu-link);
    background-color: transparent;
  }

  .content-block-wrapper {
    margin-left: 250px;     /* push wrapper to the right of menu */
    width: calc(100% - 250px); /* fill remaining width */
  }

  .content-block-container {
    width: 100%;           /* let it size naturally inside wrapper */
    max-width: 800px;      /* but don’t exceed your content width */
    margin: 0 auto;        /* stay centered in wrapper */
  }

  .jex-trailer-container {
		position: relative;
		display: block;
		top: 0;
		right: 0;
		width: 300px; /* adjust the width as needed */ 
		height: 250px; /* adjust the height as needed */
		text-align: center;
		cursor: pointer; /* add a pointer cursor to indicate it's a link */
		animation: float 3.5s ease-in-out infinite;
		z-index: 2;
		padding-top: 0px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 1400px) and (min-width: 751px) {
  .featured-project img {
    display: block;
    width: 100%;
    height: auto; /* fallback */
    max-height: 30vh;          /* each project takes up at most ~30% of viewport */
    min-height: 50px;         /* never shrink too small */
    object-fit: cover;
    border-radius: inherit;
    transition: all 0.1s ease-in-out;
  }
  /* remove padding here for tablet - on main page the featured images are too small due to padding */
  /* CANT DO THAT SIRE, WE NEED PADDING FOR THE PROJECT'S CONTENT */
  .content-block.with-padding {
    padding: 0px 35px 0px 35px;
  }
  .menu-link, .menu-link a, .menu-link-active a, .menu-link.highlight a{
    font-size: 12pt;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0 1px;
    margin-left: -5px; 
    border-radius: 3px;
  }
  .social-text, .social-text a {
    font-size: 12pt;
  }
  
} 


/*
 ███       ███     █████      █████     ███ ███        █████████
 ██ ███   ████   ███    ███   ██  ███   ███ ███        ███      
 ███ ███ █ ███ ███        ███ ██   ███  ███ ███        ███      
 ███  ███  ███ ███        ███ ██████    ███ ███        ███████  
 ███   ██  ███ ███        ███ ██    ███ ███ ███        ███      
 ███       ███   ███     ███  ██     ██ ███ ███        ███      
 ███       ███     █████      ████ ███  ███ ██████████ █████████
*/

@media screen and (max-width: 750px) {
  
	.menu-container {
    display: none;
  }
  .content-block-wrapper {
    margin: 0; 
    padding: 0;
    width: 100%; /* fill remaining width */
  }
  .content-block-container {
    width: 100%;           /* let it size naturally inside wrapper */
    margin: 0;
    padding: 0;
    margin: 0 auto;        /* stay centered in wrapper */
  }.content-block.with-padding {
    padding: 0px 25px 0px 25px;
  }
  .logo-container{
		display: none;
	}
	
	.description-container 	{ display: none;}


  /* -------------------------------- ----------------------------- HOME AND FEATURED PROJECTS */
  /* Added spacers on top and bottom for the home page featured projects */
  .mobile-spacer-home-top {
		display: block;
		height: 3vh; /* adjust as needed */
	}
	.mobile-spacer-home-bottom {
		display: block;
		height: 7vh; /* gives extra padding after last project */
	}

  /* The logo and gif used only on mobile */
  .logo-container-mobile{
    margin: 0; padding: 0;
		display: block;
		background-color: transparent;
		background: none;
		text-align: center;
		margin: 0px;
	}
	.description-container-mobile{
    margin: 0; padding: 0;
		display: block;
		margin: 0px;
		background-color: transparent;
		background: none;
		text-align: center;
    margin-bottom: 4vh;
	}
  .featured-projects-wrapper {
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* center vertically in viewport */
    align-items: center;
    gap: 2vh;
    
    padding: 0px;             /* breathing room on small screens */
    box-sizing: border-box;
  }
  .mobile-extra-projects{
    display: block;
  }
  .featured-project {
    flex-direction: column; /* stack content vertically */
	  margin-bottom: 0px;
  }
  .featured-project img {
    max-height: none;       /* remove desktop max-height */
    min-height: auto;
    border-radius: 8px 8px 0px 0px; /* top corners only */
  }
  .featured-project:hover img {
    transform: scale(1);
    transition: none;
  }
  .featured-project:hover .overlay-text-container {
    opacity: 0;               /* hode hover overlay on mobile */
  }
  /*
  .overlay-text-container {
    position: relative;      /* no absolute positioning 
    bottom: auto;
    width: 100%;
    padding: 10px 15px;
    border-radius: 0 0 8px 8px; /* bottom corners rounded 
    background: rgba(0, 0, 0, 0.9); /* semi-transparent background
    opacity: 1 !important;   /* always visible
    pointer-events: auto;
    backdrop-filter: none;    /* optional: remove blur on mobile
    padding-left: 15px;       /* remove extra offset
  }
  .overlay-text-title {
    font-size: 14pt;    /* slightly bigger than desc
    font-weight: 600;
    margin: 4px 0 2px 0;
    text-align: left;
  }
  .overlay-text-role {
    font-size: 10pt;    /* a bit smaller than desc
    font-weight: 500;
    padding: 4px 8px 2px 8px;
    margin: 4px 0 6px 0;
    text-align: right;  /* role badge stays on the right
  }
  .overlay-text-desc {
    font-size: 10pt;    /* standard readable size
    font-weight: 400;
    margin: 2px 0;
    text-align: left;
	  padding: 0px;
	  opacity: 0.6;
	  display: block;
	  width: 90%;
    text-wrap: balance;
  }
  .overlay-text-platform {
    text-align: left;
    font-size: 10pt;
    padding: 2px 0px;
    margin-top: 2px;
    margin-bottom: 5px;
	  opacity: 0.6;
	  padding: 0px;
	  display: block;
	  width: 90%;
  }
  */
  .socials-mobile-container {
    display: block;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    margin-bottom: 50px;
  }
  .mobile-social{
    display: flex;  
    flex-wrap: nowrap; 
    flex-direction: row;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: auto; 
    margin-top: 5px;
  }
  .mobile-social-icon{
    display: flex; 
    flex-wrap: nowrap;
    width: 35px;
    height: 35px; 
    float: left;
  }
  .mobile-social-text{
    display: flex;
    flex-wrap: nowrap;
    font-size: 12pt;
    line-height: 35px;
    vertical-align: middle;
    margin-left: 10px;

    font-weight: var(--font-menu-link-weight);
    font-family: var(--font-menu-link);
    color: white;
  }
  .mobile-social-text.link{
    user-select: none;
    text-decoration: underline;
  }
  .mobile-social-text.link:hover{
    text-decoration: underline;
}
  /* -------------------------- HAMBURGER BUTTON -------------------------- */
  .hamburger-button {
    position: fixed !important;
    bottom: 15px;   /* menu at bottom */
    right: 15px;
    width: 48px;
    height: 48px;
    background-color: #11111180;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11; /* above scroll-to-top */
    
    background-color: rgba(0, 0, 0, 0.55); /* dark translucent background */
    backdrop-filter: blur(10px);          /* glass effect */
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.116); /* subtle light border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); /* soft shadow for depth */
  }
  /* Hamburger icon */
  .hamburger-icon {
    width: 50%;
    height: 50%;
    background-image: url('img/menu-icon-open.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
  }
  /* Change icon when active */
  .hamburger-button.active .hamburger-icon {
    background-image: url('img/menu-icon-close.svg');
  }
  .hamburger-button img {
    width: 24px;
    height: 24px;
    display: none;
  }

  .hamburger-button .icon-open {
    display: block;
  }

  .hamburger-button.active .icon-open {
    display: none;
  }

  .hamburger-button.active .icon-close {
    display: block;
  }

  /* ------------------------ SCROLL TO TOP BUTTON ------------------------ */
  .scroll-to-top-button {
    position: fixed;
    bottom: 75px;           /* above menu button */
    right: 15px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;     /* slightly more modern rounded corners */
    
    background-color: rgba(0, 0, 0, 0.55); /* dark translucent background */
    backdrop-filter: blur(10px);          /* glass effect */
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.116); /* subtle light border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); /* soft shadow for depth */

    cursor: pointer;
    opacity: 0;
  }
  .scroll-to-top-button:hover { /* this disables hover effect used on desktop */
    width: 48px;
    height: 48px;
    bottom: 75px;
    right: 15px;
  }
  .scroll-to-top-button.shown {
    opacity: 1;
  }

  .scroll-to-top-button img {
    width: 24px;
    height: 24px;
  }
  /* MOBILE MENU BASE */
  .mobile-menu-container {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0e0e0ee7;
    z-index: 10;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
  }

  /* INNER MENU */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0 40px;   /* ✅ add left/right whitespace */
    margin: 30px 0 50px 0;
    box-sizing: border-box;

  }

  /* Menu links */
  .mobile-menu-link {
    width: 100%; /* ✅ ensures full width */
  }

  .mobile-menu-link a {
    display: block;
    width: 100%;
    padding: 5px 0px;
    margin: 0px 0;
    font-family: var(--font-menu-link);
    font-size: 13pt;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    background-color: rgba(44, 44, 44, 0.5);
    border-radius: 0; /* flat edges, like full-width buttons */
    text-align: left;
    line-height: 1.4em;
    box-sizing: border-box;
    border-radius: 0px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.048);
  }

  /* Disabled state */
  .mobile-menu-link.disabled a {
    color: #ffffff63;
    pointer-events: none;
  }

  /* Active link */
  .mobile-menu-link.active a {
    font-weight: 600;
  }

  /* Category subtitles */
  .mobile-menu-link.category a {
    display: block;
    padding: 0 0px;
    margin: 20px 0 5px 0;
    margin-top: 40px;
    background: transparent;
    font-size: 11pt;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    pointer-events: none; /* not clickable */
    border: none;
  }

}




.content-block-wrapper.disable-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}