@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto'), url('../fonts/Roboto/Roboto-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: local('Roboto Thin'), url('../fonts/Roboto/Roboto-Thin.woff') format('woff');
}

.font-thin {
    font-weight: 100;
}

h1 {
    font-size: 2.5rem;
    /* 42px */
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: normal;
}

h3>b {
    font-weight: bolder;
}

p {
    font-size: 1.2rem;
    /* 16px */
}

.welcome-text>h1,
.introduction>.highlight {
    font-size: 2.4rem;
}

@media (max-width:1281px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .welcome-text>h1,
    .introduction>.highlight {
        font-size: 2.15rem;
    }
}

@media (max-width:481px) {
    h1 {
        font-size: 1.375rem;
    }

    h2 {
        font-size: 1.175;
    }

    h3 {
        font-size: 1rem;
    }

    p {
        font-size: 0.8rem;
    }

    .welcome-text>h1,
    .introduction>.highlight {
        font-size: 1.1rem;
    }
}

@media (max-width:321px) {
    h1 {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1rem;
    }

    h3 {
        font-size: 0.75rem;
    }

    p {
        font-size: 0.8rem;
    }

    .welcome-text>h1,
    .introduction>.highlight {
        font-size: 1rem;
    }
}