* {
  padding: 0px;
  margin: 0px;
  user-select: none;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  background: black;
  position: relative;
  height: 100%;
  width: 100%;
}

html {
  /*scroll-behavior:smooth;*/
}

::-webkit-scrollbar {
  width: 0;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: none;
}

::-webkit-scrollbar-thumb:hover {
  background: none;
}

/*VENTANA--------------------*/

.icono {
  height: 100%;
  width: 45px;
  background: white;
  position: relative;
}

.icono span {
  position: absolute;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  transition-property: top;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  background: gray;
}

.item1 {
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.item2 {
  top: calc(100% - 14px);
  left: 0;
}

.item3 {
  top: calc(100% - 14px);
  right: 0;
}

.abajo {
  top: calc(100% - 14px);
}

.arriba {
  top: 0%;
}

/*load*/

/*loading......*/

.window {
  height: 100vh;
  width: 100vw;
  position: absolute;
  background: rgb(7, 7, 7);
  z-index: 100;
  display: grid;
  place-items: center;
  transition: opacity 1s;
  transition-timing-function: ease-out;
}

.load {
  height: 10%;
  width: 50%;
  max-width: 300px;
  overflow: hidden;
  position: relative;
}

.load__text {
  color: rgb(224, 242, 255);
  position: absolute;
  left: calc(50% - 25px);
  width: 60px;
}

.load span {
  height: 11px;
  width: 11px;
  background: black;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: -16px;
  background: rgb(255, 255, 255);
  box-shadow: -2px 0 9px 1px rgba(49, 207, 255, 0.685);
}

.load span:nth-child(3) {
  /*primero LOL*/
  animation: first 2.5s;
  animation-timing-function: cubic-bezier(0.25, 0.36, 0.26, 1.83);
  animation-iteration-count: infinite;
  animation-delay: 0.2s;
}

.load span:nth-child(2) {
  animation: second 2.5s;
  animation-timing-function: cubic-bezier(0.25, 0.36, 0.26, 1.83);
  animation-iteration-count: infinite;
  animation-delay: 1.5s;
}

@keyframes first {
  0% {
    left: -16px;
    opacity: 0.1;
  }
  40% {
    left: calc((50% - 8px) + 23px);
    opacity: 1;
  }
  50%,
  60% {
    left: calc(((50%-8px) + 23px) - 23px);
    opacity: 0.8;
  }
  100% {
    left: 100%;
    opacity: 0.1;
  }
}

@keyframes second {
  0% {
    left: -16px;
    opacity: 0.1;
  }
  40% {
    left: calc(50% - 8px);
    opacity: 1;
  }
  50%,
  60% {
    left: calc(((50%-8px) + 23px)) opacity.8;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    left: 100%;
    opacity: 0.1;
  }
}

/*------------------VENTANA*/

.ventana2 {
  background: rgb(0, 0, 0);
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  position: absolute;
  z-index: 50;
}

*::-webkit-scrollbar {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
}

*::-webkit-scrollbar-track {
  color: red;
  background: transparent;
  border: none;
}

.padre {
  /* background:orange;*/
  width: 100vw;
  display: inline-block;
  max-width: 400px;
  height: 40%;
  max-height: 400px;
  position: relative;
  top: 50vh;
  /*con esto la imagen inicia desde la mita del vh*/
  left: 50vw;
  transform: translate(-50%, -50%);
}

.padre2 {
  top: 0vh;
  left: 0vh;
  transform: translate(0, 0);
  width: 20%;
  max-width: 100px;
  padding: 10px;
  transition: all 1s;
  max-height: 10px;
}

.dog {
  width: 100%;
  border-radius: 50%;
  height: 100%;
  min-width: 60px;
  display: block;
  /*inline e inline-block no funcionan en esta ocasion LOL */
}

.container2 {
  /*background:red;*/
  color: white;
  font-size: 30px;
  width: 100%;
  overflow: hidden;
}

.texto {
  padding-right: 100%;
  /*direction:rtl;*/
  white-space: nowrap;
  /*  background:orange;*/
  animation: anim 4s linear infinite;
}

@keyframes anim {
  0% {
    transform: translateX(-95%);
    /*aqui se pone un numero random de acuerdo a la cantidad de texto que tenga*/
    color: gray;
  }
  100% {
    transform: translateX(100%);
    color: gray;
  }
}

.menu {
  border-radius: 4px;
  /*  position:absolute;
    top:50vh;
    left:50vw;
    transform:translate(-50%,-50%);*/
  color: white;
  animation-name: br;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: linear;
  animation-direction: alternate;
  width: 80%;
  position: absolute;
  right: 10px;
  transform: translate(0, 50%);
  border-radius: 4px;
  display: flex;
  justify-content: flex-end;
  padding: 1px 5px;
  overflow: hidden;
}

.icono {
  height: 34px;
  width: 35px;
  flex-grow: 1;
  max-width: 40px;
  background: transparent;
}

.text {
  color: white;
  /*background:blue;*/
  position: absolute;
  bottom: 0px;
  min-height: 85vh;
  height: auto;
  width: 100%;
  max-height: 90%;
  padding: 0px 40px 50px 10px;
  position: relative;
  top: -7px;
  word-break: break-all;

}

.text:focus {
  outline: none;
}

.textareaR {
  color: rgb(20, 194, 20);
  font-family: monospace;
  font-family: Courier;
  font-size: 15px;
  display: inline;
  white-space: pre-wrap;
  line-height: 20px;
  background: none;
  border: none;
  outline: none;
  max-width: 100%;
}

.textareaR::after {
  content: "";
  padding: 0.2px 1px;
  animation: cur 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: linear;
}

@keyframes cur {
  0% {
    background: rgb(20, 194, 20);
  }
  90% {
    background: inherit;
  }
  100% {
    background: inherit;
  }
}

@media screen and (max-width: 520px) {
  .texto {
    padding-right: 140%;
  }
  .menu {
    width: 70%;
    transition: width 1s;
  }
}


.ventana2 .input{
  
}


/*-------------------------VENTANA3 AJUSTES-------------------------*/

.ventana3__container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  flex-grow: 1;
  width: 100vw;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  font-family: monospace;
  font-weight: 700;
  visibility: hidden;
  /*  backdrop-filter: blur(1px);*/
}

