@font-face {
    font-family: "Open Sans";
    src: url("src/fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
    font-family: "Typo Round bold";
    src: url("src/fonts/Typo_Round_Bold_Demo.otf") format("opentype");
}

:root {
    --white : #ffffff;
    --black : #000;
    --light-grey : #f2f2f2;
    --dark-grey : #b2b2b2;
    --dark-green : #153027;
    --warm-yellow : #fab434;
    --cold-blue : #416eaf;
    --warning-red : #bf3824;

    --background-color : var(--dark-green);
    --big-block-color : var(--light-grey);
    --h1-color : var(--white);
    --h2-color : var(--dark-green);
    --text-color : var(--black);
    --selected-color : var(--dark-green);
    --unselected-color : var(--dark-grey);
    --CTA-button-background : var(--dark-green);
    --CTA-text-color : var(--white);
}

body {
    background-color: var(--background-color);
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
}

#scaffold {
    max-width: 1080px;
    margin: auto;
}

h1 {
    color: var(--h1-color);
    font-family: "Typo Round bold", sans-serif;
    text-align: center;
}

h2 {
    color: var(--h2-color);
    font-size : 2rem;
    margin: 0;
}

.big-block {
    background-color: var(--big-block-color);
    border-radius: 1.5rem;
    padding: 0.5rem;
}

.big-block, .CTA-button {
    margin-bottom: 1rem;
}

.title-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.title-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--h2-color);
    border-radius: 1rem;
}

#homeIcon {
    background-image: url("src/home-icon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}

#heatIcon {
    background-image: url("src/heater-icon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}

#savingsIcon {
    background-image: url("src/savings-icon.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}