/* global styles */


/* Global CSS Reset

box-sizing: border-box

width includes:
- content
- padding
- border

Makes layouts and responsive design predictable.

*/
*,
*::before,
*::after {
    box-sizing: border-box;
}


body {
    margin: 0;
    padding: 0;
    font: 14px/1.5 "Tahoma", Arial, sans-serif;
}

:root {

    /* Layout */
    --site-max-width: 100%;
    --site-padding: 0px;
    --site-min-width: 378px;


    --middle-max-width: 1920px;

    /* Typography */

    --font-size-page-title: clamp(20px, 2.2vw, 30px);
    --font-size-section-title: clamp(17px, 1.8vw, 20px);

    --font-weight-page-title: 700;
    --font-weight-section-title: 700;

    /* Content */

    --content-block-padding: 24px;
    --content-block-radius: 8px;
    --content-image-radius: 4px;

    /* Effects */

    --content-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* TODO check all if not using */
    --color-page-bg: #f4f7fb;

    --color-surface: #ffffff;
    --color-surface-soft: #f7f9fc;

    --color-text: #1d2430;
    --color-text-muted: #687387;

    --color-border: #dfe5ec;
    --color-content-code-bg: #000000;
    --color-content-code-text: rgb(255, 255, 255);
    --color-content-text-default: #000000;
    --color-content-text-branded: #16853b;
    --color-content-link: #16853b;
    --color-content-bg-default: #16853b;
    --color-content-bg-default-light:#27963a; /*TODO delete if use in 1 place*/
}

.site-shell {
  width: 100%;
  max-width: var(--site-max-width);
  min-width: var(--site-min-width);
  margin-inline: auto;
  padding-inline: var(--site-padding);
}

.site-shell > div + div {
    margin-block-start: 0px;
}

#top_panel {
    margin-block-start: 0;
}

#main_content {
    margin-block-start: 0;
    max-width: var(--middle-max-width);
    width: 100%;
    margin-inline: auto;
}


#bottom_panel {
    margin-block-start: 20px;
}