@font-face {
    font-family: "Redaction 50";
        src: url("Fonts/Redaction_50-Regular.woff2") format("woff2"),
                url("Fonts/Redaction_50-Italic.woff2") format("woff2");
    font-family: "Redaction 100";
        src: url("Fonts/Redaction_100-Regular.woff2") format("woff2");
}

body{
    background-color: black;
    font-family: 'Redaction 50';
    font-style: italic;
    font-size: 1em;
    overflow: hidden;
    animation: fontChange3 4s infinite;
}

@keyframes fontChange3 {
    0%      { font-family: 'Redaction 50'; }
    40%      { font-family: 'Redaction 100'; }
    41%      { font-family: 'Redaction 50'; }
}

p{
    color: white;
    position: absolute;
    overflow: hidden;
    letter-spacing: .15em;
}

@keyframes typing {
    from{width: 0;} to{width: 100%;}
}

#text1{
    width: 90vw;
    left: 15vw;
    top: -1vw;
    animation: typing 2s steps(40, end), fontChange1 0.5s infinite;
}

@keyframes fontChange1 {
    0%      { font-style: italic; }
    50%     { font-style: normal; }
}

#text2{
    width: 85vw;
    left: 15vw;
    top: 5vw;
    animation: typing 4s steps(40, end)
}

#text3{
    width: 95vw;
    left: 5vw;
    top: 5vw;
    font-size: 1.5em;
    animation: typing 5s steps(40, end);
}

#text4{
    width: 85vw;
    left: -2vw;
    top: 5vw;
    font-size: 2em;
    animation: typing 3s steps(40, end), fontChange2 0.2s infinite;
}

@keyframes fontChange2 {
    0%      { font-style: italic; }
    50%     { font-style: normal; }
}