@charset "utf-8";
*{
  box-sizing:border-box
}
body{
     display: grid;
  grid-template-rows: max-content 1fr min-content
}
#answer{
  display:block;
  padding: 0.5rem 1rem;
  box-shadow: 0 0 8px 4px lightgray;
  min-height: 100%;
  background: url("fondo_answers.webp") no-repeat center;
  background-size: 40%;
  align-content: center;
  code{
  position: relative;
  width: 100%;
  padding-top: 1rem;
  pointer-events:none;
  border-radius: 0.75rem;
  }
  code::before{
  content: "Código";
  position:absolute;
  width: 100%;
  height: 2rem;
  padding: 0.25rem 0.5rem;
  top: 0;
  left: 0;
  background: #8a8989;
  color: white;
}
 code::after{
  content: "Copiar";
  position:absolute;
  width: fit-content;
  height: 1rem;
  padding: 0.25rem 0.5rem;
  top: 0;
  right: 0px;
  background: #8a8989;
  color: white;
  z-index:10; 
  cursor:pointer;
  pointer-events:all;
}
}
/*****Anim loading ************/
/*
.loader{
  display: flex;
  margin:  0 auto;
  height: 100px;
  background: url("cabezaldr.webp") no-repeat center;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  width: 192px;
  text-align: center;
  font-size: 10px;
  
      > div {
      height: 40px;
      width: 8px;
      display: inline-block;
      float: left;
      margin-left: 2px;
      -webkit-animation: delay 0.8s infinite ease-in-out;
      animation: delay 0.8s infinite ease-in-out;
    }

    .bar1{
      background-color: #754fa0 ;
    }
    .bar2{
      background-color: #09b7bf;
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
    .bar3{
      background-color: #90d36b;
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
    .bar4{
      background-color: #f2d40d;
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
    .bar5{
      background-color: #fcb12b;
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
    .bar6{
      background-color: #ed1b72;
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
}


@-webkit-keyframes delay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.05) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes delay {
  0%, 40%, 100% { 
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
*/

@charset "utf-8";
.loader{
  margin:  0 auto;
  display: grid;
  grid-template-areas:
  '. . . .'
  '. . . .'
  '. . . .'
  '. . . .';
  grid-gap: 4px;
  width: 120px;
  height: 90px;
  padding: 30px;
  background: url("cabezaldr.webp") no-repeat center;
  align-content: center;
  /* justify-content: center; */
  
  >div{
    border-radius: 50%;
    width: 7px;
    height: 7px;
    animation: delay 1.2s infinite ease-in-out;
  }
  > div.l1{
    background: white;
    animation-delay :  0;
  }
  > div.l2{
    background: red;
    animation-delay :  0.1s;
  }
  > div.l3{
    background: blue;
    animation-delay :  0.2s;
  }
  > div.l4{
    background: green;
    animation-delay :  0.3s;
  }
  > div.l5{
    background: orange;
    animation-delay :  0.4s;
  }
  > div.l6{
    background: lightblue;
    animation-delay :  0.5s;
  }
  > div.l7{
    background: aliceblue;
    animation-delay :  0.6s;
  }
  > div.l8{
    background: red;
    animation-delay :  0.7s;
  }
  > div.l9{
    background: yellow;
    animation-delay :  0.8s;
  }
  > div.l10{
    background: white;
    animation-delay :  0.9s;
  }
  > div.l11{
    background: red;
    animation-delay :  1s;
  }
  > div.l12{
    background: blue;
    animation-delay :  1.1s;
  }

}

@-webkit-keyframes delay {
  0%, 40%, 100% { -webkit-transform: scale(0.05) }  
  20% { -webkit-transform: scale(1.0) }
}

@keyframes delay {
  0%, 40%, 100% { 
    transform: scale(0.05);
    -webkit-transform: scale(0);
  }  20% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}