@font-face {
  font-family: pppunx;
  src: url('pppunx-Regular.otf');;

}

.imagencita {
    width: 30vw;
    max-width: 800px;
    min-width: 300px;
    pointer-events: none;
    user-select: none;
    
   
    
  }

.difference {
 mix-blend-mode: difference;

}

  .texto {
    left: 35px;
    top: 10px;
    position: fixed;
    font-size: 30px;
    z-index: 4000;
    font-family: pppunx;
    line-height: 50%;
    text-shadow: 10px 1px 2px white;
    border: solid black 1px;
    transition: 1000ms;
  }

  .texto2 {
    left: 55px;
    bottom: 30px;
    position: fixed;
    font-size: 30px;
    z-index: 4000;
    color: black;
    font-family: pppunx;
    line-height: 50%;
    text-shadow: 10px 1px 2px white;
    border: solid black 1px;
    transition: 400ms;
  }

  .big-text {
    left: 35px;
    top: 10px;
    position: fixed;
    font-size: 60px;
    z-index: 4000;
    font-family: pppunx;
    line-height: 50%;
    text-shadow: 10px 1px 2px white;
    border: solid white 1px;
  }

  .big-text2  {
    left: 55px;
    bottom: 50px;
    position: fixed;
    font-size: 50px;
    z-index: 4000;
    color: black;
    font-family: pppunx;
    line-height: 50%;
    text-shadow: 10px 1px 2px white;
    border: solid white 1px;
  }

  #e{
    right: 35px;
    top: 10px;
    position: fixed;
    font-size: 30px;
    z-index: 4000;
    color: black;
    font-family: pppunx;
    line-height: 50%;
    text-shadow: 10px 1px 2px white;
    cursor: crosshair;

  }

  img {
    width: 100%;
  }

  body {
    overflow: hidden;
    background-image: linear-gradient(rgb(199, 199, 199), rgb(32, 32, 32));
   height: 100vh;
   transition: 500ms;
  
   
  
  }

  #trigger{
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .fonditoloco {
    height: 0vh;
    background-image: linear-gradient(black, rgb(255, 32, 32));
    transition: 500ms;
  }

  .exclusion {
 mix-blend-mode: multiply;
  }

  html {
    cursor: none;
    user-select: none;
    
  }