@font-face {
    font-family: 'Terminal';
    src: url('font/Terminal.ttf');
    font-weight: normal;
    font-style: normal;
}

*{
    margin: 0;
    margin-left: 4px;

    padding: 0;
    background-color: black;
    color: rgb(255, 0, 0);
    letter-spacing: 2px;
    font-family: 'Terminal', sans-serif;
}

.txt_intro{
    margin-top: 20px;
    font-size: 30px;
}

.terminal{
    margin-top: 100px;
    font-size: 45px;
    display: flex;
}

.terminal_user{
    animation: 
    appear 0.8s linear 0s 4 normal both,
    dissolve 0.1s ease 3.2s 1 normal forwards;
}

.typing {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    animation:
    typing 1.2s steps(6, end) 3.6s forwards,
    erasing 1.2s steps(6, end) 6s forwards;

}

.typing2 {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    animation:
    typing2 1.8s steps(13, end) 8s forwards,
    erasing2 1.8s steps(13, end) 11s forwards;

}

.typing3 {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    animation:
    typing3 0.6s steps(5, end) 13s forwards;
}

.terminal_error{
    opacity: 0;
    font-size: 45px;
    display: flex;
    animation: appear 0.1s linear 14s normal forwards;
}

.terminal2{
    margin-top: 100px;
    font-size: 45px;
    display: flex;
    opacity: 0;
    animation: appear 0.1s linear 14s normal forwards;
}

.terminal_user2{
    animation: 
    appear 0.8s linear 14s 5 normal both,
    dissolve   0.1s ease  18s 1 normal forwards;
}

.typing4 {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    animation:
    typing3 0.6s steps(5, end) 18s forwards;
}

.terminal_error2{
    opacity: 0;
    font-size: 45px;
    display: flex;
    animation: appear 0.1s linear 19s normal forwards;
}

.terminal_error3{
    opacity: 0;
    font-size: 45px;
    display: flex;
    animation: appear 0.1s linear 22s normal forwards;
}

.terminal_error4{
    opacity: 0;
    font-size: 45px;
    display: flex;
    animation: appear 0.1s linear 27s normal forwards;
}

.terminal_error5{
    opacity: 0;
    font-size: 45px;
    display: flex;
    animation: appear 0.1s linear 32s normal forwards;
}

.terminal_success{
    opacity: 0;
    font-size: 45px;
    display: flex;
    animation: appear 0.1s linear 35s normal forwards;
}

.yes{
    color : green;
    text-decoration: none;
}

@keyframes appear {
    From{
        opacity: 0;
    }
    To{
        opacity: 1;
    }
}

@keyframes typing {
  from {
        width: 0; 
    }
  to { 
        width: 6ch; 
    } 
}

@keyframes erasing {
  from {
        width: 6ch; 
    }
  to { 
        width: 0; 
    } 
}

@keyframes typing2 {
  from {
        width: 0; 
    }
  to { 
        width: 13ch; 
    } 
}

@keyframes erasing2 {
  from {
        width: 13ch; 
    }
  to { 
        width: 0; 
    } 
}

@keyframes typing3 {
  from {
        width: 0; 
    }
  to { 
        width: 5ch; 
    } 
}


@keyframes dissolve {
  from { 
        opacity: 1;
    }
  to {
        opacity: 0;
    }
}