@import url('/public/css/animated.css');
@import url('/public/css/popup.css');
@import url('/public/css/card.css');
@import url('/public/css/image_band.css');

@font-face {
    font-family: 'CynthoNext_bold_branded';
    font-weight: bold;    
    src: url("/public/font/CynthoNext-Bold-mobiuz.woff2");;
}

/*
@font-face {
    font-family: 'FiraSans';
    font-weight: normal;    
    src: url("/public/font/FiraSans.woff2");;
}
*/

:root {
    --red-brand: #C32525;
    
    --page-background-color: #F5F3F2;
    
    --font-color-on-page-background: #666;
    --font-color-on-red-background: #FFF;
    --font-color-red: var(--red-brand);

    --font-family: 'Fira Sans', sans-serif;
    --font-family-branded: 'CynthoNext_bold_branded';

    --font-size: 12pt;

    --font-small: 0.8rem;
    --font-large: 1.3rem;
    --font-xlarge: 1.8rem;
    --font-2xlarge: 2.6rem;
    
    /*--max-width: 1280px;*/
    /*--max-width: 768px;*/
    --max-width: 1080px;
    --min-width: 320px;
    --mobile-width: 768px;
    
    /*
    --card-width: max(140px,15vw);
    --card-height: calc(var(--card-width) * 1.2);
    --card-min-width: var(--card-width);
    --card-slide-heading: 2.2em;
    --card-background-color: var(--page-background-color);
    */
    
    --sidebar-width: min( 80vw, 20ch);
    --sidebar-height: calc(100vh - 1rem);
    --sidebar-border-thickness: 0.15em;

    --language_selector-border-thickness: 2px;

    font-family: "Fira Sans";
    
    color: var(--font-color-on-page-background);
    font-size: calc(var(--font-size) + 0.390625vw);
    background-color: var(--page-background-color);
}

body * {
    box-sizing: border-box;
}

.branded_font {
    font-family: 'CynthoNext_bold_branded';
}

.white_text_on_red {
    background-color: var(--red-brand);
    color: var(--font-color-on-red-background);
}

.red_text{
    color: var(--red-brand);
}

.red_text_on_white {
    background-color: var(--white-background);
    color: var(--red-brand);
}

.cursor_pointer {
    cursor: pointer;
}

body {
    margin: 0; 
    padding: 0; 

}

a {
    text-decoration: none;
    color: inherit
}
a:-webkit-any-link {
    text-decoration: none;
    color: inherit
}

.borderless_1 {
    height: 1ch; 
    border: 0;
    margin: 0;
}