:root {
    --dark-btn-color: #F4310F;
    --dark-btn-color-bg: rgba(244, 49, 15, 1);
    --dark-btn-color-hover: rgba(217, 44, 13, 1);
    --dark-btn-color-active: rgba(195, 34, 6, 1);

    --light-nav-btn-color-bg: rgba(255, 255, 255, 1);
    --light-nav-btn-color-hover: rgba(251, 227, 227, 1);
    --light-nav-btn-color-active: rgba(242, 209, 209, 1);

    --light-text-color-opacity: rgb(256, 256, 256, 0.5);
    --light-text-color: #FFF;
    --light-btn-color: #FFF;
    --light-btn-color-hover: #F0F0F0;
    --dark-text-color: #191919;

    --transition-btn: .7s;
    --scale-btn: 1.03;

    --padding-nav: 24px;
    --block-padding: 24px;

}

* {
    box-sizing: border-box;
    font-family: "SFPro", Arial, sans-serif;
}

body {
    margin: 0;
}

@font-face {
    font-family: "SFPro";
    src: url("../fonts/SF-Pro-Display-Thin.otf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFPro";
    src: url("../fonts/SF-Pro-Display-Ultralight.otf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFPro";
    src: url("../fonts/SF-Pro-Display-Light.otf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFPro";
    src: url("../fonts/SF-Pro-Display-Regular.otf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFPro";
    src: url("../fonts/SF-Pro-Display-Medium.otf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFPro";
    src: url("../fonts/SF-Pro-Display-Bold.otf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}