:root {
    --white: #fff;
    --black: #0E0E0E;
    --gray1: #333;
    --gray2: #828282;
    --gray3: #ddd;
    --gray4: #f5f5f5;
    --error: #DB371F;
    --green: #34C759;
    --primary: #003E81;
    --background: #003E81;
}

* {
    font-family: Roboto, sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0;
    text-decoration: none;
    margin: 0;
}

h1 {
    font-size: 56px;
}

h2 {
    font-size: 48px;
}

h3 {
    font-size: 32px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

.typography-20reg,
.typography-caption,
.typography-caption-bold,
.typography-body,
.typography-body-bold,
.typography-12reg {
    line-height: 1.5;
    letter-spacing: 0;
    text-decoration: none;
    font-weight: normal;
    margin: 0;
}

.typography-20reg {
    font-size: 20px;
}

.typography-body,
.typography-body-bold {
    font-size: 16px;
}

.typography-caption,
.typography-caption-bold {
    font-size: 14px;
}

.typography-12reg {
    font-size: 12px;
}

.typography-body-bold,
.typography-caption-bold {
    font-weight: bold;
}

.btn-outlined,
.btn-contained,
.btn-secondary {
    border-radius: 6px;
    text-transform: none;
    padding: 10px 32px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    height: auto;
    box-shadow: none;
    border: none;
    transition: color .2s linear, background-color .2s linear;
    cursor: pointer;
}

.btn-outlined:hover,
.btn-outlined:focus,
.btn-contained:hover,
.btn-contained:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    box-shadow: none;
}

.btn-outlined {
    background-color: var(--white);
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-outlined:hover,
.btn-outlined:focus {
    background-color: #002063;
    color: var(--white);
}

.btn-outlined:active {
    background-color: #1E5C9F;
}

.btn-contained {
    background-color: var(--primary);
    color: var(--white);
    padding: 14px 32px;
}

.btn-contained:hover,
.btn-contained:focus {
    background-color: #002063;
}

.btn-contained:active {
    background-color: #1E5C9F;
}

.btn-secondary {
    background-color: var(--gray4);
    color: var(--black);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #EBEBEB;
}

.btn-secondary:active {
    background-color: var(--gray3);
}

@media (max-width: 900px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 36px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }
}