/* :root {
 ('--doc-height ',' 100%');
 ('--mainColorBlack ',' rgb(0, 0, 0)');
 ('--tipodeletra ',' lato');
 ('--colorgris ',' rgb(5, 5, 5)');
 ('--porlasidebar ',' 250px');
 ('--colorrojo ',' rgb(255, 0, 0)');
 ('--borderradius ',' 7px');
 ('--gristransparente '' rgb(0, 0, 0)');
 ('--tiempodeanimacion ',' 0.5s');
 ('--rojooscuro ',' rgba(255, 0, 0, 0.185)');
 ('--boxshadow ',' 0 0px 25px 7px rgba(255, 0, 0, 0.205)');
 ('--sombrarojavertical ','  0 0px 5px 4px rgb(255, 0, 0)');
 ('--sombrarojaorizontal ',' 0 1px 5px 4px rgba(56, 3, 3, 0.652)');
 ('--borderojooscuro ',' 4px solid rgba(133, 0, 0, 0.788)');
 ('--borderojo ',' 4px solid rgb(255, 0, 0)');
 ('--pipazindex ',' 2');
} */


/* night mode */
:root {
  font-size: 16px;
  --doc-height: 100%;
  --mainColorBlack: rgb(0, 0, 0);
  --mainGrayBackgroudColor: rgb(0, 0, 0);
  --mainColorWhite: rgb(255, 255, 255);
  --BackgroundBtns: rgba(0, 0, 0, 0.564);
  --BackgroundBtnsHover: rgb(36, 36, 36);
  --menuBackgroundBtns: rgba(42, 42, 42, 0.379);
  --BackgroundLogoBtns: rgb(150, 148, 148);
  --tipodeletra: lato;
  --colorgris: rgb(5, 5, 5);
  --porlasidebar: 250px;
  --colorrojo: rgb(255, 0, 0);
  --borderradius: 7px;
  --gristransparente: rgb(0, 0, 0);
  --tiempodeanimacion: 0.5s;
  --rojooscuro: rgba(255, 0, 0, 0.185);
  --boxshadow: 0 0px 25px 7px rgba(255, 0, 0, 0.205);
  --sombrarojavertical:  0 0px 5px 4px rgb(255, 0, 0);
  --sombrarojaorizontal: 0 1px 5px 4px rgba(56, 3, 3, 0.652);
  --borderojooscuro: 4px solid rgba(133, 0, 0, 0.788);
  --borderojo: 4px solid rgb(255, 0, 0);
  --pipazindex: 2;
  --txtColor: rgba(255, 255, 255, 0.867);
  


  --fontSizeForButtons: clamp(0.5rem, 2vw, 2rem);
  --mapsBackgroundColor: rgba(0, 0, 0, 0.881);
  --fchildABackground: rgba(0, 0, 0, 0.306);

}



/* light mode */
.yfkyfashyg {
  --doc-height: 100%;
  --mainColorBlack: rgb(255, 255, 255);
  --mainGrayBackgroudColor: rgb(162, 162, 162);
  --mainColorWhite: rgb(0, 0, 0);
  --BackgroundBtns: rgba(94, 94, 94, 0.564);
  --BackgroundBtnsHover: rgb(44, 44, 44);
  --menuBackgroundBtns: rgba(0, 0, 0, 0.47);
  --BackgroundLogoBtns: rgb(150, 148, 148);
  --tipodeletra: lato;
  --colorgris: rgb(5, 5, 5);
  --porlasidebar: 250px;
  --colorrojo: rgb(255, 0, 0);
  --borderradius: 7px;
  --gristransparente: rgb(0, 0, 0);
  --tiempodeanimacion: 0.5s;
  --rojooscuro: rgba(255, 0, 0, 0.185);
  --boxshadow: 0 0px 25px 7px rgba(255, 0, 0, 0.205);
  --sombrarojavertical:  0 0px 5px 4px rgb(255, 0, 0);
  --sombrarojaorizontal: 0 1px 5px 4px rgba(56, 3, 3, 0.652);
  --borderojooscuro: 4px solid rgba(133, 0, 0, 0.788);
  --borderojo: 4px solid rgb(255, 0, 0);
  --pipazindex: 2;
  --txtColor: rgba(0, 0, 0, 0.765);
  --mapsBackgroundColor: rgba(0, 0, 0, 0.191);
  --fchildABackground: rgba(255, 255, 255, 0.509);
  --middleCellsBackgroundColor: rgba(255, 255, 255, 0.509);


  /* --tiempo: 1s ease-in-out; */
}







.preload * {
  /* transition: none !important; */
}

* {
  /* transition: var(--tiempodeanimacion) !important; */

  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  /* transition: none !important; */
  /* transition: none ; */
  
}

button {
border: none;
  /* background-Color: var(--mainColorBlack); */
}

/* Apply your custom scrollbar styles for larger screens */
* {
  scrollbar-width: auto;
  scrollbar-color: #ff0000 #000000;
}

*::-webkit-scrollbar {
  height: 10px;
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #000000;
}

*::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 10px;
  border: 3px solid #4d0000;
}

/* Hide the scrollbars on smaller screens using a media query */
/* @media screen and (max-width: 768px) {
  *::-webkit-scrollbar {
    width: 0;
    height: 0;
    
  }
} */


html, body{
  /* box-sizing: border-box; */
  /* transition: none; */
  /* background-color: var(--mainColorBlack); */
  height: 100%;
  /* overflow: hidden; */
  
}
















/* disbles page zoom ui  */

/* html {
  touch-action: pan-x pan-y;
  zoom: reset;
} */


button {
  -webkit-tap-highlight-color: transparent; /* Removes the default highlight effect */
  tap-highlight-color: transparent;
}
button:focus {
  outline: none;
}