:root{

    --text-label-color: #999;
    --catalog-item-bg: #fff;

    --theme-stat-color: indigo;
    --theme-stat-text: #666;
    --theme-stat-text-hover: var(--theme-primary-color);
    --theme-toggled-bg: #c5e3ff;
    --theme-body-bg: #fafafa;

    --theme-link-text: var(--theme-primary-color);
    --theme-link-underline: var(--theme-primary-fade-75);

    --theme-link-text-hover: var(--theme-primary-hover-color);
    --theme-link-underline-hover: var(--theme-primary-fade-50);
}

body{
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: 'Roboto';
    background-color: var(--theme-body-bg);
    color: var(--theme-text-1);
}

div, main, header, footer, article, section, nav{
    box-sizing: border-box;
}

main{
    flex: 1;
}

a,
a:visited{
    color: var(--theme-link-text);
}
a:hover{
    color: var(--theme-link-text-hover);
}
a:active{
    color: red;
}


#app{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 100%;
    min-height: 100vh;
}

.theme-dark{
    --catalog-item-bg: #262D37;
    --theme-stat-color: #FECDFA;
    --theme-stat-text: #aaa;
    --theme-stat-text-hover: #fff;
    --theme-toggled-bg: indigo;
    --theme-body-bg: #212529;

    --theme-link-text: #fecdfa;
    --theme-link-underline: #fecdfa88;

    --theme-link-text-hover: #fff;
    --theme-link-underline-hover: #fff8;

}