@@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'Roboto', sans-serif;
}

  * {
  margin:0;
  padding:0;
  -webkit-user-select:none
  }
  
  :active {
  cursor:pointer
  }
  
  html,body {
  background-color:#111;
  color:#fff;
  font-family:'Roboto', sans-serif;
  font-size:16px;
  overflow:hidden;
  width:100%;
  height:100%;
  margin:0;
  padding:0
  }
  
  .container {
  position:relative;
  width:100%;
  height:100%;
  background-color:#f6ebeb;
  z-index:1
  }
  .leftbar  {
     text-align: center;
    font-family: Monospace;
    position: fixed;
    width: 200px;
    height: 100%;
    background: none;
    transition: width .9s;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x:hidden;
    z-index: 1000;
    padding-right: 2px;
    box-sizing: border-box;
  }
  .rightbar {
    text-align: center;
    font-family: Monospace;
    position: fixed;
    width: 12.3%;
    height: 100%;
    background: none;
    transition: width .9s;
     flex-direction: column;
    justify-content: center; /* Centers items vertically */
    align-items: center; /* Centers items horizontally */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden;
    z-index: 1000;
    padding-right: 2px;
    box-sizing: border-box;
}

  
  ::-webkit-scrollbar {
    width:  15px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
  }
  
  .leftbar {
    left: 0;
  }
  
  .rightbar {
    right: 0;
  }
  
  
  .content {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0
  }
  .contentE, .contentK {
    position: absolute;
    background-color: transparent;
    z-index: 2;
  }
  
  .contentE {
    top: 0;
    left: 12%;
    width: 76%;
    height: 35vh; /* Use viewport height for responsiveness */
  }
  
  .contentK {
    top: 10%;
    left: 14%;
    width: 30vw; /* Use viewport width for responsiveness */
    height: 18.54vh; /* Use viewport height for responsiveness */
  }
  
  
  .contentPath {
  position:absolute;
  top:10%;
  right:3px;
  width:30%;
  height:18.54%;
  background-color:transparent;
  z-index:2
  }
  
  #renderCanvas,#renderCanvas2D {
  width:100%;
  height:100%
  }
  
  h1 {
  font-size:2.5em
  }
  
  h2 {
  font-size:2em
  }
  
  p {
  margin-bottom:10px
  }
  
  a {
  color:#0ff
  }
  
  a:link {
  text-decoration:none
  }
  
  a:visited {
  text-decoration:none
  }
  
  a:hover {
  text-decoration:none;
  color:#077
  }
  
  a:active {
  text-decoration:none;
  color:#077
  }
  
  .sidelink {
  display:block;
  font-size:20px;
  text-align:right;
  margin-bottom:20px
  }
  
  .touchElement,.slider {
  stroke:none;
  fill:#555;
  opacity:0;
  transition:opacity .5s
  }
  
  .default-visible {
  opacity:1;
  transition:opacity 1s
  }
  
  .slider {
  fill:#fff;
  font-family:Monospace;
  font-size:16px
  }
  
  .textElement text {
  text-anchor:middle;
  text-align:center;
  fill:#fff;
  font-family:Monospace;
  font-size:16px;
  color:red;
  opacity:0
  }
  
  .leftbar:hover .touchElement,.leftbar:hover .slider,.rightbar:hover .touchElement,.rightbar:hover .slider,.leftbar:hover .textElement text,.rightbar:hover .textElement text {
  opacity:1;
  transition:opacity 1s
  }
  
  #buttNumOf_m_Minus:hover ~ #info_m {
  opacity:1
  }
  
  #buttNumOf_m_Plus:hover ~ #info_m {
  opacity:1
  }
  #buttNumOf_n_Minus:hover ~ #info_n {
  opacity:1
  }
  
  #buttNumOf_n_Plus:hover ~ #info_n {
  opacity:1
  }
  
  .tetSwitch,#info_m,#info_n {
  fill:#fff;
  opacity:.7
  }
  
  .separator {
  stroke-linecap:square;
  stroke-width:10;
  stroke:#111
  }
  
  #info_m,#info_n {
  font-family:Monospace;
  text-anchor:middle
  }
  
  #infoNumOf_m,#infoNumOf_n {
  font-size:18px
  }
 
  
  .modal-backdrop {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1000;
  display:none
  }
  
  .modal-content {
  padding:20px;
  border-radius:5px;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  text-align:center;
  position:absolute;
  top:0;
  left:12%;
  width:78%;
  height:15%;
  background-color:transparent;
  z-index:2
  }
  
  .modal-button {
  background-color:#007bff;
  border:none;
  border-radius:5px;
  padding:10px 20px;
  color:#fff;
  margin:10px;
  cursor:pointer
  }
  
  .modal-button:hover {
  background-color:#0056b3
  }
  
  .cursor {
  width:20px;
  height:20px;
  border:1px solid #fff;
  border-radius:50%;
  position:absolute;
  animation:cursorAnim .5s infinite alternate;
  pointer-events:none;
  z-index:10
  }
  
  .cursor::after {
  content:"";
  width:20px;
  height:20px;
  position:absolute;
  border:10px solid gray;
  border-radius:50%;
  opacity:.5;
  top:-10px;
  left:-10px;
  animation:cursorAnim2 .5s infinite alternate
  }
  
  @keyframes cursorAnim {
  from {
  transform:scale(1)
  }
  
  to {
  transform:scale(.7)
  }
  }
  
  @keyframes cursorAnim2 {
  from {
  transform:scale(1)
  }
  
  to {
  transform:scale(.4)
  }
  }
  
  @keyframes cursorAnim3 {
  0% {
  transform:scale(1)
  }
  
  50% {
  transform:scale(3)
  }
  
  100% {
  transform:scale(1);
  opacity:0
  }
  }
  
  .expand {
  animation:cursorAnim3 .5s forwards;
  border:1px solid red
  }
  
  #magnifier {
  position:absolute;
  border:1px solid #000;
  border-radius:50%;
  width:100px;
  height:100px;
  overflow:hidden;
  z-index:10;
  pointer-events:none
  }
   
  
  .leftbar:hover .button,.rightbar:hover .button {
  opacity:1
  }
  
  .button::before {
  content:"";
  position:absolute;
  top:-2px;
  left:-2px;
  z-index:-1;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  background:linear-gradient(45deg,red,#FF7300,#FFFB00,#48FF00,#00FFD5,#002BFF,#FF00C8,red);
  background-size:400%;
  border-radius:8px;
  filter:blur(5px);
  animation:glowing 20s linear infinite;
  opacity:0;
  transition:opacity .3s ease-in-out
  }
  
  .button:hover::before {
  opacity:1
  }
  
  @keyframes glowing {
  0% {
  background-position:0 0
  }
  
  50% {
  background-position:300% 0
  }
  
  100% {
  background-position:0 0
  }
  }
  
  .button:active::after {
  background:transparent
  }
  
  .button:active {
  color:#000;
  font-weight:700
  }
  
  .leftbar:hover .button,.rightbar:hover .button {
  opacity:1
  }
  
  .default-visible {
  opacity:1!important;
  transition:opacity 1s
  }
  
  .button {
  background-color:#555;
  border:none;
  color:#fff;
  height:40px;
  margin:10px 0;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  font-size:16px;
  font-family:Monospace;
  outline:none;
  width:180px;
  position:relative;
  cursor:pointer;
  border-radius:12px;
  opacity:.7;
  transition:opacity .5s;
  margin-left:auto;
   }
  
  .leftbar:hover .button,.rightbar:hover .button {
  opacity:1
  }
  
  .button:not(:hover) {
  opacity:0
  }
  
/* 
  glowing sliders */


  .slider::before,.touchElement::before,.default-visible ::before {
  content:"";
  position:absolute;
  top:-2px;
  left:-2px;
  z-index:-1;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  background:linear-gradient(45deg,red,#FF7300,#FFFB00,#48FF00,#00FFD5,#002BFF,#FF00C8,red);
  background-size:400%;
  border-radius:10px;
  filter:blur(8px);
  animation:glowing 20s linear infinite;
  opacity:0;
  transition:opacity .3s ease-in-out;
  box-sizing:border-box
  }
  
  .slider:hover::before,.touchElement:hover::before,.default-visible:hover::before {
  opacity:1
  }
  
  @keyframes glowing {
  0% {
  background-position:0 0
  }
  
  50% {
  background-position:400% 0
  }
  
  100% {
  background-position:0 0
  }
  }
  
  .glow-effect:hover {
  filter:url(#colorful-glow);
  cursor:pointer
  }

 
  .simulated-hover,.simulated-hover .touchElement,.simulated-hover .slider,.simulated-hover .button,.simulated-hover .textElement text {
    opacity:1;
    transition:opacity 1s
    }



  /* energy slider css  */
  .energySlider {
    position: absolute;
    left:10%;
    top:0%;
    z-index: 3000;
    
    /* Initial CSS - will be updated by JavaScript */
}
     


/* Hide the slider by default */
.energySlider {
  opacity: 0;
  transition: opacity 0.5s;
}

/* Show the slider when hovering over it */
.energySlider:hover {
  opacity: 1;
}
/* * Change the color of the portion of the slider that is dragged over */ */
/* WebKit Browsers */
.energySlider::-webkit-slider-thumb {
  
  background: rgb(112, 204, 144);
  width: 20px; /* Width of the rectangle */
  height: 20px; /* Height of the rectangle */
   border-radius: 5px; /* Adjust for rounded corners */
   cursor: pointer;
  /* Other styling */
}

.energySlider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: rgb(168, 190, 135);
  /* Other styling */
}

/* Mozilla Browsers */
.energySlider::-moz-range-thumb {
  background: rgb(101, 162, 58);
  /* Other styling */
}

.energySlider::-moz-range-progress {
  background: rgb(162, 192, 117);
  /* Other styling */
}
 

.energySlider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: rgb(111, 208, 155);
  border-radius: 5px;
  cursor: pointer;
}

 
/* /////////////
/////////////
/////////////
///////////// */


 /* resizing for smaller screens */
    .button {
      width: 90%; /* Or another suitable percentage */
      /* Other styles... */
    }
    @media (max-width: 600px) {
      .button {
        width: 100%; /* Full width in smaller containers */
        font-size: 14px; /* Slightly smaller font size */
        height: 35px; /* Adjust height as needed */
        /* Other adjustments... */
      }
    }
    /* Adjust font size for medium screens */
@media (max-width: 768px) {
  .button {
    font-size: 0.9em; /* Slightly smaller font size */
  }
}

/* Adjust font size for small screens */
@media (max-width: 480px) {
  .button {
    font-size: 0.8em; /* Even smaller font size for very small screens */
  }
}





@media (max-width: 768px) {
  .contentE {
    left: 5%;
    width: 90%;
    height: 50vh; /* Adjust height for medium screens */
  }

  .contentK {
    top: 45%;
    left: 5%;
    width: 50%;
    height: 50vh;
  }
}

@media (max-width: 480px) {
  .contentE  {
    width: 95%;
    left: 2.5%;
    height: 40vh; /* Adjust height for small screens */
  }
   .contentK {
    width: 50%;
    left: 2.5%;
    height: 40vh; /* Adjust height for small screens */
  }
}

 

svg {
  width: 90%; /* Or another appropriate percentage */
  height: auto; /* Maintain the aspect ratio */
  /* Adjust margin-top or other properties as needed */
}
svg text{
  font-size: 20px;
}
 
@media (max-width: 600px) {
  svg {
    width: 80%; /* Larger percentage for smaller screens */
    height:auto; /* Larger percentage for smaller screens */
    /* Further adjustments as needed */
  }
}

 


@media (max-width: 600px) {
  
  svg text{
    font-size:15px;
  }
  #infoNumOf_n,#infoNumOf_m {
    font-size:15px !important;
    }
    .textElement text {
      
      font-size:  12px !important;    
      }
   
}
@media (max-height: 800px) {
 
  svg text{
    font-size:3vh;
  }
  #infoNumOf_n,#infoNumOf_m {
    font-size:22px !important;
    }
    .textElement text {
      
      font-size:  3vh  !important;   
      }
   
   
}
 
