styles.css

body {
    border: 20%;
    margin: 15%;
    padding: 30px;
}

#welcome, h1 {
    font-family:'Courier New', Courier, monospace;
    color: #0D3B66;
    font-size: 30px;
    font-weight: bold;
}
h3, h4, li{
    font-family: 'Courier New', Courier, monospace;
    color: navy;
    text-align: center;
}

h2 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
li, h4 {
    font-weight: bold;
}

.menu-items {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 5%;
    margin: 2%;
    padding: 1px;
}

#templates {
    padding-top: 20px;
    color: white;
}

#create-my-own {
    padding-top: 20px;
    color: white;
}


#iphone {
    size: 50%;
    margin: auto;
    position: relative;
    height: auto;
    justify-content: center;
}

#typewriter {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em navy; /* 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: .15em; /* Adjust as needed */
    animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

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

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


.text-block {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 60%;
    transform: translate(-50%, -50%)
}