/*  styles and resizes the heading to make it responsive */
h1 {
    text-align: center;
    margin: 10px;
    font-size: 5vw;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

/*centers div tags*/
div {
    text-align: center;
}

/*container coloring and sizing*/ 
#container {
    background-color: #3babec;
    border: 2px solid #0e0b0b;
    border-radius: 10px;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
    text-align: center;
    color: #ffffff;
    padding: 25px;
    max-width: 800px;
    margin: 0 auto;
}

/* formatting for the buttons */
button {
    border: 2px solid #000000;
    border-radius: 10px;
    background-color: #4e5f70;
    color: #000000;
    align-self: center;
    padding: 25px;
    margin: 10px;
    font-size: 2vw;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    text-shadow: 2px 2px 10px rgb(247, 31, 31);
    letter-spacing: 7px;
}

/* ID that centers the validation text */
#validation {
    text-align: center;
}

/* add a margin around the entire footer */
footer {
    margin: 50px;
}

/*adds flavor to links*/
a {
    text-decoration: underline;
    color: var(--blackColor);
}

/*changes the links when pointer is hovering*/
a:hover {
    text-decoration: none;
    color: darkred;
    font-weight: bold;
}