@font-face {
    font-family: "Graphik LCG-Regular";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/GraphikLCG-Regular.otf") format("opentype");
}

@font-face {
    font-family: "Graphik LCG-Medium";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/GraphikLCG-Medium.otf") format("opentype");
}

@font-face {
    font-family: "Graphik LCG-Light";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/GraphikLCG-Light.otf") format("opentype");
}


:root {
    --header-menu-icons-size: 25px;
    --before-after-color: #000000;
    --main-color: rgba(255, 140, 0, 1);
    --main-color-hover: #f15f1d;
    --main-color-border: #f6773e;
    --main-color-little: #ff8c00;
    --margin-top-20: 20px;
    --margin-bottom-10: 10px;
    --margin-bottom-20: 20px;
    --black: rgba(0, 0, 0, 1);
    --licorice: rgba(19, 19, 19, 1);
    --eerie-black: rgba(28, 28, 28, 1);
    --thunder: rgba(46, 46, 46, 1);
    --fruit-salad: rgba(80, 165, 87, 1);
    --concord: rgba(124, 125, 125, 1);
    --gray: rgba(145, 145, 145, 1);
    --alto-2: rgba(221, 221, 221, 0.2);
    --alto: rgba(221, 221, 221, 1);
    --alto-3: #343434;
    --alto-4: #5A5A5A;
    --order-color: #F8F8F8;
    --red: rgba(243, 1, 1, 1);
    --pizazz-2: rgba(255, 140, 0, 0.6);
    --pizazz: rgba(255, 140, 0, 1);
    --white-2: rgba(255, 255, 255, 0.102);
    --white-4: rgba(255, 255, 255, 0.502);
    --white-3: rgba(255, 255, 255, 0.6);
    --white: rgba(255, 255, 255, 1);
    --font-family-graphik_lcg-light: "Graphik LCG-Light", Helvetica;
    --font-family-graphik_lcg-medium: "Graphik LCG-Medium", Helvetica;
    --font-family-graphik_lcg-regular: "Graphik LCG-Regular", Helvetica;
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-23: 23px;
    --font-size-24: 24px;
    --font-size-25: 25px;
    --font-size-26: 26px;
    --font-size-27: 27px;
    --font-size-28: 28px;
    --font-size-29: 29px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-34: 34px;
    --font-size-40: 40px;
    --font-size-48: 48px;
    --font-size-50: 50px;
}

body {
    margin: 0 auto;
    font-family: var(--font-family-graphik_lcg-regular);
    font-size: var(--font-size-18);
    line-height: 1.5; /* расстояние между строками */
    color: #333;
    overflow-x: hidden;
    background-color: #1d1d1f;
}

html {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    color: var(--white);
}

:active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
}

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

p, i {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


h1, h2, h3, h4, h5, h6 {
    margin: 0; /* нулевые отстпуы для абзац */
}

hr {
    display: block;
    width: 100%;
    height: 3px;
    margin: 40px 0;
    border: 0;
    background-color: #e5e5e5;

}

button:hover {
    background-color: var(--main-color);
}

button:active {
    background-color: var(--main-color-hover);
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.title{
    font-family: var(--font-family-graphik_lcg-medium);
    font-size: var(--font-size-48);
    margin-top: var(--margin-top-20);
}

@media screen and (max-width: 1300px) {

    :root {
        --font-size-10: 8px;
        --font-size-12: 10px;
        --font-size-14: 12px;
        --font-size-16: 14px;
        --font-size-18: 16px;
        --font-size-20: 18px;
        --font-size-22: 20px;
        --font-size-23: 22px;
        --font-size-24: 23px;
        --font-size-25: 24px;
        --font-size-26: 24px;
        --font-size-27: 25px;
        --font-size-28: 26px;
        --font-size-29: 27px;
        --font-size-30: 28px;
        --font-size-32: 30px;
        --font-size-34: 32px;
        --font-size-40: 35px;
        --font-size-48: 42px;
        --font-size-50: 46px;
    }

}

@media screen and (max-width: 850px) {

    :root {
        --font-size-10: 8px;
        --font-size-12: 10px;
        --font-size-14: 12px;
        --font-size-16: 14px;
        --font-size-18: 15px;
        --font-size-20: 16px;
        --font-size-22: 18px;
        --font-size-23: 18px;
        --font-size-24: 22px;
        --font-size-25: 22px;
        --font-size-26: 24px;
        --font-size-27: 24px;
        --font-size-28: 25px;
        --font-size-29: 26px;
        --font-size-30: 26px;
        --font-size-32: 28px;
        --font-size-34: 30px;
        --font-size-40: 30px;
        --font-size-48: 38px;
        --font-size-50: 40px;
    }

}