/* Roboto Light */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* Roboto Light Italic */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}

/* Roboto Regular */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Roboto Italic */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* Roboto Medium */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* Roboto Medium Italic */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

/* Roboto Bold */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Roboto Bold Italic */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}




/* Urbanist Light */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* Urbanist Light Italic */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}

/* Urbanist Regular */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Urbanist Italic */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* Urbanist Medium */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* Urbanist Medium Italic */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

/* Urbanist Bold */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Urbanist Bold Italic */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist/Urbanist-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}


/* Raleway Bold */
@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway/Raleway-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

/* Raleway normal */
@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway/Raleway-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Raleway light */
@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway/Raleway-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}



*{
    padding: 0;
    margin: 0;
}


:root {
    --main-color: #F9FAFC;
    --main-contrast-color: #535C6B;
    --secondary-contrast-color: #3F4750;
    --secondary-selected-contrast-color: #dbdbdb;
    --secondary-unselected-contrast-color: #B0B5DA;
    --secondary-color: rgba(238, 241, 246, 0.60);
    --blue-color: #494E6F;

    --draft-color: #EDC684;
    --all-color: #AEB5FF;
    --published-color: #97DCA1;
    --tag-color: #aeb5ff80;
    --alert-color: #DC7A76;

    --main-font: 'Helvetica', sans-serif, 'Arial';

    --editor-main-color: #01093F;
    --editor-main-color-highlight: #FF6059;
    --editor-main-font: 'Helvetica', sans-serif, 'Arial';
  }


  body{
    width: 100%;
    height: 100vh;
    font-family: var(--main-font);
  }