:root {
    --color-white: #fefefe;
    --color-albastru: #264653;
    --color-verde: #2A9D8F;
    --color-blue: #30A9D6;
    --color-purple: #59344E;
    --color-purple-light: #AB4F98;
    --color-galben: #E9C46A;
    --color-portocaliu: #DE4F2C;
    --color-rosu: #E76F51;
    --color-petrol: #17333E;
    --color-negru: #242424;
    --color-gri: #454545;
    --color-light: #e1e5e5;
    --color-background: #eff2f2;
    --color-footer: #054e69;
    --color-footer-text: #dad9d9;
    --color-dots:#e1e5e5;
    --gradient: linear-gradient(90deg, var(--color-purple), var(--color-blue));
    --gradient-light: linear-gradient(90deg, var(--color-purple-light), var(--color-blue));
    --ff-Montserrat: 'Montserrat', sans-serif;
    --ff-Lato: 'Lato', sans-serif;
    --ff-Poppins: 'Poppins' , sans-serif;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--ff-Montserrat);
}

html {
    min-height: 100vh;
    padding: 0 9%;
    padding-top: 2rem;
}

h1 {
    color: var(--color-blue);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    padding: 1rem;
    letter-spacing: 0.1rem;
    padding: 1rem;
}

h2 {
    color: var(--color-purple-light);
    color: var(--color-blue);
    font-size: 24px;
    font-weight: 700;
    padding: 1rem;
}

p {
    color: var(--color-gri);
    font-size: 18px;
}

ol {
    color: var(--color-gri);
    font-size: 18px;
    padding-left: 2rem;
}

ul {
    color: var(--color-gri);
    list-style: square;
    font-size: 18px;
    padding-left: 2rem;
}

.subtitle {
    color: var(--color-purple-light);
    font-weight: 600;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    html {
        padding: 0 5%;
        padding-top: 1rem;
    }

    h1 {
        font-size: 22px;
        letter-spacing: .1px;
        padding: 1rem;
    }

    p {
        font-size: 12px;
    }

    h2 {
        font-size: 16px;
        padding: .5rem;
    }
    
    ol {
        font-size: 12px;
        padding-left: .8rem;
    }

    ul {
        font-size: 12px;
        padding-left: .8rem;
    }
}