:root {
    --black: #434343;
    --white: #FFFFFF;
    --grey: #EEEEEE;
    --maincolor: #BE9E76;
    --site-name-color: #607943;
    --site-enName-color: #9B5702;
    --underline-text-mouse-off: rgba(106, 106, 106, 1);
    --underline-line-mouse-off: rgba(106, 106, 106, 0.2);
    --underline-text-mouse-over: rgba(127, 72, 16, 1);
    --underline-line-mouse-over: rgba(127, 72, 16, 0.2);
    --header-bg: var(--white);
    --intro-content-color: var(--black);
    --intro-gradient-start-color: #F3F1E9;
    --intro-gradient-end-color: #F3F1E9;
    --intro-gradient-percent: 20%;
    --list-btn-bg-mouse-off: var(--white);
    --list-btn-border-mouse-off: var(--maincolor);
    --list-btn-bg-mouse-over: var(--maincolor);
    --list-btn-border-mouse-over: var(--maincolor);
    --article-title-color: #9B5702;
    --article-content-color: var(--black);
    --site-bg: #ddd7c9;
    --footer-bg: #c9af90;
    --popular-btn-bg-mouse-off: #BE9E76;
    --popular-btn-bg-mouse-over: var(--maincolor);
    --popular-gradient-start-color: #9B5702;
    --popular-gradient-end-color: #BE9E76;
    --popular-gradient-percent: 40%;
    --intro-gradient-start: top;
    --intro-gradient-end: bottom;
    --popular-gradient-start: top;
    --popular-gradient-end: bottom;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    :root {
        --intro-gradient-start: left;
        --intro-gradient-end: right;
    }
}

@media (min-width: 1200px) {}

@media (min-width: 1400px) {}