:root {
    --body-background-color: #D7D7D7;
    --dark-background: #414A67;
    --body-heading-text: #363D55;
    --input-outline: #D0D0D0;
    --button: #587EF4;
    --red-buttons: #FF465A;
    --white-text: #FFFFFF;
}

body{
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    /*******************************************************************************
    * Title: The Importance of Having a Personal Expense Tracker
    * Author: Jesmary K J
    * Site: LinkedIn
    * Date: 2025
    * Code Version: -
    * Availability: https://media.licdn.com/dms/image/v2/D5612AQGplp7JKG6Iiw/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1673950361361?e=2147483647&v=beta&t=L4d5P81GijVgU4u1yJtFLVsIqATkfWTrymEPSd_C6_o
    * Accessed: 29 Nov 25
    * Modified: No modifications made. Budget image for welcome page taken from article.
    *******************************************************************************/
    background-image: url("https://media.licdn.com/dms/image/v2/D5612AQGplp7JKG6Iiw/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1673950361361?e=2147483647&v=beta&t=L4d5P81GijVgU4u1yJtFLVsIqATkfWTrymEPSd_C6_o");
    /* END OF REFERENCED CONTENT */

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container{
    padding: 2em;
    width: 80vw;
    text-align: center;

    /*******************************************************************************
    * Title: Glassmorphism CSS Generator
    * Author: CSS Glass
    * Site: https://css.glass
    * Date: 2025
    * Code Version: -
    * Availability: https://css.glass
    * Accessed: 29 Nov 25
    * Modified: No modifications made. Using to create glass effect on container.
    *******************************************************************************/
    background: rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.0px);
    -webkit-backdrop-filter: blur(4.0px);
    border: 1px solid rgba(255, 255, 255, 0.39);
    /* END OF REFERENCED CONTENT */
}

.container:hover {
    transition: 0.5s ease-in-out;
    backdrop-filter: blur(6.0px);
    -webkit-backdrop-filter: blur(6.0px);
}

.container h1, .container h2 {
    color: var(--body-heading-text);
}

.container h1{
    font-size: 8vw;
    margin: 2vw;
}

.container h2 {
    font-size: 5vw;
    margin: 2vw;
}

.container input[type = "text"] {
    border: 1px solid var(--input-outline);
    width: 50vw;
    height: 4vw;
    box-shadow: 1px 1px 1px 1px var(--input-outline);
    font-size: 16px;
}

.container input[type = "submit"] {
    background-color: var(--button);
    color: var(--white-text);
    padding: 2vw;
    width: 20vw;
    margin-top: 2vw;
    border: none;
    border-radius: 0.5em;
    font-size: 2vw;
}

.container input[type = "submit"]:hover {
    background-color: var(--dark-background);
    transition: 0.2s ease-in;
}

#errorOutput {
    color: red;
    font-size: 2vw;
}