* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

:root {
  /*vars*/
  /* titles */
  --title-size: clamp(4rem, 5vw, 6rem);
  --sub-title-size: clamp(1rem, 2vw, 2.5rem);
  --title-width: 80vw;
  --no-vid-gap: 35vh;
  --video-content-gap: 65vh;
  --video-after-gap: 22vh; /* this should be no more than 100 when added to vid content gap */
  --novideo-content-gap: clamp(90px, 15vh, 150px);
  /* menu */
  --menu-font-size: clamp(0.9rem, 2vw, 1.8rem);
  --submenu-font-size: clamp(0.5rem, 1.4vw, 1rem);
  --submenu-map-font-size: clamp(0.4rem, 1vw, .9rem);

  --menu-font-size-mobile: clamp(1.2rem, 2.4vw, 2rem);
  --submenu-font-size-mobile: clamp(0.7rem, 1.5vw, 1.5rem);
  /* support override below for mobile size */

  --menu-font-colour: rgba(236, 236, 236, 0.7);
  --menu-hover-font-colour: rgba(255, 255, 255, 0.3);
  --menu-selected-font-colour: rgb(254, 255, 254);

  --menu-bg-colour: rgba(0, 0, 0, 0.5);
  --menu-hover-bg-colour: rgba(0, 0, 0, 1);
  --menu-active-bg-colour: rgba(78, 78, 78, 0.314);
  --submenu-fade-bg-colour: linear-gradient(180deg,rgba(0, 0, 0, .5) 0%, rgba(40, 40, 40, 0.314) 15%, rgba(78, 78, 78, 0.314) 33%);

  --arrow-button-size: clamp(50px, 2.5vw, 200px);
  --arrow-size: clamp(15px, 1vw, 100px);
  --arrow-lr-pos: clamp(30px, 3vw, 150px);
  --arrow-colour: #ffffffb6;
  --arrow-button-colour: #ffffff;

  /* content */
  --content-box-max-width: min(85%, 1500px);
  --content-box-min-width: min(75%, 1200px);
  --center-img-width: clamp(400px, 40vw, 1000px);

  /*colours*/
  --bg-grey: #292929;
  --p-color: #000;
  --a-color: #828282;
  --a-visited-color: #2a0d0d;
  --a-hover-color: #ed320e;
  --h1-color: #e7e5e5;
  --h2-color: #a3a3a3;
  --h3-color: #a3a3a3;
  --h4-color: #d3d3d3;
  --h5-color: #a3a3a3;
  --jura-color: #d3d3d3;
  --lore-bg: #2020205d;
  --content-bg: #535353a2;
  --content-gradient: #53535300;

  /* font size */
  --p-size: 0.8em;
  --li-size: 0.8em;
  --h1-size: 1.7em;
  --h2-size: 1.5em;
  --h3-size: 1.4em;
  --h4-size: 1em;
  --h5-size: 0.8em;
  --jura-size: 0.8em;

  /* font family */
  --raleway-font: "Raleway", sans-serif;
  --jura-font: "Jura", sans-serif;
  --bitter-font: "Bitter", serif;
  
  /* cursor */
  --cursor-outer-colour: #ed320e;
  --cursor-inner-colour: #DB0000;
  --cursor-inner-gradient: linear-gradient(135deg, #db0000 0%, #a80000e6 50%, #a8000000 100%);
}

@supports (font-size: 1cqi) {
    :root {
        --menu-font-size-mobile: max(2cqi, 2.6cqw);
        --submenu-font-size-mobile: max(1.5cqi, 1cqw);
    }
}

html, body, button, a, img, div, span, section {
  cursor: none !important;
}

/* background text */
#charCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    opacity: 1;
}

/* mouse cursor */

.cursor {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 1000000;
  overflow: hidden;
}
.cursor-large {
  width: 40px;
  height: 40px;
  border: 1px solid var(--cursor-outer-colour);
  border-radius: 50%;
  pointer-events: none;
}
.cursor-small {
  width: 15px;
  height: 15px;
  background: var(--cursor-inner-colour);
  background: var(--cursor-inner-gradient);
  transform: translate(-60%, -60%);
  clip-path: polygon(-10% -10%, 45% 120%, 120% 45%);
  pointer-events: none;
}

html {
  font-size: 100%;
}

body {
  font-size: 1.6rem;
  font-family: sans-serif;
  color: #000000;
  background: var(--bg-grey);
  cursor: none;
  overflow-x: hidden;
}

section {
  overflow: hidden;
}

