/***********************************************
Font-face setup
***********************************************/
@font-face {
    font-family: 'typewriter';
    src: url('../fonts/typewriter.woff2') format('woff2'),
         url('../fonts/typewriter.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'abrilfatface';
    src: url('../fonts/abrilfatface-regular-webfont.woff2') format('woff2'),
         url('../fonts/abrilfatface-regular-webfont.woff') format('woff');
    font-weight:700;
    font-style:bold;
}

/***** Fonts overrides *****/
body, form, input, button, textarea, select, label,
.select select, .select optgroup option,
.select optgroup option, .checkbox > span label,
.radio > span label, form .message, .btn        { font-family:'typewriter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; color:var(--color-gray500); letter-spacing:.5px; }

html, body                                      { margin:0; padding:0; background-color:var(--color-snow); }
html                                            { scroll-behavior:smooth; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6                    { font-weight:bold; font-family:abrilfatface; color:#1E1D1B; flex-wrap:wrap; }

h1, .h1                                         { font-size:5rem; line-height:5.4rem; font-weight:bold; }
h2, .h2                                         { font-size:4rem; line-height:4.2rem; font-weight:bold; }
h3, .h3                                         { font-size:3.6rem; line-height:3.8rem; font-weight:bold; }
h4, .h4                                         { font-size:2.6rem; line-height:2.8rem; font-weight:bold; }
h5, .h5                                         { font-size:1.8rem; font-weight:bold; color:var(--color-gray500); font-family:inherit; max-width:900px; }
h6, .h6                                         { font-size:1.4rem; line-height:2rem; }

p                                               { max-width:800px; }
hr                                              { margin:20px 0; border-top:3px solid var(--color-cream500); height:1px; width:50px; align-self:center; }
hr.hr--s                                        { margin:20px 0; align-self:flex-start; }
a                                               { display:inline-flex; grid-gap:8px; align-items:center; }
strong                                          { font-weight:bold; color:var(--color-brand500); }

.dl-qanda                                       { flex:1; }
.dl-qanda dt                                    { margin:0 0 0 25px; padding:0 0 10px 15px; border-left:1px solid #BBB; font-size:2rem; position:relative; top:0; left:0; }
.dl-qanda dt:before                             { content:'Q'; color:#BBB; font-weight:bold; font-size:2rem; position:absolute; top:0; left:-25px; }

.dl-qanda dd                                    { margin:0 0 50px 25px; padding:0 0 0 15px; border-left:1px solid #BBB; display:flex; flex-direction:column; gap:20px; position:relative; top:0; left:0; }
.dl-qanda dd:before                             { content:'A'; color:#BBB; font-weight:bold; font-size:2rem; position:absolute; top:0; left:-25px; }


/***********************************************
Tablet - This applies from 768px onwards
***********************************************/
@media (min-width:768px)                        {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6                {  }

    hr                                          { margin:50px 0; }
    hr.hr--s                                    { margin:30px 0; }
}