@font-face {font-family: 'Termina-Regular'; src:url(fonts/termina-regular.woff2);}@font-face {font-family: 'Termina-Medium'; src:url(fonts/termina-medium.woff2);}

html {box-sizing: border-box; font-size: 1.125rem;}

button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; line-height: inherit; -webkit-appearance: none; appearance: none;}

button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;}

body {background-color: #111;overflow-x: hidden;}
.container1 {display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; margin: 0;}
canvas {background-color: black; width: 90%; height: auto; display: block; z-index: 0;}
@media (orientation: portrait) {
canvas {width: 98%; margin-bottom: 5em;}
}


.arrows {visibility: hidden; opacity: 0; pointer-events: none; width: 100%;  height: auto;  object-fit: contain; z-index: 25; position: relative;}

.arrows.active { pointer-events: none; visibility: visible; opacity: 0; }

#left, #right { position: fixed; z-index: 25; pointer-events: auto; top: 55vh; width: 3.5em;  height: auto;}

#left, #right {background-color: rgba(242, 244, 244, 0.8);}

#left {left: 0.25em; border-radius: 25px; padding-top: 0.5em; padding-left: 0.5em; padding-right: 0.5em;}

#right {right: 0.25em; border-radius: 25px; padding-top: 0.5em; padding-left: 0.5em; padding-right: 0.5em;}

.arrowIMG { width: 100%; height: auto; object-fit: contain; min-width: 0; min-height: 0;}
.arrowsUL > a {text-decoration-line: none;}

/* portrait version */ 
@media (orientation: portrait) {
#left {position: fixed; left: 0.5em; top: 50vh; z-index: 25; width: 3em;}
#right {position: fixed; right: 0.5em; top: 50vh; z-index: 25; width: 3em;}}
/* mobile version */
@media (max-width: 500px) { 
#left {position: fixed; left: 0.5em; top: 60vh; }
#right {position: fixed; right: 0.5em; top: 60vh; }
#right, #left {width: 2.25em;}} 

/* Menu Image and Menu */

#svg5 svg {
    width: 100%;
    height: 100%;
    display: block;
}

#container1id {transition: filter 1.5s cubic-bezier(0, 0, 0.9, 1), opacity 1.5s cubic-bezier(0, 0.7, 0.7, 1);}
.blur {opacity: 0.5; filter: grayscale(100%) blur(4px);}

.menuImageC {position: fixed; top: 2em; right: 3em; opacity: 0; pointer-events: none; width: 6.5em; height: 10em; z-index: 21; cursor: pointer;
-webkit-tap-highlight-color: transparent; border: 3px solid white; border-radius: 15px; transition: opacity 0.5s linear; background-color: black; display: flex; justify-content: center; align-items: center; contain: layout style paint;}

#svg5 {width: 90%; height: auto; object-fit: contain;}

.menuImageC.active {pointer-events: auto; opacity: 1;}

.menuC1 {display: flex;
position: fixed; top: 0; width: 100vw; height: 100vh;
overflow-y: visible;
z-index: 20;
pointer-events: none;
justify-content: center; align-items: center;
contain: layout style paint;}

.menuC2 {display: flex; flex-flow: column nowrap;
  width: max-content; max-height: 100vh;
  overflow-y: auto;
  opacity: 0; pointer-events: none; z-index: 20; transition: opacity 0.75s cubic-bezier(0.8, 0.9, 1, 1); border: 8px solid white; border-radius: 42px; background-color: black; padding: 1em;}

#menuLogoC {width: 94%; height: auto; margin-block-start: 1em; margin-block-end: 0; margin-left: auto; margin-right: auto;}

.MtextC {margin-top: 1.5em; margin-left: 1em; padding-bottom: 1.5em; padding-right: 2em;}

div.menuC2 p {margin-block-start: 0.25em; margin-block-end: 0.25em; font-family: 'Termina-Medium'; font-size: clamp(14px, 1.25vw + 0.5rem, 40px);}
div.menuC2 p:nth-child(1) {margin-block-start: 0em;}

#menuLogo {width: 100%; height: auto; object-fit: contain;}

#menuLogo [id^="line"] {
  fill: rgb(241, 242, 242);}

.menuC2.active {pointer-events: auto; opacity: 1;}

#menuCurrent {font-weight: bold; color: rgb(235, 108, 8); margin-block-start: 0; margin-block-end: 0; margin-top: 0; margin-bottom: 0; font-size: clamp(14px, 1.25vw + 0.5rem, 40px); line-height: 1.7;}
a.menuText {font-weight: bold; font-size: clamp(14px, 1.1vw + 0.5rem, 40px); color: rgb(241, 242, 242); }
a.menuText {margin-block-start: 0; margin-block-end: 0; margin-top: 0; margin-bottom: 0;}
div.menuC2 p {margin-block-start: 0.25em; margin-block-end: 0.25em; font-family: 'Termina-Medium';}

/* portrait version */
@media (orientation: portrait) {
.menuImageC {top: 2em; right: 3em; width: 4.5em; height: 7em}
.menuC1 {padding-bottom: 4em;}
#menuCurrent {font-size: clamp(14px, 1.25vw + 0.75rem, 40px);}
a.menuText {font-size: clamp(14px, 1.1vw + 0.75rem, 40px); }}
/* test mobile */
@media (max-width: 550px) { 
.menuImageC {top: 1em; right: 1em; width: 4em; height: 6em;}
.menuC1 {justify-content: center; align-items: center; padding-bottom: 4em;}
.MtextC {margin-top: 1em; margin-left: 0em; padding-bottom: 1em; padding-right: 0em; padding-left: 0.3em;}
div.menuC2 p {margin-block-start: 0.5em; margin-block-end: 0.5em;}
#menuLogoC {width: 98%; margin-left: 0em;} }

.link {color: white !important;}

#cls-2line {fill: rgb(235, 108, 8);}
#menuCurrent {color: rgb(235, 108, 8);}

/* Add this to cssAni.css */
@keyframes TWO {
  0%, 76%, 100% { fill: #fff; }
  24%, 4% { fill: gray; }
  28%, 48% { fill: #639; }
  52%, 72% { fill: #b22222; }
}

/* Target the element inside the SVG (usually has ID 'two' or class 'AHmenuI') */
#two {
  animation: TWO 30s linear 9s infinite backwards;
}

.AHmenuI {fill: rgb(235, 108, 8); animation: ONE 30s linear 8s infinite;}

  @keyframes ONE {
0% {fill: rgb(235, 108, 8);}
4% {fill: rgb(0, 128, 175);}
24% {fill: rgb(0, 128, 175);}
28% {fill:  rgb(58, 128, 26);}
48% {fill:  rgb(58, 128, 26);}
52% {fill: white;}
72% {fill: white;}
76% {fill: rgb(235, 108, 8);}
100% {fill: rgb(235, 108, 8);}
}