/* for fullscreen video */
.full-vid-bg { 
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.full-vid-bg:before {
  content: "";
  background: var(--bg-grey);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.full-vid-bg:after {
  content: "";
	background-image: radial-gradient(#000000 1px, transparent 1.5px), radial-gradient(#000000a3 1.5px, transparent 1.5px);
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
	background-color: #00000000;
	/* background-size: 20px 20px; */
  mask-image: linear-gradient(150deg, rgba(0, 0, 0, 0.4) 30%, transparent 70%);
  -webkit-mask-image: linear-gradient(150deg, rgba(0, 0, 0, 0.4) 30%, transparent 70%);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 1;
}

#video-player {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

#vid-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
}

#vid-placeholder img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: visible;
}

video {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* Buttons n menu */
#menuholder{ 
  position: fixed;
  height: 10%;
  width: 100%;
  top: 10px;
  left: 0px;
  z-index: 250;
}
#menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
  z-index: 300;
}
#menu > button {
	border: none;
	min-width: 120px;
	min-height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--menu-bg-colour);
	color: var(--menu-font-colour);
	transition: background 200ms ease, color 100ms ease;
	/* cursor: none; */
  z-index: 300;
  padding: 5px 15px;
  font-family: var(--jura-font);
  font-size: var(--menu-font-size);
  text-transform: uppercase;
  backdrop-filter: blur(5px);
}
#menu > button:nth-child(1) {
  min-width: 50px;
}
#menu:hover > button {
	background: var(--menu-hover-bg-colour);
	color: var(--menu-hover-font-colour);
}
#menu:hover > button:hover{
	color: var(--menu-selected-font-colour);
}

/* sub menu */

#submenu {
  opacity: 0;
  display: flex;
	flex-wrap: wrap;
	justify-content: center;
  align-items: flex-start;
  z-index: 500;
  top: 100px;
}
#submenu button {
	border: none;
	min-width: 100px;
	min-height: 50px;
	display: none;
	justify-content: center;
	align-items: center;
	background: var(--menu-bg-colour);
	color: var(--menu-font-colour);
	transition: background 200ms ease, color 100ms ease;
	/* cursor: none; */
  z-index: 500;
  padding: 5px 15px;
  font-family: var(--jura-font);
  font-size: var(--submenu-font-size);
  text-transform: uppercase;
  backdrop-filter: blur(5px);
}

#submenu > div > button:nth-child(n+2) {
  text-transform: none;
  padding: 10px 20px;
  min-height: 30px;
  text-shadow: 0 2px 5px rgba(0,0,0,1);
}

#submenu > div > button:nth-child(2) {
  background: var(--submenu-fade-bg-colour);
}

#submenu:hover button {
	background: var(--menu-hover-bg-colour);
	color: var(--menu-hover-font-colour);
}
#submenu:hover button:hover{
	color: var(--menu-selected-font-colour);
}
#submenu button.active{
  background: var(--menu-active-bg-colour);
  color: var(--menu-selected-font-colour);
  text-shadow: 0 2px 5px rgba(0,0,0,1);
}

/* Style the category divs */
#submenu > div {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

/* menu on mobile portrait */
@media (orientation: portrait) {
  #menu,
  #submenu {
    flex-wrap: nowrap;
  }
  
  /* Main menu buttons should fill width equally */
  #menu button {
    flex: 1 1 auto;
    min-width: 50px;
	  min-height: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 5px;
    container-type: size;
    font-size: var(--menu-font-size-mobile);
  }
  #menu > button:nth-child(1) {
  min-width: 50px;
  max-width: 70px;
  }
  
  #submenu div {
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  
  /* Submenu buttons should match their parent div width */
  #submenu button {
    flex: 0 0 auto;
    min-width: 100px;
    min-height: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 5px;
    container-type: size;
    font-size: var(--submenu-font-size-mobile);
  }

  #submenu > div > button:nth-child(n+2) {
    min-height: 50px;
  }
}

/* arrow buttons */

#leftmenu {
    position: fixed;
    height: var(--arrow-button-size);
    width: auto; /* Changed to auto */
    top: 70%;
    left: var(--arrow-lr-pos);
    z-index: 200;
    display: flex;
    flex-direction: row; /* Added flexbox row */
    align-items: center;
    gap: 10px; /* Spacing between button and text */
}

#leftmenu > .larrow {
    position: relative;
    height: var(--arrow-button-size);
    width: var(--arrow-button-size);
}

#leftmenu > .larrow > button {
    border: none;
    display: none;
    justify-content: center;
    align-items: center;
    background: var(--menu-bg-colour);
    color: var(--menu-font-colour);
    transition: background 200ms ease, color 200ms ease;
    height: var(--arrow-button-size);
    width: var(--arrow-button-size);
    border: 10px solid var(--arrow-button-colour);
    border-left: 0;
    border-top: 0;
}

#leftmenu:hover > .larrow > button {
    background: var(--menu-hover-bg-colour);
}

.larrow {
    display: none;
    position: relative;
    transform: rotate(135deg);
}

