/* 
En este archivo están presentes todas las variables y
características generales de diseño en el proyecto.
*/
/* Este loader es para que al cargar la pagina muestre todo de una y no se buguee*/
.loader{
  visibility: hidden;
}

  @font-face {
    font-family: nexaBlack;
    src: URL('http://100.118.203.97/fonts/nexa-black.otf') format('truetype');
  }
  
  @font-face {
    font-family: quickSand;
    src: URL('http://100.118.203.97/fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* html {
  overflow: hidden;
} */

body{
  display: flex;
  justify-content: left;
  background-color: var(--background-color);
  color: var(--black-color);
  overflow: auto;
}

body *{
  font-family: var(--font-family);
}

hr {
  margin-top: 0.7rem;
  margin-bottom: 2.5rem;
  border: 0;
  border-top: 3px solid var(--hr-color);
  width: 100%;
}

input,
select,
textarea {
  border-radius: 10px;
  font-family: var(--font-family)!important;
  font-size: 16px!important;
  padding: 7px!important;
}

button, a{
  user-select: none;
  cursor: pointer;
  text-decoration: none!important;
}
img {
  user-select: none;
  text-decoration: none!important;
}

::selection {
  color: var(--white-font);
  background: var(--purple-font);
}

.mainContent {
  padding: 8vh 4vh 4vh max(18vw,32vh);
  width: 100vw;
  min-height: 600px;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  }

.boxes{
  display: flex;
  flex-direction: row;
  gap: 3vw;
  flex-wrap: wrap;
  /* max-width:fit-content; */
}

.box {
  border-radius: 25px;
  flex-grow: 1;
  background-color: var(--div-color);
  padding: 40px 3vw 40px 3vw!important;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  max-width:fit-content;
  flex: 1;
  
}



.titleConfig{
  color: var(--purple-font);
  text-transform: uppercase;
  font-family: nexaBlack;
  font-weight: 800;
  font-size: 1.3em;
  margin-top: 20px;
}

.iconContent{
  height: 3.5vh;
  margin-bottom: 0.5vh;
}

.title{
  color: var(--white-font);
  font-size: 3.5vh;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 3.5vh;
  font-family: nexaBlack;
}

.buttonDesign{
  background-color: var(--button-color);
  padding: 1.2px 2.4px 1.2px 2.4px;
  border-radius: 30px;
  cursor: pointer;
  border: 0px solid #312c42;
  color: var(--white-font);
}



/* - - - - - - Panel - - - - - - */

#toggleMenu {
  display: none;
}

.panel{
  position: fixed;
  top: 0px;
  bottom: auto;
  left: 0px;
  background-color: var(--panel-color);
  height: 100vh;
  width: 28vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 30;
}

.panel *{
  user-select: none;
}

.faviconPanel{
  width: 8vh;
  height: fit-content;
  margin-top: 8vh;
}

.iconMenu{
  width: 1.8vh;
  height: fit-content;
}


.options {
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  gap: 4.1vh;
}

.oneOption{
  display: flex;
  gap: 1.8vh;
  width: 28vh;
  height: 3.2vh;
  align-items: center;
  padding:0vh 6vh 0vh 5vh;
  border-left: 0.5vh solid transparent;
  margin-left:1.5vh;
}

.oneOption.onPage{
  border-left: 0.5vh solid var(--on-page-color);
}



.oneOption:hover,
.oneOption:hover *{
  color: var(--white-font);
  text-decoration: none!important;
}

.oneOption{
  text-decoration: none!important;
}

.textOption.onPage{
  color: var(--white-font);
}

.textOption{
  color: var(--unselect-white-font);
  font-size: 2vh;
}

#hibring{
  align-self: center!important;
  justify-self:flex-end!important;
  position: absolute;
    bottom: 5%;
  width: 10vh;
  height: fit-content;
}

/* - - - - - end Panel - - - - - */


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--black-font);
  transition: background-color 50000s ease-in-out 3000s;
}

@media only screen and (max-width : 480px) {
  .mainContent {
    padding-inline: 5px;
    z-index: 2;
    }
  .panel {
    transform: translate(-100%);
    transition: .4s transform;
    height: 100%;
  }
  .panel.open {
    transform: none;
  }
  #toggleMenu {
    display: flex;
    position: absolute;
    z-index: 100;
    right: 55px;
    top: 30px;
  }
  #contentButtonsToggle {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 40px;
    height: 40px;
  }
  #toggleMenu .menu {
    display: flex;
    position: absolute;
    height: 40px;
    width: 40px;
    transition: .4s;
  }
  #toggleMenu .menu.vanish {
    width:0;
    height: 0;
  }
  #cover {
    background-color: black;
    display: flex;
    position:fixed;
    left: 0;
    right: 0;
    width: max(100%, 100vw);
    height: max(100%, 100vh);
    opacity: 0;
    z-index: 0;
    transition: opacity .3s linear;
  }
  #cover.on {
    z-index: 3;
    opacity: 0.5;
  }
}