.caja {
  height: 32%;
  width: 97%;
  background: black;
  border-radius: 4px;
  max-width: 500px;
  min-width: 310px;
  transition-property: height padding;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  min-height: 200px;
  color: rgb(150, 150, 150);
  border: 1px solid rgb(15, 95, 26);
  transform: translateY(-10%);
  opacity: 0;
  transition-property: transform opacity;
  transition-duration: 0.5s 0.5s;
}

.cajaGo {
  transform: translateY(0%);
  opacity: 1;
}

.caja__1 {
  height: 15%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
}

.caja1__item1 {
  height: 100%;
  width: 85%;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgb(8, 8, 8);
  color: rgb(213, 223, 215);
  border-top-left-radius: 3px;
  z-index: 10;
}

.caja1__item2 {
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  fill: rgb(65, 216, 91);
}

.caja1__item2 .ekis {
  height: 55%;
  width: 40%;
  margin: 3px;
}

.caja__2 {
  height: 85%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.caja2__item1 {
  height: 40%;
  width: 100%;
  display: flex;
  padding: 0px 0;
  box-shadow: 0 -1px 12px -3px rgb(78, 78, 78);
}

.caja2__item1__primero {
  height: 100%;
  width: 60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.caja2__item1__primero__uno {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(12, 26, 14);
  border-radius: 4px;
}

.img-dog {
  border-radius: 50%;
  height: 60px;
  width: 60px;
}

.caja2__item1__primero__dos {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-right: 10px;
}

.caja2__item1__segundo {
  height: 100%;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.caja2__item1__segundo__uno {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.caja2__item2 {
  height: 30%;
  width: 100%;
  display: flex;
  box-shadow: 1px 1px 10px 1px rgb(39, 39, 39);
}

.caja2__item3 {
  height: 25%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 3px 5px;
}

.caja2__item3__uno {
  max-height: 100%;
}

.caja2__item3__dos {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 3px;
  box-shadow: -3px 0 2px -1px rgba(177, 177, 177, 0.288);
}

.caja2__item3__dos input[type="file"] {
  color: transparent;
  position: absolute;
  height: 100%;
  width: 100%;
  flex-grow: 5;
  opacity: 0;
}

.caja2__item3__dos .imgFile {
  height: 100%;
  width: 23px;
  fill: rgb(97, 97, 97);
}

.caja2__item3__dos p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90px;
  padding: 10px;
  color: rgb(182, 182, 182);
}

/*-------------------------AUDIO--------------------*/

.caja2__item1__segundo__dos {
  height: 50%;
  width: 80px;
  display: flex;
}

.primero {
  height: 100%;
  width: 60%;
  overflow: hidden;
  position: relative;
}

.primero span {
  position: absolute;
  height: 70%;
  width: 14%;
  background: rgba(50, 209, 71, 0.87);
  top: 0;
  bottom: 0;
  left: 1vmin;
  right: 0;
  margin: auto;
  transform: rotate(-25deg);
  border-radius: 50px;
  transition-property: height;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}

.imgAudio {
  height: 100%;
  width: 154%;
  padding: 5px;
  fill: rgb(184, 184, 184);
}

.segundo {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.segundo span {
  width: 10%;
  margin: 0 3px;
  border-radius: 100px;
  opacity: 0;
  transition: opacity 0.3s ease;
  transition-delay: 0.1s;
}

.segundo span:nth-child(1) {
  animation-name: anim1;
  animation-duration: 0.4s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: black;
}

@keyframes anim1 {
  0% {
    height: 25%;
    background: rgb(109, 235, 109);
  }
  100% {
    height: 10%;
    background: rgb(202, 202, 202);
  }
}

.segundo span:nth-child(2) {
  height: 40%;
  animation-name: anim2;
  animation-duration: 0.4s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: black;
  animation-delay: 0.3;
}

@keyframes anim2 {
  0% {
    height: 30%;
    background: rgb(39, 226, 95);
  }
  100% {
    height: 43%;
    background: rgb(197, 197, 197);
  }
}

.segundo span:nth-child(3) {
  height: 20%;
  animation-name: anim3;
  animation-duration: 0.4s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: black;
  animation-delay: 0.5s;
}

@keyframes anim3 {
  0% {
    height: 20%;
    background: rgb(103, 240, 68);
  }
  100% {
    height: 10%;
    background: rgb(139, 139, 139);
  }
}

/*--------------------FIN AUDIO--------------------*/

.caja2__item1__segundo .linea {
  position: absolute;
  height: 70%;
  width: 2%;
  border: 2px dashed green;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
  border-radius: 50px;
  transform: translateX(-170%);
}

.caja2__item2__primero {
  width: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*-------------INPUT RANGE---------------*/

.caja2_item2__segundo {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: -7px 0 3px -5px rgb(56, 56, 56);
}

.caja2_item2__segundo span {
  font-size: 16px;
  position: relative;
  bottom: 7px;
  color: rgb(86, 189, 86);
}

.inputRange {
  appearance: none;
  border-radius: 40px;
  background: rgb(70, 69, 69);
  width: 55%;
  height: 10%;
  position: relative;
  bottom: 7px;
}

.inputRange::-webkit-slider-runable-track {
  appearance: none;
}

.inputRange::-webkit-slider-thumb {
  appearance: none;
  height: 12px;
  width: 12px;
  background: rgb(62, 192, 73);
  border-radius: 50%;
}

/*-----------FIN DE INPUT RANGE--------------*/

@media (max-width: 322px) {
  .caja {
    height: 38%;
  }
}

@media (max-width: 312px) {
  .ventana3__container {
    overflow: hidden;
  }
  .caja {
    padding: 2px 15px;
  }
}

/*-------------------------Fin VENTANA 2 AJUSTES-------------------------*/

#music {
  display: none;
  autoplay: true;
}