/* custom.css v1.0

Table of Contents:
 1. Declaration CSS variables (custom properties)
 2. Reset
 3. Base Style
 4. Extras  (remove unwanted)
 5. Classes  (remove unwanted)
*/

:root {
    --ff-body: 'Karla', sans-serif;
    --ff-heading: 'Oswald', sans-serif;
    --fs-xl: clamp(3rem, 1rem + 10vw, 5rem);
    --fs-400: 1.125rem;
    --fs-500: 1.5rem;
    --fs-600: 2rem;
    --headlines-faded: #FBF5F5;
    --headlines-pastel: #E5B4B8;
    --headlines-bright: #D58289;
    --headlines-main: #BB3742;
    --headlines-dark: #ab0613;
    --news-faded: #fff4f2;
    --news-pastel: #ffbac8;
    --news-bright: #ff4e36;
    --news-main: #c70000;
    --news-dark: #ab0613;
    --opinion-faded: #fef9f5;
    --opinion-pastel: #f9b376;
    --opinion-bright: #e05e00;
    --opinion-main: #e05e00;
    --opinion-dark: #bd5318;
    --sport-faded: #f1f8fc;
    --sport-pastel: #90dcff;
    --sport-bright: #00b2ff;
    --sport-main: #0084c6;
    --sport-dark: #005689;
    --culture-faded: #fbf6ef;
    --culture-pastel: #e7d4b9;
    --culture-bright: #eacca0;
    --culture-main: #a1845c;
    --culture-dark: #6b5840;
    --lifestyle-faded: #feeef7;
    --lifestyle-pastel: #fec8d3;
    --lifestyle-bright: #ffabdb;
    --lifestyle-main: #bb3b80;
    --lifestyle-dark: #7d0068;
    --around-faded: #f3ebe5;
    --around-pastel: #dcc5b2;
    --around-bright: #a26632;
    --around-main: #8b4000;
    --around-dark: #612c00;
    --climate-faded: #ebf3e4;
    --climate-pastel: #d7e7c9;
    --climate-bright: #acdf87;
    --climate-main: #577541;
    --climate-dark: #425732;

    --brand-pastel: #506991;
    --brand-main: #052962;
    --brand-dark: #041f4a;

    --highlight-main: #ffe500;
    --highlight-dark: #ffbb50;

    --other-greenmain: #3db540;
    --other-greendark: #236925;
    --other-labsmain: #69d1ca;
    --other-labsdark: #4B8878;
    --other-reportdark: #3f464a;

    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #ffffff;
    --bs-gray-200: #f6f6f6;
    --bs-gray-300: #ededed;
    --bs-gray-400: #dcdcdc;
    --bs-gray-500: #999999;
    --bs-gray-600: #767676;
    --bs-gray-700: #333333;
    --bs-gray-800: #121212;
    --bs-gray-900: #212529;


    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;

    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;

    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #ffffff;

    --bs-border-width: 2px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;

    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;

    --padding-small: 0 0 0 1rem;
}

/* ------------------------------------------END OF :ROOT------------------------------------------- */

/* *,
*::before,
*::after {
    box-sizing: border-box;
}


body,
h1,
h2,
h3,
p,
blockquote {
    margin: 1.5em 0 0.5rem;
    padding: 3rem 0.6rem 0;
    display: block;
    margin: auto;
    max-width: 50rem;
}

img {
    display: block;
    max-width: 100%;
}

.flow>*+* {
    margin-top: var(--flow-spacer, 1 em);
}

.lead {
    font-size: var(--fs-500);
    max-width: 40ch;
    font-weight: 900;
}

body {
    font-family: var(--ff-body);
    font-size: var(--fs-400);
    line-height: 1.6;
    background-color: var(--bs-body-bg);
}

h1,
blockquote {
    font-family: var(--ff-heading);
    font-weight: 900;
    color: var(--news-dark);
}

h4 {
    color: var(--news-bright);
}

p {
    color: var(--news-dark);
}

h1 {
    font-size: var(--fs-xl);
    line-height: 1;
    text-transform: none;
}

blockquote {
    font-size: var(--fs-600);
    line-height: 1.1;
    text-align: center;
    margin-bottom: 1em;
    border-left: 0.4rem solid brown;
}

blockquote::before {
    content: open-quote;
}

blockquote::after {
    content: close-quote;
}

article {
    display: grid;
}

.article-body {
    columns: 2 25ch;
    column-rule: 2px solid gray;
    gap: 4rem;
    max-width: 120ch;
}

article>*:not(img) {
    padding: 0 2rem;
}

@media(min-width: 50em) {
    article {
        grid-template-columns: min(50%, 50rem) 1fr;
    }
}

article>img {
    grid-row: 1/4;
    height: 100%;
    object-fit: cover;
}

article>*:not(img) {
    grid-column: 2 / -1;
} */

