@-webkit-keyframes typing {
    from { width: 0; }
    to { width: 56ch; }
}

@-webkit-keyframes typing-reverse {
    from { width: 56ch; }
    to { width: 0; }
}

@-webkit-keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    background-color: black;
}

h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12, h13, h14, h15, h16, h17, h18, h19, h20, h21, h22, h23, h24, h25, h26, h27, h28, h29, h30, h31, h32, h33, h34, h35, h36, h37, h38, h39, h40, h41, h42, h43, h44, h45, h46, h47{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font: bold 300% Consolas, Monaco, monospace;
    border: none;
    width: 0;
    margin: auto;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
}

/* Оригинальные анимации для десктопа */
h1 {
    -webkit-animation:
            typing 3.8s steps(56, end) 18s forwards,
            typing-reverse 0s steps(35, end) 22s forwards,
            fade-in 1s 3.8s forwards;
    max-width: 35ch;
}
h2 {
    -webkit-animation:
            typing 3.8s steps(56, end) 22s forwards,
            typing-reverse 0s steps(39, end) 26s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 39ch;
}

h3 {
    -webkit-animation:
            typing 4s steps(56, end) 27s forwards,
            typing-reverse 0s steps(35, end) 31s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 32ch;
}

h4 {
    -webkit-animation:
            typing 4s steps(56, end) 31s forwards,
            typing-reverse 0s steps(35, end) 35s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 31ch;
}
h5 {
    -webkit-animation:
            typing 3.8s steps(56, end) 36s forwards,
            typing-reverse 0s steps(35, end) 40s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 35ch;
}
h6 {
    -webkit-animation:
            typing 3.8s steps(56, end) 40s forwards,
            typing-reverse 0s steps(39, end) 44s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 39ch;
}

h7 {
    -webkit-animation:
            typing 4s steps(56, end) 45s forwards,
            typing-reverse 0s steps(35, end) 49s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 32ch;
}

h8 {
    -webkit-animation:
            typing 4s steps(56, end) 49s forwards,
            typing-reverse 0s steps(35, end) 53s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 31ch;
}
h9 {
    -webkit-animation:
            typing 4s steps(56, end) 72s forwards,
            typing-reverse 0s steps(35, end) 76s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 25ch;
}
h10 {
    -webkit-animation:
            typing 5s steps(56, end) 76s forwards,
            typing-reverse 0s steps(35, end) 81s forwards,
            fade-in 0.1s 5s forwards;
    max-width: 46ch;
}
h11 {
     -webkit-animation:
             typing 4s steps(56, end) 81s forwards,
             typing-reverse 0s steps(35, end) 85s forwards,
             fade-in 0.1s 4s forwards;
     max-width: 35ch;
 }
h12 {
    -webkit-animation:
            typing 4s steps(56, end) 85s forwards,
            typing-reverse 0s steps(35, end) 89s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 46ch;
}
h13 {
    -webkit-animation:
            typing 3s steps(56, end) 91s forwards,
            typing-reverse 0s steps(35, end) 94s forwards,
            fade-in 0.1s 3s forwards;
    max-width: 46ch;
}
h14 {
    -webkit-animation:
            typing 4s steps(56, end) 94s forwards,
            typing-reverse 0s steps(35, end) 98s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 46ch;
}
h15 {
    -webkit-animation:
            typing 4s steps(56, end) 98s forwards,
            typing-reverse 0s steps(35, end) 102s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 32ch;
}
h16 {
    -webkit-animation:
            typing 5s steps(56, end) 102s forwards,
            typing-reverse 0s steps(35, end) 107s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 52ch;
}
h17 {
    -webkit-animation:
            typing 3.8s steps(56, end) 108s forwards,
            typing-reverse 0s steps(35, end) 112s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 35ch;
}
h18 {
    -webkit-animation:
            typing 3.8s steps(56, end) 112s forwards,
            typing-reverse 0s steps(39, end) 115s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 39ch;
}

h19 {
    -webkit-animation:
            typing 4s steps(56, end) 117s forwards,
            typing-reverse 0s steps(35, end) 121s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 32ch;
}

h20 {
    -webkit-animation:
            typing 4s steps(56, end) 121s forwards,
            typing-reverse 0s steps(35, end) 125s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 31ch;
}
h21 {
    -webkit-animation:
            typing 3.8s steps(56, end) 126s forwards,
            typing-reverse 0s steps(35, end) 129s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 35ch;
}
h22 {
    -webkit-animation:
            typing 3.8s steps(56, end) 129s forwards,
            typing-reverse 0s steps(39, end) 134s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 39ch;
}

h23 {
    -webkit-animation:
            typing 4s steps(56, end) 134s forwards,
            typing-reverse 0s steps(35, end) 139s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 32ch;
}

