@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat.woff2') format('woff2'),
         url('/fonts/montserrat.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: DejaVu Sans;
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src: url('/fonts/dejavu-sans-book.woff2') format('woff2'), 
         url('/fonts/dejavu-sans-book.woff') format('woff');
}

@font-face {
	font-family: DejaVu Sans;
	font-style: italic;
	font-weight: 400;
	font-stretch: 100%;
	src: url('/fonts/dejavu-sans-oblique.woff2') format('woff2'), 
         url('/fonts/dejavu-sans-oblique.woff') format('woff');
}

@font-face {
	font-family: DejaVu Sans;
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	src: url('/fonts/dejavu-sans-bold.woff2') format('woff2'), 
         url('/fonts/dejavu-sans-bold.woff') format('woff');
}

@font-face {
	font-family: DejaVu Serif;
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src: url('/fonts/dejavu-serif-book.woff2') format('woff2'), 
         url('/fonts/dejavu-serif-book.woff') format('woff');
}

@font-face {
	font-family: DejaVu Serif;
	font-style: italic;
	font-weight: 400;
	font-stretch: 100%;
	src: url('/fonts/dejavu-serif-italic.woff2') format('woff2'), 
         url('/fonts/dejavu-serif-italic.woff') format('woff');
}

@font-face {
	font-family: DejaVu Serif;
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	src: url('/fonts/dejavu-serif-bold.woff2') format('woff2'), 
         url('/fonts/dejavu-serif-bold.woff') format('woff');
}

/* responsive base: 
 * - main color & typography settings
 * - all sizes in proportional units
 *
 * Sizes and layout rules are overriden by 
 * the desktop styles with pixel & rem units 
 * as needed.
 **/
:root {
    --color-gold: #cccc99;
    --color-yellow: #ffffbf;
    --color-black: #111;
    --color-white: #fff;
    --color-blue: #6395AB;
    --color-navy: #2846DC;
    --color-grey: #ddd;

    --font-normal: 'DejaVu Sans', sans-serif;
    --font-heading: 'DejaVu Serif', serif;
    --font-alt: 'Montserrat', serif;
    --font-fancy: cursive;

    --fontsize-smaller: 1.1625vw;
    --fontsize-normal: 1.3125vw;
    --fontsize-medium: 1.5vw;
    --fontsize-larger: 1.875vw;
    --fontsize-big: 2.25vw;

    --logo-width: 100%;

    --pledge-button-width: 18vw;
    --pledge-button-height: 4.5vw;

    --pad-tiny: 0.1875vw;
    --pad-small: 0.5625vw;
    --pad: 1.125vw;
    --pad-big: 2.25vw;

    --main-container-width: calc(100vw - var(--pad-big));
    --main-container-margin: 0 auto;
    --center-column-width: calc(var(--main-container-width) * 0.6);
    --left-column-width: calc(var(--main-container-width) * 0.4);

    --auth-fontsize: 2vw;
    --login-iframe-height: 6vw;
    --login-iframe-width: 65%;
    --login-button-margin-a: calc(var(--pad)*-1);
    --login-button-margin-b: calc(var(--pad)*-0.5);

    --nav-line-height: 0.25;
    --nav-fontsize: var(--fontsize-normal);
    --nav-width: var(--main-container-width);
    --nav-offset: 0;
    --nav-margin: 0.5625vw;

    --footer-height: 4.125vw;
    --heading-height: 2.25vw;

    --search-width: 20vw;

    /* optionally set by the widget and communicated from its iframe via postMessage */
    --now-playing-sidebar-height-adjustment: 0;
    --now-playing-sidebar-height-base1: 25vw;
    --now-playing-sidebar-height-base2: 28.125vw;

    --pic-of-day-height: auto;
    --pic-of-day-width: calc(100% - (var(--pad-big) * 2));
    --pic-of-day-margin-top: var(--pad-big);
    --joke-fontsize: var(--fontsize-medium);

    --news-image-size: 75px;

    --fav-icon-size: 1.6875vw;
    --fav-icon-offset: 0.1875vw;
    --rss-icon-size: 1.6875vw;
    --follow-icon-size: 1.5vw;
}

/* mobile styles for little screens in portrait orientation */
@media (max-width: 768pt) and (orientation: portrait) {
    :root {
        /* extend both columns to the 
         * edges, get rid of the container 
         * margin */
        --center-column-width: 100vw;
        --left-column-width: 100vw;
        --main-container-margin: 0;

        --footer-height: 10.35vw;

        /* and make the fonts bigger */
        --fontsize-smaller: 2.0125vw;
        --fontsize-normal: 2.875vw;
        --fontsize-medium: 3.1625vw;
        --fontsize-larger: 4.025vw;
        --fontsize-big: 4.6vw;

        --joke-fontsize: var(--fontsize-normal);

        --news-image-size: 15vw;
        --main-container-width: 100vw;
        --nav-fontsize: var(--fontsize-smaller);
        --search-width: 50vw;
    }

}

/* desktop styles for larger screens */
@media (min-width: 1092px) {
    :root {
        --pad-tiny: 0.1875rem;
        --pad-small: 0.375rem;
        --pad: 0.75rem;
        --pad-big: 1.5rem;

        --fontsize-smaller: 0.5625rem;
        --fontsize-normal: 0.9rem;
        --fontsize-medium: 1rem;
        --fontsize-larger: 1.125rem;
        --fontsize-big: 1.5rem;

        --logo-width: 80%;

        --main-container-width: 1092px;
        --center-column-width: calc(var(--main-container-width) * 0.65);
        --left-column-width: calc(var(--main-container-width) * 0.35);
        --nav-width: var(--main-container-width);
        --nav-offset: 15rem;
        --nav-margin: 0.25rem;
        --footer-height: 2.25rem;
        --heading-height: 1.125rem;

        --pledge-button-width: 10.5rem;
        --pledge-button-height: 2.625rem;

        --login-iframe-height: 1.5rem;
        --login-iframe-width: var(--main-container-width);
        --login-button-margin-a: -0.25rem;
        --login-button-margin-b: 0;

        --search-width: 14rem;

        --pic-of-day-width: 100%;
        --pic-of-day-height: 355px;
        --pic-of-day-margin-top: 0;
        --joke-fontsize: var(--fontsize-medium);
        --fav-icon-size: 1.125rem;
        --fav-icon-offset: 0.15rem;
        --rss-icon-size: 1.5rem;

        --now-playing-sidebar-height-base1: 4.5rem;
        --now-playing-sidebar-height-base2: 18.75rem;

        --nav-fontsize: calc(var(--fontsize-normal) * 0.8);
        --auth-fontsize: var(--nav-fontsize);

        --news-image-size: 75px;
        --follow-icon-size: 1.125rem;
    }

}