pre[class^="L"],  pre.booted {
  animation:      zero 0s linear 0.9s forwards;
  white-space:    pre;
  overflow:       hidden;
  font-family:    monospace;
  position:       fixed;

  left:           45px; 
  top:            25px;
  z-index:        2;
  font-size:      0.7rem;
  
  color:        rgba(255, 255, 255, 0.6);
}

:root  { --text-V: 10px; }

pre.L1 { font-size: 0.9rem; }
pre.L2 { top: calc(50px  + var(--text-V)); }   pre.L3 { top: calc(65px  + var(--text-V)); }
pre.L4 { top: calc(150px + var(--text-V)); }   pre.L5 { top: calc(175px + var(--text-V)); }
pre.L6 { top: calc(190px + var(--text-V)); }   pre.L7 { top: calc(205px + var(--text-V)); }
pre.L8 { top: calc(220px + var(--text-V)); }   pre.L9 { top: calc(280px + var(--text-V)); }
pre.LA { top: calc(305px + var(--text-V)); }   pre.LB { top: calc(320px + var(--text-V)); }
pre.LC { top: calc(335px + var(--text-V)); }   pre.LD { top: calc(385px + var(--text-V)); }
pre.LE { top: calc(410px + var(--text-V)); }   pre.LF { top: calc(425px + var(--text-V)); }
pre.LG { top: calc(440px + var(--text-V)); }   pre.LH { top: calc(455px + var(--text-V)); }
pre.LI { top: calc(500px + var(--text-V)); }   pre.LJ { top: calc(530px + var(--text-V)); }

.cover {
  animation: move 0.3s linear 0.4s forwards;
  position:  fixed;

  top:       20px; 
  left:       30px;
  width:     230px; 
  height:    600px;
  z-index:   2;

  background-color: #010101;
}

:root { --mark: 5px; }

@keyframes zero  { to {opacity: 0;} }
@keyframes move  { to {top: 600px; height: 0px;} }
@keyframes move2 { to {top: 125px; height: 0px;} }
@keyframes movea  { to {top: 680px; height: 0px;} }

@media (max-aspect-ratio: 1/1) {
  pre.L1 { font-size: 1.2rem; }
  pre.L2 { top: calc(50px  + var(--mark) * 2  + var(--text-V)); font-size: 1rem; }   
  pre.L3 { top: calc(65px  + var(--mark) * 3  + var(--text-V)); font-size: 1rem; }
  pre.L4 { top: calc(150px + var(--mark) * 4  + var(--text-V)); font-size: 1rem; }   
  pre.L5 { top: calc(175px + var(--mark) * 5  + var(--text-V)); font-size: 1rem; }
  pre.L6 { top: calc(190px + var(--mark) * 6  + var(--text-V)); font-size: 1rem; }   
  pre.L7 { top: calc(205px + var(--mark) * 7  + var(--text-V)); font-size: 1rem; }
  pre.L8 { top: calc(220px + var(--mark) * 8  + var(--text-V)); font-size: 1rem; }   
  pre.L9 { top: calc(280px + var(--mark) * 9  + var(--text-V)); font-size: 1rem; }
  pre.LA { top: calc(305px + var(--mark) * 10 + var(--text-V)); font-size: 1rem; }   
  pre.LB { top: calc(320px + var(--mark) * 11 + var(--text-V)); font-size: 1rem; }
  pre.LC { top: calc(335px + var(--mark) * 12 + var(--text-V)); font-size: 1rem; }   
  pre.LD { top: calc(385px + var(--mark) * 13 + var(--text-V)); font-size: 1rem; }
  pre.LE { top: calc(410px + var(--mark) * 14 + var(--text-V)); font-size: 1rem; }   
  pre.LF { top: calc(425px + var(--mark) * 15 + var(--text-V)); font-size: 1rem; }
  pre.LG { top: calc(440px + var(--mark) * 16 + var(--text-V)); font-size: 1rem; }   
  pre.LH { top: calc(455px + var(--mark) * 18 + var(--text-V)); font-size: 1rem; }
  pre.LI { top: calc(500px + var(--mark) * 19 + var(--text-V)); font-size: 1rem; }   
  pre.LJ { top: calc(530px + var(--mark) * 20 + var(--text-V)); font-size: 1rem; }

  .cover {
  animation: movea 0.3s linear 0.4s forwards;
  position:  fixed;

  top:       20px; 
  left:       30px;
  width:     300px; 
  height:    600px;
  z-index:   2;
  }
}

.curtain-1 {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  animation: ontoff 1.5s ease forwards 2s;
}

@keyframes ontoff { to {opacity: 0;}}