@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: normal;
    src: url("./fonts/Roboto-Regular.ttf") format('truetype');
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: bold;
    src: url("./fonts/Roboto-Medium.ttf") format('truetype');
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: normal;
    src: url("./fonts/Roboto-Italic.ttf") format('truetype');
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: bold;
    src: url("./fonts/Roboto-MediumItalic.ttf") format('truetype');
}

:root {

    --light-base-color-1: #d0e4fd;
    --light-base-color-2: #d7ebf8;
    --dark-base-color: #167AF5;
    --base-color-gray: #f1f4f8;
    --base-color-gray-dark: #c5c9ce;
    --light-gray-1: #e0e2e4;
    --color-black: #333333;
    --base-color-black: #f7f7f7;
    --color-white: #FFFFFF;
    --color-yellow: #FFC107;
    --color-red: #DC3545;
    --color-light-red: #ffd5d5;
    --color-green: #5CB85C;
    --color-light-green: #e1f1e1;
    --light-background : #d0e4fd;


    --light-gray-2: var(--light-gray-1);
    --default-color: var(--dark-base-color);
    --secondary-color: var(--light-base-color-2);
    --primary-button-hover: #0B3B75;
    --primary-button-click: #0B3B75;
}


body {
    font-family: "Roboto", serif;
    /*letter-spacing: 0.03em;*/
    background: var(--base-color-black);
    width: 100%;
    height: 100%;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333;
}