/*---------------------------------------WRAP TEXT AROUND CIRCLE--------------------------------------------------*/

.copyright {
    font-size: 14;
    color: var(--culture-pastel);
}

.circle {
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background-color: #7db9e8;
    margin: 0 25px 5px 0;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

.img-text {
    line-height: 20px;
    text-align: justify;
    text-justify: inter-word;
}

/*---------------------------------------BACKGROUND--------------------------------------------------*/

.headlines-bg {
    background-color: var(--headlines-faded);
}

.news-bg {
    background-color: var(--news-faded);
}

.opinion-bg {
    background-color: var(--opinion-faded);
}

.sport-bg {
    background-color: var(--sport-faded);
}

.culture-bg {
    background-color: var(--culture-faded);
}

.lifestyle-bg {
    background-color: var(--lifestyle-faded);
}

.around-bg {
    background-color: var(--around-faded);
}

.climate-bg {
    background-color: var(--climate-faded);
}

/*---------------------------------------KICKER--------------------------------------------------*/

.headlines-kk {
    color: var(--headlines-dark);
}

.news-kk {
    color: var(--news-dark);
}

.opinion-kk {
    color: var(--opinion-dark);
}

.sport-kk {
    color: var(--sport-dark);
}

.culture-kk {
    color: var(--culture-dark);
    /* cursor: pointer; */
}

.lifestyle-kk {
    color: var(--lifestyle-dark);
}

.around-kk {
    color: var(--around-dark);
}

.climate-kk {
    color: var(--climate-dark);
}

/*---------------------------------------TEXT-COLOR-ITEM-HEADLINE--------------------------------------------------*/

.item-news .item-headline {
    color: var(--bs-black);
}

/*---------------------------------------COLOR-BORDER-TOP--------------------------------------------------*/
.headlines-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--headlines-dark);
}

.head-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--news-dark);
}

.news-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--news-dark);
}

.opinion-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--opinion-dark);
}

.sport-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--sport-dark);
}

.culture-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--culture-dark);
}

.lifestyle-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--lifestyle-dark);
}

.around-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--around-dark);
}

.climate-bdt {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--climate-dark);
}


/*-----------------------------------COLOR-SUMMARY-AND-BLOCKQUOTE----------------------------------------------*/
.headlines-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--headlines-dark);
    padding: var(--padding-small);
    color: var(--headlines-dark);
    background-color: var(--headlines-faded);
}

.news-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--news-dark);
    padding: var(--padding-small);
    color: var(--news-dark);
    background-color: var(--news-faded);
}

.culture-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--culture-dark);
    padding: var(--padding-small);
    color: var(--culture-dark);
    background-color: var(--culture-faded);
}

.opinion-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--opinion-dark);
    padding: var(--padding-small);
    color: var(--opinion-dark);
    background-color: var(--opinion-faded);
}

.sport-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--sport-dark);
    padding: var(--padding-small);
    color: var(--sport-dark);
    background-color: var(--sport-faded);
}

.lifestyle-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--lifestyle-dark);
    padding: var(--padding-small);
    color: var(--lifestyle-dark);
    background-color: var(--lifestyle-faded);
}

.around-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--around-dark);
    padding: var(--padding-small);
    color: var(--around-dark);
    background-color: var(--around-faded);
}

.climate-bq {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--climate-dark);
    padding: var(--padding-small);
    color: var(--climate-dark);
    background-color: var(--climate-faded);
}


/*-------------------------------------------MASTHEAD------------------------------------------------------------*/

.masthead {
    min-height: 60vh;
    position: relative;
    background-size: cover;
}

.masthead .container {
    overflow: hidden;
}

.masthead h1 {
    color: antiquewhite;
    position: absolute;
    bottom: 1.25rem;
    max-width: 550px;
    padding-right: 1.5rem;
    padding-left: 2rem;
}

.color-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgb(255, 229, 229);
    background: linear-gradient(0deg, rgba(255, 229, 229, 1) 0%, rgba(255, 229, 229, 0) 52%);
}

blockquote::before {
    content: open-quote;
}

blockquote::after {
    content: close-quote;
}

@media(max-width: 640px) {
    .masthead {
        min-height: 30vh;
    }

    h1 {
        font-size: 1.3em;
        font-weight: 300;
    }
}