.larrow span {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-bottom: 5px solid var(--arrow-colour);
    border-right: 5px solid var(--arrow-colour);
    transform: translate(-50%, -50%); 
    margin: calc((var(--arrow-size) / 1.5) * -1);
    animation: animateLArrow 3s infinite;
    pointer-events: none;
    z-index: 300;
}

.llabel {
    text-align: left; /* Left-aligned text for right positioning */
    white-space: nowrap;
    font-family: var(--jura-font);
    font-size: var(--jura-size);
    font-style: italic;
    background-color: var(--lore-bg);
    color: var(--jura-color);
    padding: 10px;
    margin-left: 15px;
    display: none;
}
/* Hide empty label completely */
.llabel:empty {
    display: none;
}

@keyframes animateLArrow {
    0% {
        opacity: 0;
        transform: translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(10px, 10px);
    }
}

#rightmenu {
    position: fixed;
    height: var(--arrow-button-size);
    width: auto; /* Changed to auto */
    top: 70%;
    right: var(--arrow-lr-pos);
    z-index: 200;
    display: flex;
    flex-direction: row; /* Row instead of column */
    align-items: center;
    gap: 10px; /* Spacing between text and button */
}

#rightmenu > .rarrow {
    position: relative;
    height: var(--arrow-button-size);
    width: var(--arrow-button-size);
}

#rightmenu > .rarrow > button {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--menu-bg-colour);
    color: var(--menu-font-colour);
    transition: background 200ms ease, color 200ms ease;
    height: var(--arrow-button-size);
    width: var(--arrow-button-size);
    border: 10px solid var(--arrow-button-colour);
    border-left: 0;
    border-top: 0;
}

#rightmenu:hover > .rarrow > button {
    background: var(--menu-hover-bg-colour);
}

.rarrow {
    display: flex;
    position: relative;
    transform: rotate(315deg);
}

.rarrow span {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-bottom: 5px solid var(--arrow-colour);
    border-right: 5px solid var(--arrow-colour);
    transform: translate(-50%, -50%); 
    margin: calc((var(--arrow-size) / 1.5) * -1);
    animation: animateRArrow 3s infinite;
    pointer-events: none;
    z-index: 300;
}

.rlabel {
    text-align: right;
    white-space: nowrap;
    font-family: var(--jura-font);
    font-size: var(--jura-size);
    font-style: italic;
    background-color: var(--lore-bg);
    color: var(--jura-color);
    padding: 10px;
    margin-right: 15px;
    transition: color 0.3s ease;
    display: inline;
    backdrop-filter: blur(5px);
}

/* Hide empty label completely */
.rlabel:empty {
    display: none;
}

.rlabel.fade-out {
    animation: labelFadeOut 0.3s ease forwards;
}

.rlabel.fade-in {
    animation: labelFadeIn 0.3s ease forwards;
}

@keyframes labelFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(10px);
    }
}

@keyframes labelFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animateRArrow {
    0% {
        opacity: 0;
        transform: translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(10px, 10px);
    }
}

#header {
  position: relative;
  z-index:200;
  max-width: var(--title-width);
  margin: var(--video-content-gap) auto 0px;
  text-align: center;
  
 /* text-shadow: 0 5px 5px rgba(0,0,0,.5); */
}

#novid-header {
  position: relative;
  z-index:200;
  max-width: var(--title-width);
  margin: var(--no-vid-gap) auto 0px;
  text-align: center;
  
 /* text-shadow: 0 5px 5px rgba(0,0,0,.5); */
}

/* chromatic effect text*/
.fx-container {
  left: 0px;
  top: 0px;
  position: relative;
}

.fx-text {
  color: rgb(255, 255, 255);
  position: absolute;
  mix-blend-mode: screen;
  transition: transform 1s;
  font-family: var(--raleway-font);
  font-size: 7em;
  font-size: var(--title-size);
  line-height: .9;
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin-bottom: .5em;
  width: 100%;
}

.fx-text-sub {
  color: rgb(255, 255, 255);
  position: relative;
  transition: transform 1s;
  font-family: var(--jura-font);
  font-size: 1.6em;
  font-size: var(--sub-title-size);
  line-height: .9;
  margin-top: 1.5em;
  margin-top: calc(var(--sub-title-size) * -1);
  margin-bottom: 1vw;
  text-shadow: 0.3vw 0.2vw 0.3vw rgba(0,0,0,1);
}

.fx-text-r {
  animation: shift-right 5s infinite;
  filter: brightness(0) invert(27%) sepia(46%) saturate(3117%) hue-rotate(351deg) brightness(101%) contrast(107%);
}
.fx-text-g {
  filter: brightness(0) invert(62%) sepia(98%) saturate(541%) hue-rotate(33deg) brightness(110%) contrast(113%);
}
.fx-text-b {
  position: relative;
  animation: shift-left 5s infinite;
  filter: brightness(0) invert(14%) sepia(99%) saturate(5425%) hue-rotate(245deg) brightness(110%) contrast(112%);
}

