html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #6ec1ba;
    font-family: "roboto";
}

body
{
    overflow-x: hidden;
}

.keywords
{
    color: transparent;
    font-size: 8px;
    display: none;
    position:absolute;
}

:root
{
	--dr-font-demibold: 'dr-font';
    --dr-primary-color-light:   #a0f4ec;
    --dr-primary-color:         #6ec1ba;
    --dr-primary-color-dark:    #3b908a;
    --dr-color-on-primary:      #ffffff;
    --dr-cloud-light-color:     #DCF0F7;

    /* Color System*/
    --md-sys-color-background: #171212;
    --md-sys-color-on-background: #ece0df;

    --md-sys-color-surface: #171212;
    --md-sys-color-surface-dim: #171212;
    --md-sys-color-surface-bright: #3f3837;
    --md-sys-color-surface-container-lowest: #120d0d;
    --md-sys-color-surface-container-low: #201a1a;
    --md-sys-color-surface-container: #241e1e;
    --md-sys-color-surface-container-high: #2f2828;
    --md-sys-color-surface-container-highest: #3a3333;
    --md-sys-color-on-surface: #ece0df;

    --md-sys-color-surface-variant: #524343;
    --md-sys-color-on-surface-variant: #d7c2c1;

    --md-sys-color-inverse-surface: #ece0df;
    --md-sys-color-inverse-on-surface: #352f2f;

    --md-sys-color-outline: #9f8c8c;
    --md-sys-color-outline-variant: #524343;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: #feb3b3;

    --md-sys-color-primary: #feb3b3;
    --md-sys-color-on-primary: #512223;
    --md-sys-color-primary-container: #965a5a;
    --md-sys-color-on-primary-container: #ffffff;
    --md-sys-color-inverse-primary: #884e4e;

    --md-sys-color-secondary: #e4bdbc;
    --md-sys-color-on-secondary: #432a2a;
    --md-sys-color-secondary-container: #543939;
    --md-sys-color-on-secondary-container: #f3cccb;

    --md-sys-color-tertiary: #efd28b;
    --md-sys-color-on-tertiary: #3e2e00;
    --md-sys-color-tertiary-container: #c4a966;
    --md-sys-color-on-tertiary-container: #2b1f00;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    /* Topography Display*/
    --dr-display-large-font : Roboto;
    --dr-display-large-weight : 400;
    --dr-display-large-size : 3.5625rem;
    --dr-display-large-line-height : 4rem;
    --dr-display-large-tracking : -0.015625rem;

    --dr-display-medium-font : Roboto;
    --dr-display-medium-weight : 400;
    --dr-display-medium-size : 2.8125rem;
    --dr-display-medium-line-height : 3.25rem;
    --dr-display-medium-tracking : 0rem;

    --dr-display-small-font : Roboto;
    --dr-display-small-weight : 400;
    --dr-display-small-size : 2.25rem;
    --dr-display-small-line-height : 2.75rem;
    --dr-display-small-tracking : 0rem;

    /* Topography Headline*/
    --dr-headline-large-font : Roboto;
    --dr-headline-large-weight : 400;
    --dr-headline-large-size : 2rem;
    --dr-headline-large-line-height : 2.5rem;
    --dr-headline-large-tracking : 0rem;

    --dr-headline-medium-font : Roboto;
    --dr-headline-medium-weight : 400;
    --dr-headline-medium-size : 1.75rem;
    --dr-headline-medium-line-height : 2.25rem;
    --dr-headline-medium-tracking : 0rem;

    --dr-headline-small-font : Roboto;
    --dr-headline-small-weight : 400;
    --dr-headline-small-size : 1.5rem;
    --dr-headline-small-line-height : 2rem;
    --dr-headline-small-tracking : 0rem;

    /* Topography Title */
    --dr-title-large-font : Roboto;
    --dr-title-large-weight : 400;
    --dr-title-large-size : 1.375rem;
    --dr-title-large-line-height : 1.75rem;
    --dr-title-large-tracking : 0rem;

    --dr-title-medium-font : Roboto;
    --dr-title-medium-weight : 400;
    --dr-title-medium-size : 1rem;
    --dr-title-medium-line-height : 1.5rem;
    --dr-title-medium-tracking : 0.009375rem;

    --dr-title-small-font : Roboto;
    --dr-title-small-weight : 400;
    --dr-title-small-size : 0.875rem;
    --dr-title-small-line-height : 1.25rem;
    --dr-title-small-tracking : 0.00625rem;

    /* Topography Body */
    --dr-body-large-font : Roboto;
    --dr-body-large-weight : 400;
    --dr-body-large-size : 1rem;
    --dr-body-large-line-height : 1.5rem;
    --dr-body-large-tracking : 0.03125rem;

    --dr-body-medium-font : Roboto;
    --dr-body-medium-weight : 400;
    --dr-body-medium-size : 0.875rem;
    --dr-body-medium-line-height : 1.25rem;
    --dr-body-medium-tracking : 0.015625rem;

    --dr-body-small-font : Roboto;
    --dr-body-small-weight : 400;
    --dr-body-small-size : 0.75rem;
    --dr-body-small-line-height : 1rem;
    --dr-body-small-tracking : 0.025rem;

    /* Topography Label */
    --dr-label-large-font : Roboto;
    --dr-label-large-weight : 400;
    --dr-label-large-size : 0.875rem;
    --dr-label-large-line-height : 1.25rem;
    --dr-label-large-tracking : 0.00625rem;

    --dr-label-medium-font : Roboto;
    --dr-label-medium-weight : 400;
    --dr-label-medium-size : 0.75rem;
    --dr-label-medium-line-height : 1rem;
    --dr-label-medium-tracking : 0.03125rem;

    --dr-label-small-font : Roboto;
    --dr-label-small-weight : 400;
    --dr-label-small-size : 0.6875rem;
    --dr-label-small-line-height : 1rem;
    --dr-label-small-tracking : 0.03125rem;
}

p {
    font-family : var(--dr-body-medium-font);
    font-size: var(--dr-body-medium-size);
    line-height: var(--dr-body-medium-line-height);
}



@font-face {
    font-family: 'dr-font';
    src: url('../fonts/dr-font-demibold.woff2') format('woff2'),
        url('../fonts/dr-font-demibold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
  
  }

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