@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Regular.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Italic.ttf');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Light.ttf');
    font-style: normal;
    font-weight: lighter;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-LightItalic.ttf');
    font-style: italic;
    font-weight: lighter;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Bold.ttf');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

:root {
    --primary-green-dark: #71A857;
    --primary-green: #92D373;
    --primary-light: #ABE191;

    --primary-blue-dark: #517EA8;
    --primary-blue: #76A9D8;
    --primary-blue: #B0CFEC;

    --grey-dark: #323940;
    --grey: #848B90;
    --grey-light: #C9D3DA;
    --grey-lightest: #E8EAEB;

    --white-washed: #EDEEEF;
    --white-normal: #FFFFFF;

    --error: #D96161;
    --error-light: #FB9F9F;
    --warn: #D9A133;
    --warn-light: #F2DDB3;
    --success: #60B552;
    --success-light: #BCE2B6;
    --info: #608FBA;
    --info-light: #ABC8E3;
}

* {
    padding: 0;
    margin: 0;
    border: 0;
    font-family: 'Roboto';
    font-size: 13px; 
    color: var(--grey-dark);
}

html, body {
    width: 100%;
    height: 100%;
}

h1 { font-size: 2.5rem; padding: 24px 4px 4px; }
h2 { font-size: 2.0rem; padding: 24px 4px; }
h3 { font-size: 1.5rem; padding: 24px 4px; }
h4 { font-size: 1.25rem; padding: 24px 4px; }

hr {
    margin: 24px 0;
    width: 100%;
    border-bottom: 1px solid black;
}