* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #0b0d10;
    color: #eee;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.container {
    width: min(
        1200px,
        calc(100% - 40px)
    );

    margin: auto;
}


/* HEADER */

.header {
    border-bottom: 1px solid #262a30;

    padding: 30px 0;

    background: #0e1115;
}

.brand {
    font-size: 30px;
    font-weight: 800;

    letter-spacing: 2px;
}

.brand span {
    color: #d6a43c;
}

.subtitle {
    color: #848b95;

    margin-top: 7px;

    font-size: 14px;
}


/* SECTIONS */

section {
    margin-top: 40px;
}

.section-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 18px;
}

.section-header h2 {
    margin: 0;
}

.section-header span {
    font-size: 13px;
    color: #7f8792;
}


/* ENERGY */

.market-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 14px;
}

.market-card {
    background: #15191f;

    border:
        1px solid #272c34;

    border-radius: 10px;

    padding: 20px;
}

.instrument-name {
    color: #a0a7b1;

    font-size: 14px;
}

.price {
    font-size: 30px;

    font-weight: bold;

    margin-top: 10px;
}

.unit {
    color: #747d88;

    font-size: 12px;

    margin-top: 4px;
}

.contract {
    color: #d6a43c;

    margin-top: 10px;

    font-size: 12px;
}

.market-time {
    color: #606873;

    margin-top: 8px;

    font-size: 11px;
}


/* NEWS */

.news-section {
    padding-bottom: 60px;
}

.news-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.news-card {
    display: flex;

    background: #15191f;

    border:
        1px solid #272c34;

    border-radius: 10px;

    overflow: hidden;
}

.news-image {
    width: 220px;

    min-height: 160px;

    flex-shrink: 0;

    background: #101318;
}

.news-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.news-content {
    flex: 1;

    padding: 20px;
}

.news-date {
    color: #707985;

    font-size: 12px;

    margin-bottom: 8px;
}


/* =====================================================
   ORIGINAL ARTICLE TITLE
   ===================================================== */

.news-title,
.news-content h3 {
    margin: 0 0 7px;

    line-height: 1.4;

    font-size: 18px;

    font-weight: 600;
}


/*
IMPORTANT:
Force headline to white.

This covers:
- normal links
- unvisited links
- visited links
- active links

The second selector also covers old HTML where
class="news-title" may not yet be present.
*/

.news-title a,
.news-title a:link,
.news-title a:visited,
.news-title a:active,
.news-content h3 a,
.news-content h3 a:link,
.news-content h3 a:visited,
.news-content h3 a:active {
    color: #ffffff !important;

    text-decoration: none !important;
}


/* Gold only when mouse hovers over headline */

.news-title a:hover,
.news-content h3 a:hover {
    color: #d6a43c !important;

    text-decoration: none !important;
}


/* =====================================================
   TRANSLATED TITLE
   ===================================================== */

.translated-title {
    margin: 0 0 14px;

    color: #9da5af;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 400;
}

.translated-label {
    color: #d6a43c;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin-right: 4px;
}


/* CATEGORY TAGS */

.categories {
    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    margin-bottom: 14px;
}

.categories span {
    padding: 4px 8px;

    background: #22272e;

    color: #adb4bd;

    border-radius: 4px;

    font-size: 10px;
}


/* READ ARTICLE */

.read-more,
.read-more:link,
.read-more:visited,
.read-more:active {
    color: #d6a43c !important;

    text-decoration: none;

    font-size: 13px;

    font-weight: 500;
}

.read-more:hover {
    color: #d6a43c !important;

    text-decoration: underline;
}


/* EMPTY STATE */

.empty {
    background: #15191f;

    padding: 30px;

    color: #777f89;

    text-align: center;

    border:
        1px solid #272c34;

    border-radius: 10px;
}


/* MOBILE */

@media (max-width: 700px) {

    .container {
        width: min(
            100% - 24px,
            1200px
        );
    }

    .header {
        padding: 22px 0;
    }

    .brand {
        font-size: 26px;
    }

    section {
        margin-top: 28px;
    }

    .section-header {
        align-items: flex-end;
    }

    .section-header h2 {
        font-size: 20px;
    }

    .market-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .market-card {
        padding: 16px;
    }

    .price {
        font-size: 24px;
    }

    .news-card {
        display: block;
    }

    .news-image {
        width: 100%;
        height: 190px;
        min-height: 190px;
    }

    .news-content {
        padding: 16px;
    }

    .news-title,
    .news-content h3 {
        font-size: 17px;
    }

    .translated-title {
        font-size: 12px;
    }

    .translated-label {
        font-size: 10px;
    }
}


@media (max-width: 420px) {

    .market-grid {
        grid-template-columns: 1fr;
    }

}