@font-face {
  font-family: stormfaze;
  src: url(../../public/res/fonts/stormfaze.ttf),
    url(../res/fonts/stormfaze.ttf);
}

@font-face {
  font-family: wargames;
  src: url(../../public/res/fonts/wargames.ttf);
}

html,
body {
  color: white;
  background-color: #95003d;
  font-family: "stormfaze";
  font-size: 14px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100dvh;
  text-align: center;

  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.575);

  cursor: url(../res/icons/default.png) 0 0, auto;
}

div {
  cursor: url(../res/icons/default.png) 0 0, auto;
}

.meBody {
  font-family: stormfaze;
  cursor: url(../res/icons/default.png) 0 0, auto;
}

.noselection {
  -webkit-touch-callout: none;
  /* Safari */
  user-select: none;
  /* standard syntax */
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
}

*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* This one works! */
*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(102, 102, 102);
  border-radius: 8px;
}

body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 9px;
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6);
}


textarea:focus,
input:focus {
  outline: none;
}

a {
  font-family: stormfaze;
  color: #0080ff;
}

button {
  font-family: stormfaze;
}

iframe {
  border: none;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#matrix-editor {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
}

.debugBox {
  position: absolute;
  left: 5px;
  bottom: 0;
  font-size: 12px;
  width: 200px;
  height: 15px;
  background-color: black;
  color: lime;
}

.textEditor {
  font-size: 10px;
  width: 100%;
  max-width: 850px !important;
  min-width: 550px !important;
}

.header {
  text-shadow: 0px 0px 14px #ffd52e;
  background-color: black;
  color: rgb(255, 255, 255);
}

textarea {
  -webkit-box-shadow: inset 0px 0px 22px 2px rgba(0, 255, 30, 1);
  -moz-box-shadow: inset 0px 0px 22px 2px rgba(0, 255, 30, 1);
  box-shadow: inset 0px 0px 22px 1px rgba(0, 255, 30, 1);
  background-color: black;
  color: lime;
}

.textureCanvas2d {
  display: none;
  position: absolute;
  left: -3000px;
  top: 0px;
  width: 512px;
  height: 512px;
}

/** Style for UI system hud controls */

.matrixTagHolder {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  background-color: black;
  color: #0080ff;
  font-family: stormfaze;
}

span {
  width: 100px;
}

.mLightInput {
  width: 150px;
  font-size: 26px;
}

.mLightCom {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  border: solid #0c2540 3px;
}

.timeLine {
  display: flex;
  position: absolute;
  left: 5%;
  top: 85%;
  width: 90%;
  flex-direction: column;
}


.timeLineSlider {
  display: flex;
  flex-direction: row;
}

.timeLineSlider,
p {
  background: rgba(12, 122, 22, 0.5);
  width: 100%;
  margin: 5px 5px 5px 5px;
}

/* For animation Line */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: #00ffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 24px;
  background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
  border: 2px solid #00ffff;
  border-radius: 12px;
  box-shadow: 0 0 10px #00ffff44, 0 0 20px #00ffff22 inset;
  /* cursor: pointer; */
  transition: all 0.25s ease-in-out;
  display: inline-block;
  text-align: center;
}

.btn:hover {
  background: #00ffff78;
  box-shadow: 0 0 20px #00ffffaa, 0 0 30px #00ffff55 inset;
  color: #ffffff;
  transform: scale(1.05);
}

.btn3 {}

.btn3:hover {
  background: #5d5d5d81;
  box-shadow: 0 0 20px #00ffffaa, 0 0 30px #00ffff55 inset;
  color: #ffffff;
  transform: scale(1.02);
}

.btn span::before {
  content: '▶ ';
  color: #00ffffaa;
}

.fancy-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #00ffff;
  letter-spacing: 1px;
  text-shadow: 0 0 4px #00ffffaa;
  padding: 2px 6px;
  background-color: #111111cc;
  border: 1px solid #00ffff66;
  border-radius: 6px;
  box-shadow: 0 0 6px #00ffff33;
  display: inline-block;
  user-select: none;
}

