@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --background-page: rgb(11, 13, 26);
    
    --header-background: black;
    --header-height: 66px;

    --main-panel-on-page-background: #171718;
    --panel-on-page-background: #212225;

    --interactive-element-background: rgb(45, 45, 128);
    --interactive-element-background-hover: rgb(35, 35, 118);
    --interactive-element-background-active: rgb(35, 35, 108);
    --interactive-element-background-disabled: rgb(35, 35, 98);

    --interactive-element-dark-background: #2a2b3a;
    --interactive-element-dark-background-hover: #37394c;
    --interactive-element-dark-background-active: #3d3f5e;
    --interactive-element-dark-background-disabled: #202128;

    --interactive-element-text: white;
    --interactive-element-text-hover: white;
    --interactive-element-text-active: white;
    --interactive-element-text-disabled: white;

    --interactive-a: #BFC9D8;
    --interactive-a-hover: #ced8e7;
    --interactive-a-active: #e4eaf3;

    --interactive-input: rgb(45, 45, 128);
    --interactive-input-hover: rgb(35, 35, 118);
    --interactive-input-active: rgb(35, 35, 108);

    --interactive-input-checkbox-disc: white;
    --interactive-input-checkbox-disc-disabled: gray;

    --interactive-select-height: 40px;
    --interactive-select: rgb(45, 45, 128);
    --interactive-select-hover: rgb(35, 35, 118);
    --interactive-select-active: rgb(35, 35, 108);

    --icon-footer: #0096a1;
    --icon-footer-hover: #0ebac7;
    --medium-icon: 35px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 10px;
    --space-4: 15px;
    --space-5: 20px;

    --border-color: #2a2c36;
    --border-color-strong: #343647;
    --panel-border: 1px solid var(--border-color);
    --surface-border: 1px solid #242632;

    --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.28);
    --shadow-strong: 0 12px 30px rgba(0, 0, 0, 0.35);

    --panel-background: var(--panel-on-page-background);
    --surface-background: var(--main-panel-on-page-background);
}

html {
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--background-page);
    margin: 0;
    overflow-x: hidden;
}
body * {
    color: white;
    font-weight: 400;
    outline: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

hr {
    border: 0;
    height: 1px;
    width: 100%;
    margin: 5px;

    background: #333;
    background-image: linear-gradient(to right, #8d8d8d, #fff, #8d8d8d);
}

br {
    display: block;
    height: 5px;
    line-height: 22px;
    content: " ";
}

article {
    margin: 5px;
    padding: 5px;
    line-height: 1.2;
    color: rgb(230, 230, 230);
}

h1 {
    font-size: 25px;
    color: rgb(255, 255, 255);
}
h2 {
    font-size: 22px;
    color: rgb(245, 245, 245);
}
h3 {
    font-size: 18px;
    color: rgb(223, 223, 223);
}
h4 {
    font-size: 15px;
    color: rgb(235, 235, 235);
}
h5 {
    font-size: 13px;
    color: rgb(225, 225, 225);
}
h6 {
    font-size: 11px;
    color: rgb(215, 215, 215);
}

i {
    font-style: italic;
}
b {
    font-weight: bold;
}

li {
    margin-left: 25px;
}


#standart-container {
    display: flex;
    justify-content: center;

    min-height: 92vh;
    height: fit-content;

    padding-top: var(--header-height);
}