h24 {
    -webkit-animation:
            typing 4s steps(56, end) 139s forwards,
            typing-reverse 0s steps(35, end) 143s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 31ch;
}
h26 {
    -webkit-animation:
            typing 4s steps(56, end) 162s forwards,
            typing-reverse 0s steps(35, end) 166s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 39ch;
}
h27 {
    -webkit-animation:
            typing 5s steps(56, end) 166s forwards,
            typing-reverse 0s steps(35, end) 171s forwards,
            fade-in 0.1s 5s forwards;
    max-width: 40ch;
}
h28 {
    -webkit-animation:
            typing 4s steps(56, end) 171s forwards,
            typing-reverse 0s steps(35, end) 175s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 45ch;
}
h29 {
    -webkit-animation:
            typing 4s steps(56, end) 175s forwards,
            typing-reverse 0s steps(35, end) 179s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 38ch;
}
h30 {
    -webkit-animation:
            typing 5s steps(56, end) 179s forwards,
            typing-reverse 0s steps(35, end) 184s forwards,
            fade-in 0.1s 5s forwards;
    max-width: 40ch;
}
h31 {
    -webkit-animation:
            typing 5s steps(56, end) 184s forwards,
            typing-reverse 0s steps(35, end) 189s forwards,
            fade-in 0.1s 5s forwards;
    max-width: 39ch;
}
h33 {
    -webkit-animation:
            typing 4s steps(56, end) 193s forwards,
            typing-reverse 0s steps(35, end) 197s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 54ch;
}
h34 {
    -webkit-animation:
            typing 3.8s steps(56, end) 198s forwards,
            typing-reverse 0s steps(35, end) 201s forwards,
            fade-in 1s 3.8s forwards;
    max-width: 35ch;
}
h35 {
    -webkit-animation:
            typing 3.8s steps(56, end) 201s forwards,
            typing-reverse 0s steps(39, end) 206s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 39ch;
}

h36 {
    -webkit-animation:
            typing 4s steps(56, end) 206s forwards,
            typing-reverse 0s steps(35, end) 210s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 32ch;
}

h37 {
    -webkit-animation:
            typing 4s steps(56, end) 210s forwards,
            typing-reverse 0s steps(35, end) 215s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 31ch;
}
h38 {
    -webkit-animation:
            typing 3.8s steps(56, end) 215s forwards,
            typing-reverse 0s steps(35, end) 220s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 35ch;
}
h39 {
    -webkit-animation:
            typing 3.8s steps(56, end) 220s forwards,
            typing-reverse 0s steps(39, end) 224s forwards,
            fade-in 0.1s 3.8s forwards;
    max-width: 39ch;
}

h40 {
    -webkit-animation:
            typing 4s steps(56, end) 224s forwards,
            typing-reverse 0s steps(35, end) 229s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 32ch;
}

h41 {
    -webkit-animation:
            typing 4s steps(56, end) 229s forwards,
            typing-reverse 0s steps(35, end) 234s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 31ch;
}
h42 {
    -webkit-animation:
            typing 3s steps(56, end) 234s forwards,
            typing-reverse 0s steps(35, end) 237s forwards,
            fade-in 0.1s 3s forwards;
    max-width: 40ch;
}
h43 {
    -webkit-animation:
            typing 6s steps(56, end) 237s forwards,
            typing-reverse 0s steps(35, end) 243s forwards,
            fade-in 0.1s 6s forwards;
    max-width: 40ch;
}
h44 {
    -webkit-animation:
            typing 4s steps(56, end) 243s forwards,
            typing-reverse 0s steps(35, end) 247s forwards,
            fade-in 0.1s 4s forwards;
    max-width: 15ch;
}
h45 {
    -webkit-animation:
            typing 6s steps(56, end) 247s forwards,
            typing-reverse 0s steps(35, end) 253s forwards,
            fade-in 0.1s 6s forwards;
    max-width: 56ch;
}
h46 {
     -webkit-animation:
             typing 2s steps(56, end) 253s forwards,
             typing-reverse 0s steps(35, end) 255s forwards,
             fade-in 0.1s 2s forwards;
     max-width: 7ch;
}
h47 {
    -webkit-animation:
            typing 6s steps(56, end) 255s forwards,
            typing-reverse 6s steps(56, end) 261s forwards,
            fade-in 0.1s 6s forwards;
    max-width: 7ch;
}
h48 {
    -webkit-animation:
            typing 10s steps(56, end) 263s forwards,
            typing-reverse 10s steps(56, end) 3600s forwards,
            fade-in 0.1s 10s forwards;
    max-width: 14ch;
}