.leftbar svg {
  width: 95%; /* Make SVG width responsive */
  height: auto; /* Keep the aspect ratio */
  min-width: 120px; /* Minimum width */
  min-height: 55px; /* Minimum height, adjust as needed */
  font-size: 20px;
}

.leftbar text {
  font-size: 14px; /* Starting font size, adjust as needed */
}

@media (max-width: 600px) {
  .leftbar text {
    font-size: 16px; /* Larger font size for smaller screens */
  }
 
}

@media (max-width: 400px) {
  .leftbar text {
    font-size: 8px; /* Even larger font size for very small screens */
  }
 
}


.leftbar, .rightbar{
  /* existing styles */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: transparent transparent; /* For Firefox */
}

/* For Webkit browsers like Chrome and Safari */
.leftbar::-webkit-scrollbar,.rightbar::-webkit-scrollbar {
  width: 10px; /* Adjust the width of the scrollbar */
}

.leftbar::-webkit-scrollbar-thumb, .rightbar::-webkit-scrollbar-thumb{
  background-color: transparent; /* Transparent scrollbar thumb */
}

/* Change scrollbar style on hover */
.leftbar:hover,.rightbar:hover {
  scrollbar-color: #888 #f0f0f0; /* For Firefox, adjust colors as needed */
}

.leftbar:hover::-webkit-scrollbar-thumb,.rightbar:hover::-webkit-scrollbar-thumb {
  background-color: #888; /* For Webkit browsers, adjust color as needed */
}


#alphaSlider text, #speedSlider text, #hingeLengthSlider text{
  font-size: 16px; /* Default font size */
}

@media (max-width: 600px) {
  #alphaSlider text, #speedSlider text, #hingeLengthSlider text {
    font-size: 10px; /* Smaller font size for smaller screens */
  }
}

@media (max-width: 400px) {
  #alphaSlider text, #speedSlider text, #hingeLengthSlider text {
    font-size: 8px; /* Even smaller font size for very small screens */
  }
}