@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap');

body{
    font-family: 'Source Serif Pro', serif;
    font-weight: bold;
    background-color: #f0d7d7;
    /* background-image: url("images/stock1.jpg");
    background-size: cover; */
}

h1{
    text-align: center;
    padding: 1rem; 
}
label {
    display: block;
    text-align: center;
    padding: 1rem;
    color: black;
}

button{
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 1rem;
    padding: 0.1rem 1rem;
    font-family: 'Source Serif Pro', serif;
    font-size: large;
}

button:hover {
    background-color: #F38C8C;
    color: black;
}

#outputEl {
    margin: auto;
    padding: 1rem;
    text-align: center;
    width: 50%;
    font-size: large;
}
.hero {
    padding: 2rem;
    padding-top: 2rem;
}

.hero .hero-img {
    max-width: 80%;
    width: 350px;
    display: block;
    margin: auto;
}
 
.hero .hero-heading {
    text-align: center;
    padding-top: 1rem;
    color: var(--dark-gray);
}

.hero .h2-hero-heading {
    text-align: center;
    color: var(--dark-gray);
    padding: 0rem;
    margin-top: 0rem;
}

.hero .hero-heading .heading-inverted {
    color: #d14949;
}

.stock-para .heading-inverted {
    color: #d14949;
}
.stock-para{
    text-align: center;
    font-size: large;
}