body {
    background-color: black;
    color: white;
}

a {
    color: white;
}

p {
    color: #0dc7f5;
}


/* DEMO-SPECIFIC STYLES */
.typewriter {
    margin-left: 1px;
    width: 800px;
    /*border: 3px solid green;*/
    padding: 10px;
}

.typewriter h1 {
    color: #0dc7f5;
    font-family: Fixedsys62;
    font-size: 20px;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: 2px solid black; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 /*auto*/; /* Gives that scrolling effect as the typing happens */
    letter-spacing: 0.1em; /* Adjust as needed */

    /* these have to be unitless until browser remove units in divisions */
    --duration: 1;  /* duration of the animation  */
    --delay:    10;  /* delay before the animation */
    --pause:    1;  /* pause after the animation  */

    --unit:     1s; /* required because browsers skipped some math classes */
    --total: calc(var(--delay) + var(--duration) + var(--pause));
    --total-duration: calc(var(--total) * var(--unit));

    --delay-start: calc(var(--delay) / var(--total) * 100%);
    --pause-start: calc((var(--delay) + var(--pause)) / var(--total) * 100%);
  
    --timing:
    linear(0, 
        0 var(--delay-start), 
        1 var(--pause-start), 
        1);



    animation:
        typewriter 5s steps(59) infinite alternate,
        blink-caret 0.5s step-end infinite normal;
}

/* The typing effect */
@keyframes typewriter {
    from {
        width: 0%;
    }
    to { 
        width: 100%;
    }
}

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







/* ================================ font ================================ */
@font-face {
	font-family: Fixedsys62;
	src:
		local("Fixedsys62"),
		url('../Fonts/Fixedsys62.ttf')
}