@keyframes shift-right {
  0% {transform: translateX(4px);}
  100% {transform: translateX(4px);}
}

.anim-paused {
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused; 
  animation-play-state:paused;
}

/* content box */

#page {
  position: relative;
  margin: var(--video-after-gap) 0 0 0; /* margin */
  box-sizing: border-box;
  min-height: 100%;
  height: auto !important;
}

.content {
  position: relative;
  z-index: 50;
}

.content .detail-box {
  margin: 0px auto;
  padding: 10px 25px 100px;
  backdrop-filter: blur(10px);
  color: #484848;
  background: var(--content-bg);
  border-radius: 2px;
  transform: translate3d(0px, 0px, 0px);
  min-height: 1200px;
  max-width: var(--content-box-max-width) !important;
  min-width: var(--content-box-min-width);
  -webkit-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
  margin-bottom: 50px;
}

.content .detail-box::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--video-after-gap));
  left: 50%;
  transform: translateX(-50%);
  height: var(--video-after-gap);
  width: 100%;
  background: linear-gradient(to bottom, var(--content-gradient) 0%, var(--content-bg) 80%);
  pointer-events: none;
  clip-path: polygon(0% 0%, 20% 0%, 50% 20%, 80% 0%, 100% 0%, 100% 20%, 50% 50%, 50% 70%, 100% 40%, 100% 100%, 0% 100%, 0% 40%, 50% 70%, 50% 50%, 0% 20%);
}

.content .detail-box img{
  width: 60%;
}

/* text */
.font-raleway {
    font-family: "Raleway", sans-serif;
}

.font-jura {
    font-family: "Jura", sans-serif;
}

.font-bitter {
    font-family: "Bitter", serif;
}
h1 {
  font-family: var(--raleway-font);
  font-size: var(--h1-size);
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: .5em;
  color: var(--h1-color);
}

h2 {
  font-family: var(--raleway-font);
  font-size: var(--h2-size);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: .5em;
  color: var(--h2-color);
}

h3 {
  font-family: var(--raleway-font);
  font-size: var(--h3-size);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: .5em;
  color: var(--h3-color);
}

h4 {
  font-family: var(--jura-font);
  font-size: var(--h4-size);
  color: var(--h4-color);
}
h5 {
  font-family: var(--jura-font);
  font-size: var(--h5-size);
  color: var(--h5-color);
  margin-top: -1.4em;
  margin-bottom: 0;
}

.jura {
  font-family: var(--jura-font);
  font-size: var(--jura-size);
  font-style: italic;
  background-color: var(--lore-bg);
  color: var(--jura-color);
  padding: 10px;
}

p {
  font-family: var(--bitter-font);
  font-size: var(--p-size);
  line-height: 1.4em;
  color: var(--p-color);
  margin: 10px;
}

a:link {
  font-family: var(--bitter-font);
  color: var(--a-color);
}

a:visited {
  font-family: var(--bitter-font);
  color: var(--a-visited-color);
}

a:hover {
  font-family: var(--bitter-font);
  color: var(--a-hover-color);
  /* cursor: none; */
}

li {
  font-family: var(--bitter-font);
  font-size: var(--li-size);
  line-height: 1.4em;
  color: var(--p-color);
  margin: 10px;
}

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

.center-img img {
  max-width: var(--center-img-width);
  height: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* jarallax */

.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  z-index: -100;
}
.jarallax > .img-200 {
  height: 200px;
  transition: height 0.3s ease;
}
.jarallax > .img-200s {
  height: 200px;
  transition: height 0.3s ease;
}
.jarallax > .img-200:hover {
  height: 400px;
}
.jarallax > .img-300 {
  height: 300px;
  transition: height 0.3s ease;
}
.jarallax > .img-300s {
  height: 300px;
  transition: height 0.3s ease;
}
.jarallax > .img-300:hover {
  height: 600px;
}
.jarallax > .img-400 {
  height: 400px;
  transition: height 0.3s ease;
}
.jarallax > .img-400:hover {
  height: 800px;
}
.jarallax > .img-600 {
  height: 600px;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
.jarallax.float-right {
  top: 20px;
  width: 53%;
  margin-left: 20px;
}
.jarallax.float-left {
  width: 33%;
  margin-right: 20px;
}
/* tutorial pages */
.gallery {
  text-align: center;
}

.gallery img {
  display: inline-block;
  max-width: 1200px;
  height: auto;
  vertical-align: middle;
	/* cursor: none; */
}

.gallery p {
  text-align: left;
}

/* youtube videos */
.ytvideo {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  max-width: 900px;
  display: inline-block;
  vertical-align: middle;
}
.ytvideo iframe {
  
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}