/* Changes the animated text container properties */
.typer {
    display: grid;
    place-items: center;
    width: 450px;
    margin: 0 auto;
}

/* Changes the main header properties in the page and adds animations to it */
h1 {
    color: #0E0B0C;
    text-align: center;
    font-family: Oswald, Verdana, sans-serif;
    font-size: 3em;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    width: 0;
    animation: typing 1.5s steps(30, end) forwards, blinking 1s infinite;
}

/* Changes the 'last updated' text properties */
h5 {
    color: #0E0B0C;
    text-align: center;
    font-family: Oswald, Verdana, sans-serif;
    margin: 0 0 3em 0;
}

/* Gives specific properties to each term div */
.term {
    width: 100%;
    margin: 0 0 3em 0;
    padding: 0 3em;
}

/* Changes the properties of the title element of the term */
h2 {
    color: #0E0B0C;
    font-family: Oswald, Verdana, sans-serif;
    margin: 0;
}

/* Gives specific styling to the term description in the term div */
.term-p {
    color: rgb(83, 83, 83);
    font-family: Oswald, Verdana, sans-serif;
    margin: 0;
    white-space: wrap;
}

/* Defines the keyframes for the typing animation */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* Defines the keyframes for the cursor blinking animation */
@keyframes blinking {
    0% {
        border-color: transparent;
    }

    50% {
        border-color: black;
    }

    100% {
        border-color: transparent;
    }
}

/* Decreases font size of title on smaller devices such that it fits on the device screen */
@media only screen and (max-width: 690px) {
    h1 {
        font-size: 2em;
    }

    .typer {
        width: 320px;
    }
}