@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap");

:root {
    --typography-family-baseline: "Merriweather", serif;
    --typography-size-baseline: 16px;
    --typography-optsize-baseline: auto;
    --typography-weight-baseline: 500;
    --typography-style-baseline: normal;
    --typography-vari-baseline: "wdth" 100;

    --schema-color-baseline: white;

    --typography-size-large: 36px;
    --typography-size-medium: 21px;
    --typography-weight-bold: 700;

    --schema-color-accent: #073973;
    --schema-color-gray: #d8dde6;
    --schema-color-black: #333;

    --spacing-small: 5px;
    --spacing-medium: 8px;
    --spacing-large: 16px;
    --spacing-xlarge: 25px;
    --spacing-xxlarge: 30px;
    --spacing-section: 100px;

    --layout-width-section: 73%;
    --layout-width-half: 50%;

    --opacity-low: 0.5;
    --opacity-medium: 0.5;
    --opacity-high: 0.7;

    --transition-duration: .3s;

    --dot-size: 6px;
    --dot-weight: 800;
    --line-height-normal: 1.5;
    --line-height-loose: 1.8;

    --descriptor-min-width: max-content;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background-color: var(--schema-color-baseline);
    font-family: var(--typography-family-baseline);
    font-size: var(--typography-size-baseline);
    font-optical-sizing: var(--typography-optsize-baseline);
    font-weight: var(--typography-weight-baseline);
    font-style: var(--typography-style-baseline);
    font-variation-settings: var(--typography-vari-baseline);
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
}

hr {
    border: none;
    height: 1px;
    color: var(--schema-color-gray);
    background-color: var(--schema-color-gray);
    width: 100%;
}

div.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

div.container.reverse {
    flex-direction: column-reverse;
}

div.container div.gradient,
div.container div.gradient-2 {
    height: 200px;
    width: 100%;
    background-image: url("../assets/gradient.png");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--spacing-large);
    gap: var(--spacing-small);
    position: relative;
    z-index: 2;
}

div.container div.gradient-2 {
    background-image: url("../assets/gradient-2.png");
}

div.container div.content {
    height: calc(100% - 200px);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

div.section {
    width: 90%;
    margin-top: var(--spacing-xxlarge);
    margin-bottom: var(--spacing-xxlarge);
}

div.section div.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: var(--typography-weight-bold);
    color: var(--schema-color-black);
    gap: var(--spacing-large);
    text-align: center;
}

div.section div.articles {
    margin-top: var(--spacing-xlarge);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xlarge);
}

div.section div.articles div.article:last-child {
    margin-bottom: var(--spacing-xlarge);
}

div.article {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

div.article div.title {
    font-size: 18px;
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-accent);
    line-height: var(--line-height-normal);
    transition: opacity var(--transition-duration);
    text-align: left;
}

div.article div.title:hover {
    opacity: var(--opacity-medium);
    transition: opacity var(--transition-duration);
}

div.article div.status {
    font-size: 14px;
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-black);
    line-height: var(--line-height-normal);
    opacity: var(--opacity-low);
    font-style: italic;
}

div.article div.descriptors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

div.article div.descriptors span {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-black);
    opacity: var(--opacity-low);
    white-space: nowrap;
    min-width: var(--descriptor-min-width);
}

div.article div.descriptors span:not(:last-child)::after {
    content: "\25CF";
    font-size: var(--dot-size);
    font-weight: var(--dot-weight);
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium);
    pointer-events: none;
}

div.reader {
    width: 90%;
    margin-top: var(--spacing-xlarge);
    margin-bottom: var(--spacing-xlarge);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
}

div.reader div.home a {
    font-size: var(--typography-size-baseline);
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-accent);
    transition: opacity var(--transition-duration);
}

div.reader div.home a:hover {
    opacity: var(--opacity-medium);
    transition: opacity var(--transition-duration);
}

div.reader div.title {
    line-height: var(--line-height-normal);
    font-size: 24px;
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-accent);
    transition: opacity var(--transition-duration);
}

div.reader div.title:hover {
    opacity: var(--opacity-medium);
    transition: opacity var(--transition-duration);
}