/* Медиа-запросы для мобильной адаптации */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12, h13, h14, h15, h16, h17, h18, h19, h20, h21, h22, h23, h24, h25, h26, h27, h28, h29, h30, h31, h32, h33, h34, h35, h36, h37, h38, h39, h40, h41, h42, h43, h44, h45, h46, h47, h48 {
        font-size: 180% !important; /* Уменьшаем размер шрифта */
        white-space: normal !important; /* Разрешаем перенос строк */
        text-align: center !important; /* Центрируем текст */
        padding: 0 15px !important; /* Добавляем отступы по бокам */
        max-width: 95% !important; /* Уменьшаем максимальную ширину */
        word-break: break-word !important; /* Разрешаем перенос длинных слов */
    }
    
    /* Уменьшаем ширину для анимации печати */
    h1 { max-width: 28ch !important; }
    h2 { max-width: 31ch !important; }
    h3 { max-width: 25ch !important; }
    h4 { max-width: 24ch !important; }
    h5 { max-width: 28ch !important; }
    h6 { max-width: 31ch !important; }
    h7 { max-width: 25ch !important; }
    h8 { max-width: 24ch !important; }
    h9 { max-width: 20ch !important; }
    h10 { max-width: 36ch !important; }
    h11 { max-width: 28ch !important; }
    h12 { max-width: 36ch !important; }
    h13 { max-width: 36ch !important; }
    h14 { max-width: 36ch !important; }
    h15 { max-width: 25ch !important; }
    h16 { max-width: 41ch !important; }
    h17 { max-width: 28ch !important; }
    h18 { max-width: 31ch !important; }
    h19 { max-width: 25ch !important; }
    h20 { max-width: 24ch !important; }
    h21 { max-width: 28ch !important; }
    h22 { max-width: 31ch !important; }
    h23 { max-width: 25ch !important; }
    h24 { max-width: 24ch !important; }
    h26 { max-width: 31ch !important; }
    h27 { max-width: 32ch !important; }
    h28 { max-width: 36ch !important; }
    h29 { max-width: 30ch !important; }
    h30 { max-width: 32ch !important; }
    h31 { max-width: 31ch !important; }
    h33 { max-width: 43ch !important; }
    h34 { max-width: 28ch !important; }
    h35 { max-width: 31ch !important; }
    h36 { max-width: 25ch !important; }
    h37 { max-width: 24ch !important; }
    h38 { max-width: 28ch !important; }
    h39 { max-width: 31ch !important; }
    h40 { max-width: 25ch !important; }
    h41 { max-width: 24ch !important; }
    h42 { max-width: 32ch !important; }
    h43 { max-width: 32ch !important; }
    h44 { max-width: 12ch !important; }
    h45 { max-width: 45ch !important; }
    h46 { max-width: 5ch !important; }
    h47 { max-width: 5ch !important; }
    h48 { max-width: 12ch !important; }
}

@media (max-width: 480px) {
    h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12, h13, h14, h15, h16, h17, h18, h19, h20, h21, h22, h23, h24, h25, h26, h27, h28, h29, h30, h31, h32, h33, h34, h35, h36, h37, h38, h39, h40, h41, h42, h43, h44, h45, h46, h47, h48 {
        font-size: 150% !important; /* Еще больше уменьшаем для маленьких экранов */
        padding: 0 10px !important;
    }
    
    /* Еще больше уменьшаем ширину для очень маленьких экранов */
    h1 { max-width: 22ch !important; }
    h2 { max-width: 25ch !important; }
    h3 { max-width: 20ch !important; }
    h4 { max-width: 19ch !important; }
    h5 { max-width: 22ch !important; }
    h6 { max-width: 25ch !important; }
    h7 { max-width: 20ch !important; }
    h8 { max-width: 19ch !important; }
    h9 { max-width: 16ch !important; }
    h10 { max-width: 29ch !important; }
    h11 { max-width: 22ch !important; }
    h12 { max-width: 29ch !important; }
    h13 { max-width: 29ch !important; }
    h14 { max-width: 29ch !important; }
    h15 { max-width: 20ch !important; }
    h16 { max-width: 33ch !important; }
    h17 { max-width: 22ch !important; }
    h18 { max-width: 25ch !important; }
    h19 { max-width: 20ch !important; }
    h20 { max-width: 19ch !important; }
    h21 { max-width: 22ch !important; }
    h22 { max-width: 25ch !important; }
    h23 { max-width: 20ch !important; }
    h24 { max-width: 19ch !important; }
    h26 { max-width: 25ch !important; }
    h27 { max-width: 26ch !important; }
    h28 { max-width: 29ch !important; }
    h29 { max-width: 24ch !important; }
    h30 { max-width: 26ch !important; }
    h31 { max-width: 25ch !important; }
    h33 { max-width: 34ch !important; }
    h34 { max-width: 22ch !important; }
    h35 { max-width: 25ch !important; }
    h36 { max-width: 20ch !important; }
    h37 { max-width: 19ch !important; }
    h38 { max-width: 22ch !important; }
    h39 { max-width: 25ch !important; }
    h40 { max-width: 20ch !important; }
    h41 { max-width: 19ch !important; }
    h42 { max-width: 26ch !important; }
    h43 { max-width: 26ch !important; }
    h44 { max-width: 10ch !important; }
    h45 { max-width: 36ch !important; }
    h46 { max-width: 4ch !important; }
    h47 { max-width: 4ch !important; }
    h48 { max-width: 10ch !important; }
}