body{
  background-image:url("https://i.pinimg.com/736x/ff/6e/ed/ff6eedb8e6d4a8f9b2eb8bf52610eb43.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-color:black;

  font-family:"MS Sans Serif", sans-serif;
}






/* ========================== Texto e imágenes ========================== */
  
    /*Viñetas*/
     ul { list-style: none;}
     li::before { content: "⭑";}
     
    /*======textos=======*/
    .hi{
     font-family: 'Courier New', monospace;
     text-align: center;
    }
    .evarainbow{
     font-family: 'Courier New', monospace; font-size:11px;
     font-weight: bold; letter-spacing: 2px;
     background:linear-gradient(to right, purple, indigo, blue, green, yellow, orange, red);
     -webkit-background-clip:text;
     color:transparent;  
     text-align: center;
    }
    .simonecita{
     font-family: 'Playfair Display', serif;
     font-style: italic;
     text-align: center;
    }
    .sorsu{
     color: white;
     text-align: center;
    }
    
    
    /*contenedores*/
    .contenedor1{
     width: 470px;
     margin: 20px auto;
     padding: 15px;
     background: rgba(216, 216, 216, 0.8);
     border-radius: 10px;
     box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
    } 
    .contenedor2{
     width: 490px;
     margin: 20px auto;
     padding: 1px;
     background: #F4F6DE;
     border-radius: 5px;
     box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
     text-align: center;
    }
   
    /*Posición*/
    .center{
     text-align:center;
    }
    
    /*======Pngs y gifs======*/
    
    .telefono{
     position:absolute;
     top:460px;
     left:800px;
     width:100px;
     border-radius:10px; 
    }
    .cafe{
     position:absolute;
     top:808px;
     left:310px;
     width:90px;
     cursor:pointer;  
    }
    
    
    /*AgrandarEvaristaE*/
    .evarista {
     transition: 0.3s;
    }
    .evarista:hover {
     transform: scale(1.1);
    }
   

   
  /*  ========================== SReproductor ==========================  */
    
    /*BOTONES*/
    .back{
     width:22px;
     height:22px;
     min-width:22px;
     padding:0;
     margin:5px 0;
     margin-right:2px;
     font-size:10px;
     line-height:1;
     display:inline-flex;
     align-items:center;
     justify-content:center;
    }
    .playpause{
     width:30px;
     height:22px;
     min-width:30px;
     padding:0;
     margin:5px 0;
     font-size:10px;
     line-height:1;
     display:inline-flex;
     align-items:center;
     justify-content:center;      
    }
    .next{
      width:22px;
      height:22px;
      min-width:22px;
      padding:0;
      margin:5px 0;
      margin-left:2px;
      font-size:10px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }        
    
    /* VENTANA */
    .title-bar{
      background-image:
      linear-gradient(to top left, #47101E, #7D6076);
    }
    .window-body{
      font-size:15px;
    }
    .tree-view{
      text-align:center;
      overflow-x:hidden;
      overflow-y:auto;
      max-height:120px;
    }
    
    /* REPRODUCTOR */
    #song{
      position:fixed;
      top:25px;
      left:35px;
      z-index:30;
    }
    .button{
      background:transparent;
      border-radius:5px;
      padding:5px;
    }
     .button:hover{
      cursor:pointer;
    }

  
  
  /* ========================== blinkE ========================== */
    .blink{
     animation: blink 1s infinite;
    }
      @keyframes blink{
       40%{opacity:0;}
      }
  
  
  
  /*  ========================== glowE ==========================   */ 
    .glow {
     animation: glow 2s infinite alternate;
    }
      @keyframes glow {
       from {
        text-shadow:
        0 0 10px #5c0011,
        0 0 20px #7a001c,
        0 0 30px #990033;
       }
       to {
       text-shadow:
        0 0 10px #7a001c,
        0 0 30px #990033,
        0 0 50px #cc0044,
        0 0 70px #ff3366,
        0 0 90px #ff6699;
       }
      }

  
  
  /*  ========================== SAngel ==========================  */
    .angel{
     position:fixed;
     width:80px;
     z-index:100;
     pointer-events:auto;
     cursor:pointer;
     animation:
     fly 20s ease-in-out infinite,
     float 5s ease-in-out infinite;
     filter:
     drop-shadow(0 0 10px white)
     drop-shadow(0 0 20px white);
    }
      @keyframes fly{
       0%{
       top:10%;
       left:-100px;
       transform:scaleX(1);
       }
       50%{
       top:20%;
       }
       100%{
       top:5%;
       left:100%;
       transform:scaleX(1);
       }
      }



  /* ========================== SecretE ========================== */
    .secret{
     color: transparent;
     border-bottom: 1px dotted black;
     cursor: pointer;
    }
     .secret:hover{
     color: white;
    }
  
  
  
  /* ========================== Sfotos windows ========================== */

    #foto1{
     position:fixed;
     top:15px;
     left:875px;
     z-index:40;
    }
  
    .sparkle{
     position: fixed;
     font-size: 20px;
     pointer-events: none;
     animation: sparkleFade 1s forwards;
     z-index:50;
    }   
      @keyframes sparkleFade{
       0%{
        opacity:1;
        transform:translateY(0) scale(1);
       }
       100%{
        opacity:0;
        transform:translateY(-40px) scale(0.5);
       }
      }
    
    #foto2{
     position:fixed;
     top:10px;
     left:20px;
     z-index:10;
    }
   
    /* ventana */
    #foto2 .window{
     width:250px;
     transition:
     width 0.5s ease;
    }
    
    /* imagen */
    #foto2 .mainImage{
     width:100%;
     height:auto;
     display:block;
     transition:0.5s ease;
    }



 /* ========================== SCoffee Spining ========================== */
  
   .spin-fast{
     animation: coffeeSpin 2s ease-in-out;
    }
      @keyframes coffeeSpin{
       0%{
        transform: rotate(0deg);
       }
       100%{
        transform: rotate(1440deg);
       }
      }
  
  
  
  /* ========================== Shornito ========================== */
  
    /*  VENTANA  */
    #ovenWindow{
     position:fixed;
     top:30px;
     left:895px;
     z-index:20;
    }

    /* HORNO */
    #ovenBox{
     position:relative;
     width:160px;
     margin:auto;
    }

    /* imagen */
    #ovenImg{
     width:100%;
     image-rendering:pixelated;
     position:relative;
     z-index:1;
    }

    /* glow */
    #ovenGlow{
     position:absolute;
     left:20px;
     top:40px;
     width:120px;
     height:110px;
     background:
     radial-gradient(circle,
     rgba(255,140,0,0.8),
     rgba(255,80,0,0));
     opacity:0;
     filter:blur(20px);
     transition:1s;
     z-index:2;
     pointer-events:none;
    }
     #ovenGlow.active{
     opacity:1;
     animation:
     ovenPulse 1s infinite alternate;
    }
      @keyframes ovenPulse{
       from{
        transform:scale(1);
       }
       to{
        transform:scale(1.08);
       }
      }

    /* puerta */
    #ovenDoor{
     position:absolute;
     left:40px;
     top:65px;
     width:140px;
     height:120px;
     transform-origin:top;
     transition:1s;
     z-index:4;
    }

    /* abrir */
    #ovenDoor.open{
     transform:
     perspective(600px)
     rotateX(-75deg);
    }

    /* VAPOR */
    #steamContainer{
     position:absolute;
     width:100%;
     height:100px;
     top:0;
     left:0;
     pointer-events:none;
     z-index:20;
    }
    .steam{
     position:absolute;
     bottom:0;
     width:40px;
     height:40px;
     border-radius:50%;
     background:
     radial-gradient(circle,
     rgba(255,255,255,0.8),
     rgba(255,255,255,0));
     filter:blur(10px);
     animation:
     steamUp 4s linear forwards;
    }
      @keyframes steamUp{
       0%{
        opacity:0.8;
        transform:
        translateY(0)
        scale(1);
       }
       100%{
        opacity:0;
        transform:
        translateY(-120px)
        scale(2);
       }
      }

    /* TEXTO */
    #ovenText{
     font-size:12px;
     letter-spacing:1px;
    }
    
    /* panel blanco del horno */
    .oven-controls{
     margin-top:5px;
     padding:8px;
     background:#ffffff;
     border-top:1px solid #808080;
     border-left:2px solid #808080;
     border-right:2px solid white;
     border-bottom:2px solid white;
    }

    .oven-controls hr{
     border:none;
     border-top:1px solid #808080;
     border-bottom:1px solid white;
     margin:8px 0;
    }

    /* POPUP POSTRE */
    #dessertPopup{
     position:fixed;
     top:50%;
     left:50%;
     transform:
     translate(-50%, -50%)
     scale(0.5);
     opacity:0;
     pointer-events:none;
     z-index:100;
     transition:0.6s;
     text-align:center;
    }

    /* mostrar */
    #dessertPopup.show{
     opacity:1;
     transform:
     translate(-50%, -50%)
     scale(1);
     animation:
     popupFloat 2s infinite alternate;
    }

    /* imagen postre */
    #dessertImage{
     width:220px;
     image-rendering:pixelated;
     filter:
     drop-shadow(0 0 20px pink)
     drop-shadow(0 0 40px white);
    }

    /* nombre */
    #dessertName{
     margin-top:15px;
     font-family:
     'Press Start 2P',
     monospace;
     font-size:10px;
     color:white;
     text-shadow:
     0 0 10px black;
    }

    /* animación */
    @keyframes popupFloat{
     from{
      transform:
      translate(-50%, -50%)
      scale(1)
      translateY(0px);
     }

     to{
      transform:
      translate(-50%, -50%)
      scale(1.03)
      translateY(-10px);
     }
    }