div.reader div.status {
    font-size: 14px;
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-black);
    line-height: var(--line-height-normal);
    opacity: var(--opacity-low);
    font-style: italic;
}

div.reader div.descriptors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

div.reader div.descriptors span {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-black);
    opacity: var(--opacity-low);
    white-space: nowrap;
    min-width: var(--descriptor-min-width);
}

div.reader div.descriptors span:not(:last-child)::after {
    content: "\25CF";
    font-size: var(--dot-size);
    font-weight: var(--dot-weight);
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium);
    pointer-events: none;
}

div.reader div.abstract {
    font-size: var(--typography-size-baseline);
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-black);
    line-height: var(--line-height-loose);
    opacity: var(--opacity-high);
}

div.reader div.links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: var(--spacing-xlarge);
    line-height: var(--line-height-loose);
}

div.reader div.links a {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--typography-size-baseline);
    font-weight: var(--typography-weight-baseline);
    color: var(--schema-color-accent);
    transition: opacity var(--transition-duration);
    white-space: nowrap;
    min-width: var(--descriptor-min-width);
}

div.reader div.links a:hover {
    opacity: var(--opacity-medium);
    transition: opacity var(--transition-duration);
}

div.reader div.links a:not(:last-child)::after {
    content: "\25CF";
    font-size: var(--dot-size);
    font-weight: var(--dot-weight);
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium);
    pointer-events: none;
}

@media (min-width: 768px) {
    div.container {
        flex-direction: row;
    }

    div.container.reverse {
        flex-direction: row;
    }

    div.container div.gradient,
    div.container div.gradient-2 {
        height: 100%;
        width: var(--layout-width-half);
        padding: var(--spacing-xlarge);
    }

    div.container div.content {
        height: 100%;
        width: var(--layout-width-half);
    }

    div.section {
        width: var(--layout-width-section);
        margin-top: var(--spacing-section);
    }

    div.section div.title {
        font-size: var(--typography-size-large);
        flex-direction: row;
        gap: var(--spacing-xlarge);
    }

    div.section div.articles {
        margin-top: var(--spacing-xxlarge);
        gap: var(--spacing-xxlarge);
    }

    div.section div.articles div.article:last-child {
        margin-bottom: var(--spacing-section);
    }

    div.article div.title {
        font-size: var(--typography-size-medium);
    }

    div.article div.status {
        font-size: var(--typography-size-baseline);
    }

    div.article div.descriptors {
        line-height: var(--line-height-normal);
        gap: 0;
    }

    div.article div.descriptors span {
        font-size: var(--typography-size-baseline);
        padding-right: 0;
    }

    div.article div.descriptors span:not(:last-child)::after {
        position: static;
        transform: none;
        display: inline-block;
        vertical-align: middle;
    }

    div.reader {
        width: var(--layout-width-section);
        margin-top: var(--spacing-section);
    }

    div.reader div.title {
        font-size: 28px;
    }

    div.reader div.status {
        font-size: var(--typography-size-baseline);
    }

    div.reader div.descriptors {
        line-height: var(--line-height-normal);
        gap: 0;
    }

    div.reader div.descriptors span {
        font-size: var(--typography-size-baseline);
        padding-right: 0;
    }

    div.reader div.descriptors span:not(:last-child)::after {
        position: static;
        transform: none;
        display: inline-block;
        vertical-align: middle;
    }

    div.reader div.links {
        line-height: var(--line-height-loose);
        gap: 0;
        padding-bottom: var(--spacing-section);
    }

    div.reader div.links a {
        padding-right: 0;
    }

    div.reader div.links a:not(:last-child)::after {
        position: static;
        transform: none;
        display: inline-block;
        vertical-align: middle;
    }
}

@media (min-width: 1024px) {
    div.section div.title {
        text-align: left;
    }
}

@media (max-width: 480px) {
    div.article div.descriptors,
    div.reader div.descriptors,
    div.reader div.links {
        gap: 2px;
    }
}

div.article div.descriptors span,
div.reader div.descriptors span,
div.reader div.links a {
    word-break: keep-all;
    overflow-wrap: normal;
}