@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,800;0,900;1,400;1,500;1,800;1,900&display=swap');


html, body {
    height: 100%;
    /* font-family: 'Montserrat', sans-serif; */
}
/* 
 This CSS file is used to override the existing styles of the theme.
 You can change the article headings, fonts, colors, etc.
*/
:root {
    --color-primary: #778A35;
    --color-secondary: #EBEBE8;
    --color-bg-light: #778A35;
    --color-bg-lighter: #EBEBE8;
    --color-bg-dark: #31352E;
    --color-text-dark: #31352E;
    --color-text-light: #778A35;
    --color-text-lighter: #EBEBE8;
    --color-primary-a0: #ffffff;
    --color-primary-a10: #c7bfdb;
    --color-primary-a20: #9083b7;
    --color-primary-a30: #594c93;
    --color-primary-a50: #191970;
    --color-primary-a60: #191554;
    --color-primary-a70: #161139;
    --color-primary-a80: #110920;
    --color-primary-a90: #000000;
}

.bg-color-primary {
    background-color: var(--color-primary);
}

.center-margin {
    margin: 0 auto;
}
.section.container {
    margin: 0 auto;
}
.section-title {
    position: relative;
    height: 4em;
    display: contents;
}
.section-title h2::after {
    content: "";
    position: relative;
    display: block;
    width: 2.5em;
    height: 0.1em;
    background: var(--color-primary);
    bottom: 0;
    left: 0;
}
.profile-image {
    width: 300px;
}
.text-color-primary {
    color: var(--color-text-dark);
}

.bg-color-secondary {
    background-color: var(--color-secondary);
}

.hero-landing {
    margin-top: -120px;

    /* color: var(--color-text-lighter); */
    background-image: 
        radial-gradient(circle at center, rgba(223, 232, 225, 1), rgba(95, 199, 127, 0.35)),
        url(https://res.cloudinary.com/dkkma8dik/image/upload/f_auto,q_auto/v1/msr-energy-ventures/uswlj64pni1qzghts1np);

}

.hero-text {
    font-size: 72px;
    font-weight: bold;
    @media (max-width: 400px) {
        
        font-size: 60px;
    }
}

.hero-cta {
    margin: 0 auto;
    width: 300px;
    background-color: var(--color-bg-dark);
    font-weight: bold;
    border-radius: 5px;
    padding: 1rem;
    font-size: 20px;
}

.separator {
    display: block;
    width: 200px;
    height: 0.25rem;
    background-color: var(--color-primary);
    margin: 1rem auto;
}
input[type=email] {
    width: 100%;
    max-width: 72em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}