html {
    font-size: 18px;

    @media (min-width: 900px) {
        font-size: 24px;
    }
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.45;
    color: #0F1108;
}

h1 {
    font-size: 2.2rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.15;

    @media (min-width: 900px) {
        font-size: 2.488rem;
    }
}

h2 {
    font-size: 1.4rem;
    margin: 0.5rem 0;
    line-height: 1.15;
    font-weight: 200;

    @media (min-width: 900px) {
        margin: 1rem 0;
        font-size: 1.44rem;
    }
}

p {
    margin-top: 0.25rem;

    @media (min-width: 900px) {
        margin-top: 0.5rem;
    }
}

a {
    color: #0F1108;
    text-decoration: none;
    border-bottom: currentcolor 1px solid;
}

.container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1rem 100px 1rem;

    @media (min-width: 900px) {
        max-width: 650px;
        padding: 0 1rem 90px 1rem;
    }
}

.app {
    position: relative;
    background: #F2E9DE;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 2rem);
    margin: 1rem;
    overflow: hidden;
}