/* Changes the animated text container properties */
.typer {
    display: grid;
    place-items: center;
    width: 350px;
    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;
}

/* Adds specific properies to submission message */
h2 {
    font-size: 1.5em;
    font-family: Oswald, Verdana, sans-serif;
}

/* Defines the properties of the container containing both sub containers */
#container {
    width: 94%;
    margin: 0 3%;
    display: flex;
    justify-content: space-between;
}

/* Defines the properties of the contact info container */
#contact-info {
    width: 49%;
    height: auto;
    padding: 3% 5%;
}

/* Defines the properties of the contact form container */
#contact-form {
    width: 49%;
    height: auto;
    padding: 3% 5%;
}

/* Defines the properties for the titles in both contact divs */
h3,
label {
    color: #0E0B0C;
    font-family: Bebas Neue, Verdana, sans-serif;
    font-weight: 500;
    margin-bottom: 0.3em;
    margin-top: 0;
}

/* Changes the contact info icons to defined properties */
.icons {
    width: 0.8em;
    margin-right: 0.5em;
}

/* Defines the properties for the titles in only the contact form */
label {
    margin-top: 1em;
    color: rgb(83, 83, 83)
}

/* Changes the contact info properties to match the page colors and layout */
p {
    font-family: Oswald, Verdana, sans-serif;
    margin: 2% 0;
    font-size: 0.8em;
    color: rgb(83, 83, 83);
}

/* Changes the line properties in the contact info */
hr {
    margin-top: 2em;
    color: rgb(83, 83, 83);
}

/* Changes the stars in the form labels to red*/
span {
    color: red;
}

/* Changes the form properties to match the container div */
form {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Changes the input elements to defined properties to match the page layout */
input,
textarea {
    width: 100%;
    height: 3em;
    background-color: #EFE9E4;
    border: solid 1px rgb(154, 153, 153);
    margin-bottom: 1em;
}

/* Changes the textarea input to a defined height */
#message {
    height: 6em;
}

/* Changes the submit button properties to match the page layout and colors */
#submit {
    width: 100%;
    font-family: Oswald, Verdana, sans-serif;
    font-size: 0.6em;
    height: 2.7em;
    background-color: rgb(154, 153, 153);
    color: white;
    transition: all 500ms;
}

/* Adds a hover animation over the submit button */
#submit:hover {
    background-color: #EFE9E4;
    cursor: pointer;
    border: solid 1px rgb(154, 153, 153);
    color: rgb(83, 83, 83);
}

/* Applies specific changes to elements such that they are compatible on mobile devices */
@media only screen and (max-width: 690px) {
    h1 {
        margin-top: 0.5em;
    }

    #container {
        display: block;
    }

    hr {
        margin-top: 2em;
        margin-bottom: 2em;
        color: rgb(83, 83, 83);
    }

    #contact-info {
        width: 100%;
        text-align: center;
        margin: 2em 0;
    }

    #contact-form {
        width: 100%;
        text-align: center;
    }
}

/* 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;
    }
}