.fancy-title {
  width: 100%;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #00ffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  text-shadow: 0 0 4px #00ffffaa, 0 0 8px #00ffff55;
  border: none;
  padding: 8px 16px;
  display: inline-block;
  user-select: none;
}

.btn2 {
  cursor: pointer;
  background: #d93434;
  background-image: -webkit-linear-gradient(top, orangered, #0a027a);
  background-image: -moz-linear-gradient(top, orangered, #0a027a);
  background-image: -ms-linear-gradient(top, orangered, #0a027a);
  background-image: -o-linear-gradient(top, orangered, #0a027a);
  background-image: linear-gradient(to bottom, orangered, #0a027a);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 0px 0px 14px #ffd52e;
  -webkit-box-shadow: 0px 1px 26px #666666;
  -moz-box-shadow: 0px 1px 26px #666666;
  box-shadow: 0px 1px 26px #666666;
  color: #ffffff;
  font-size: 13px;
  padding: 4px 8px 4px 8px;
  text-decoration: none;
}

.btn2:hover {
  background: #0a027a;
  background-image: -webkit-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -moz-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -ms-linear-gradient(top, #0a027a, #6e34d9);
  background-image: -o-linear-gradient(top, #0a027a, #6e34d9);
  background-image: linear-gradient(to bottom, #0a027a, #6e34d9);
  text-decoration: none;
}

#blocker {
  z-index: 2;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;

  background: linear-gradient(291deg, #2960bb, #b22710, #b22710);
  background-size: 600% 600%;

  -webkit-animation: bganim 10s ease infinite;
  -moz-animation: bganim 10s ease infinite;
  -o-animation: bganim 10s ease infinite;
  animation: bganim 10s ease infinite;
}

#messageBox {
  font-size: large;
  padding: 10%;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}

#msgBox {
  z-index: 10;
  text-shadow: 0px 4px 4px #282828;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  background: rgb(2, 0, 36);
  /* background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 81, 121, 0.8463760504201681) 34%, rgba(0, 212, 255, 1) 100%); */
}

.msg-box {
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  translate: -50%;
  border-radius: 6px !important;
  font-size: 15px !important;
  width: 300px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;

  &.error {
    /* background-color: rgb(93, 4, 5); */
    color: rgb(255, 0, 30);
  }

  &.success {
    /* background-color: rgb(220, 14, 14); */
    color: rgb(32, 255, 84);
    text-align: center;
    margin-left: -150px;
    z-index: 20;
  }
}

.canPlay {
  border: solid limegreen 1px;
}

.canNotPlay {
  border: unset;
}


.myTheme1 {
  background: rgb(235, 1, 110);
  background: radial-gradient(circle, rgb(255, 73, 179) 7%, rgba(0, 144, 224, 0.9332107843137255) 57%, rgba(0, 212, 255, 1) 85%);
}

.stroke {

  text-shadow: 0px 4px 4px #282828;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.animate1 {
  text-shadow: 0px 4px 4px #282828;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;

  background: linear-gradient(270deg, #8e8e8e, #65757a);
  background-size: 50% 50%;

  -webkit-animation: AnimationName 2s ease infinite;
  -moz-animation: AnimationName 2s ease infinite;
  animation: AnimationName 2s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}


.bganim1 {
  background: linear-gradient(291deg, #2960bb, #b22710, #b22710);
  background-size: 600% 600%;

  -webkit-animation: bganim 10s ease infinite;
  -moz-animation: bganim 10s ease infinite;
  -o-animation: bganim 10s ease infinite;
  animation: bganim 10s ease infinite;
}

@-webkit-keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

@-moz-keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

@-o-keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

@keyframes bganim {
  0% {
    background-position: 0% 45%
  }

  50% {
    background-position: 100% 56%
  }

  100% {
    background-position: 0% 45%
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  /* You can adjust */
  height: 32px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* Force span to fill the label exactly */
.sliderSwitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #111;
  border-radius: 34px;
  border: 2px solid #00ffee;
  box-shadow: 0 0 10px #00ffee55;
  transition: all 0.4s ease;
  overflow: hidden;
  z-index: 1;
}

/* The circle inside the slider */
.sliderSwitch::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 4px;
  bottom: 4px;
  background-color: #00bbff;
  border-radius: 50%;
  transition: transform 0.4s ease;
  z-index: 2;
  box-shadow: 0 0 10px #00bbff;
}

/* ON state */
.switch input:checked+.sliderSwitch {
  background-color: #002233;
  border-color: #00ffee;
  box-shadow: 0 0 12px #00ffee;
}

.switch input:checked+.sliderSwitch::before {
  transform: translateX(28px);
  background-color: #00ffee;
  box-shadow: 0 0 10px #00ffee;
}

select {
  appearance: none;
  /* Remove default arrow */
  background-color: #111;
  color: #00ffee;
  border: 2px solid #00ffee55;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 16px;
  font-family: 'Orbitron', sans-serif;
  /* Optional futuristic font */
  box-shadow: 0 0 8px #00ffee33;
  outline: none;
  transition: 0.3s ease;
  cursor: pointer;
}

select:hover {
  border-color: #00ffee;
  box-shadow: 0 0 12px #00ffeeaa;
}

select:focus {
  border-color: #00ff88;
  box-shadow: 0 0 16px #00ff88aa;
}

option {
  background-color: #111;
  color: #00ffee;
  padding: 6px;
  font-family: 'Orbitron', sans-serif;
}

#jambTable {
  position: absolute;
  display: flex;
  top: 15%;
  left: 2%;
  width: 370px;
  transform: scale(1);
  /* translate(-50%, -50%) */
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #0ff;
  padding: 15px;
  border-radius: 12px;
  transform-origin: center center;
  transition: transform 0.4s ease, opacity 0.3s ease;
  font-family: 'Orbitron', sans-serif;
}

/* Visible state */
#jambTable.show {
  display: flex;
  transform: scale(1);
  /* translate(-50%, -50%) */
  opacity: 1;
}

/* Hidden state */
#jambTable.hide {
  transform: scale(0);
  /* translate(-50%, -50%) */
  opacity: 0;
  pointer-events: none;
}

#dragHandler {
  width: 100%;
  height: 20px;
  background: #333;
  cursor: move;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0.8;
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

#matrix-net {
  position: absolute;
  right: 0;
  display: none;
  overflow: hidden;
  top: 0;
  height: 100%;
  width: 30vw;
  font-family: stormfaze;
  background-color: crimson;
}

@-webkit-keyframes showByVetical {
  0% {
    background-color: rgba(155, 101, 10, 0.95);
    height: 75px;
  }

  50% {
    background-color: rgba(238, 65, 13, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgb(200, 54, 9);
    height: 100vh;
    opacity: 1;
  }
}

/* Standard syntax */
@keyframes showByVetical {
  0% {
    background-color: rgba(155, 101, 10, 0.95);
    height: 75px;
  }

  50% {
    background-color: rgba(224, 64, 43, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgb(200, 54, 9);
    height: 100vh;
    opacity: 1;
  }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hideByVetical {
  0% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 100vh;
  }

  50% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgba(0, 0, 0, 0.95);
    height: 35px;
    opacity: 0.2;
  }
}

/* Standard syntax */
@keyframes hideByVetical {
  0% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 100vh;
  }

  50% {
    background-color: rgba(255, 166, 11, 0.95);
    height: 50vh;
    opacity: 0.5;
  }

  100% {
    background-color: rgba(0, 0, 0, 0.95);
    height: 40px;
    opacity: 0.2;
  }
}

.show-by-vertical {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: showByVetical;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: showByVetical;
  animation-duration: 1.2s;
}

.hide-by-vertical {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: hideByVetical;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: hideByVetical;
  animation-duration: 1.2s;
}

/*
new dom effect from

*/

.buttonMatrix {
  all: unset;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}

.buttonMatrix::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: 10px;
  background: linear-gradient(-135deg,
      rgba(5, 5, 5, 0.5),
      transparent 20%,
      transparent 100%);
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
}

.buttonMatrix .button-outer {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  transition: box-shadow 300ms ease;
  will-change: box-shadow;
  box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
    0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}

.buttonMatrix:hover .button-outer {
  box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
}

.button-inner {
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  padding: 1em 1em;
  background-image: linear-gradient(135deg,
      rgba(230, 230, 230, 1),
      rgba(180, 180, 180, 1));
  transition: box-shadow 300ms ease, clip-path 250ms ease,
    background-image 250ms ease, transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 7px);
  box-shadow:
    /* 1 */
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 2 */
    -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    /* 3 */
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 4 */
    0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    /* 5 */
    0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
    /* 6 */
    0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */
    -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}

.buttonMatrix:hover .button-inner {
  clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 8px);
  box-shadow:
    /* 1 */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    /* 2 */
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    /* 3 */
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    /* 4 */
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    /* 5 */
    0 0 0 0 inset rgba(255, 255, 255, 1),
    /* 6 */
    0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */
    -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}

.buttonMatrix .button-inner span {
  position: relative;
  z-index: 4;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(135deg,
      rgba(25, 25, 25, 1),
      rgba(75, 75, 75, 1));
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 250ms ease;
  /* display: block; */
  will-change: transform;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.buttonMatrix:hover .button-inner span {
  transform: scale(0.975);
}

.buttonMatrix:active .button-inner {
  transform: scale(0.975);
}

.loader {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  background-image: url('../res/textures/rpg/logo.png');
  vertical-align: middle;
  flex-flow: column-reverse;
  text-align: center;
  align-items: anchor-center;
}

.progress-container {
  width: 80%;
  max-width: 600px;
  opacity: 0.5;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #ff2b2b;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  position: relative;
  margin-bottom: 7%;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff2b2b, #ffcc00, #00ff88);
  background-size: 300% 100%;
  animation: gradientShift 2s infinite linear;
  box-shadow: 0 0 20px #ff0000;
  transition: width 0.2s ease-out;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.counter {
  margin-top: 20px;
  font-size: 24px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #ff0000;
}

.invertoryItem {
  width: 50px;
  height: auto;
}


@-webkit-keyframes showByRight {
  0% {
    /* background-color: rgba(155, 101, 10, 0.95); */
    right: -52%;
  }

  100% {
    /* background-color: rgb(200, 54, 9); */
    right: -4%;
    opacity: 1;
  }
}

/* Standard syntax */
@keyframes showByRight {
  0% {
    /* background-color: rgba(155, 101, 10, 0.95); */
    right: -52%;
  }

  100% {
    /* background-color: rgb(200, 54, 9); */
    right: -4%;
    opacity: 1;
  }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hideByRight {
  0% {
    /* background-color: rgba(255, 166, 11, 0.95); */
    right: -4%;
  }

  100% {
    /* background-color: rgba(0, 0, 0, 0.95); */
    right: -52%;
    opacity: 0.6;
  }
}

/* Standard syntax */
@keyframes hideByRight {
  0% {
    right: -4%;
  }

  100% {
    /* background-color: rgba(0, 0, 0, 0.95); */
    right: -52%;
    opacity: 0.6;
  }
}

.show-by-right {
  -webkit-scrollbar {
    width: 25px;
  }

  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: showByRight;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: showByRight;
  animation-duration: 1.2s;
}

.hide-by-right {
  -webkit-scrollbar {
    width: 25px;
  }

  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: hideByRight;
  -webkit-animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: hideByRight;
  animation-duration: 1.2s;
}

.vertical-text {
  writing-mode: vertical-lr;
  /* or vertical-lr */
  text-orientation: upright;
}


.itemDOM {
  z-index: 2;
  width: 100px;
  background: black;
  height: 100%;

  transition: transform 0.3s ease;
  transform-origin: center center;

}

.itemDOM:hover {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0) !important;
  transform: scale(1.10);
}