body {
	background: #111;
	background-attachment: fixed;
	background-size: cover;
  color: #f9f9f9;
}


:root{
	--pink: #ff60b4;
  --blue: #72efff; 
}

 A {text-decoration: none;}

#out-all {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center;}

#f1 {position: absolute; width: 600px; height: 400px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #111;}
.decidir {display: flex; align-items: center; justify-content: center;}
.si, .no, .weno, .dale, .salu, .copy, #f13 a, #f13 .play-video, span.go, .carta {font: 25px 'VT323', monospace; margin: 10px; opacity: 0;
   animation-name: visible;
  animation-duration: 1s; 
animation-delay: 3.5s;
    animation-fill-mode: forwards; cursor: pointer; color: #f9f9f9;
}

.rega, .ojo, .afi, .anillo, .marry, .meme, .meme2, .yes {font: 25px 'VT323', monospace; margin: 10px; opacity: 0;
   animation-name: visible;
  animation-duration: 1s; 
animation-delay: 7s;
    animation-fill-mode: forwards; cursor: pointer; text-align: center;
}

#f2, #f3, #f4, #f5, #f6 {position: absolute; width: 600px; height: 400px; display: flex; align-items: center; justify-content: center; flex-direction: column; display: none;} 

#f7 {position: absolute; width: 850px; height: 550px; background: url(img/kx3psEN.png); background-size: cover; display: none; align-items: center; justify-content: center; flex-direction: column;}

#f8, #f9 {position: absolute; bottom: 150px; left: 150px; right: 150px; display: none; align-items: center; justify-content: center; flex-direction: column;}

#f10 {position: absolute; bottom: 140px; left: 150px; right: 150px; height: 160px; display: none; align-items: center; justify-content: center;}
.box {width: 100px; height: 100px; background: url(img/ViqP2fB.png); background-size: cover; margin: 20px; cursor: pointer;}
.box:hover {background: url(img/FIrcwmM.png); background-size: cover;}

#f11 {position: absolute; position: absolute; top:120px; transform: scale(.7); display: none; flex-direction: column;}

#f12 {position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; background: #111; display: none; align-items: center; justify-content: center; flex-direction: column;}

#f14 { background: #111; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
font: 26px 'VT323', monospace; text-align:justify; display: none;}
#f15 { background: #111; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
font: 26px 'VT323', monospace; text-align:justify; display: none;}
#f16 {position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; display: none; align-items: center; justify-content: center; flex-direction: column;}

#f17 {position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; display: none; align-items: center; justify-content: center; flex-direction: column;}
.ring {width: 150px; height: 150px;  background: url(img/oEs8TdL.png); background-size: cover;}
.ichigo {width: 200px; height: 200px; background: url(img/hGY3pGX.png); background-size: cover;}

#f18 {position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; background: #111; display: none;}
#f19, #f20, #f21, #f22 {position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; background: #111; display: none; align-items: center; justify-content: center; flex-direction: column;}
#f22 { 
font: 26px 'VT323', monospace; text-align:justify;}
h1 {
  overflow: hidden; 
  border-right: .15em solid #fff; 
  color: #fff;
  white-space: nowrap;  
  margin: 0 auto; 
  letter-spacing: .03em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
  font: 30px 'VT323', monospace;
}
h3 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  color: #fff;
  white-space: nowrap;  
  margin: 0 auto; 
  letter-spacing: .03em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-start;
  font: 30px 'VT323', monospace;
}


h2 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  color: #fff;
  white-space: nowrap;  
  margin: 0 auto; 
  letter-spacing: .03em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
  font: 30px 'VT323', monospace;
  animation-delay: 3.5s; width: 0px; animation-fill-mode: forwards; text-align: center;
}

.img1 {width: 150px; height: 150px; background: url(img/QLrOZMR.png); background-size: cover;}

#ico {position: absolute; bottom: 5px; left: 360px; width: 130px; height: 130px; background: url(img/SVZxE8c.png); background-size: 100%;}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 105% }
}

@keyframes visible {
  from { opacity: 0 }
  to { opacity: 1 }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fff }
}