/* Root variables */

@media (prefers-color-scheme: light) {
    :root {
        --background-color: #e7e5e4;
        --text-color: #333;
        --link-color: #005cc5;
        --link-color-visited: #6f42c1;
        --link-color-active: #d73a49;
        --disabled-color: #ccc;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #333;
        --text-color: #e7e5e4;
        --link-color: #79c0ff;
        --link-color-visited: #a5d6ff;
        --link-color-active: #ff7b72;
        --disabled-color: #555;
    }
}

@media (min-width: 576px) {
    :root {
        font-size: 112.5%;
    }
}

@media (min-width: 768px) {
    :root {
        font-size: 125%;
    }
}

/* Global styles */

body {
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
}

h1 {
    margin-bottom: 0;
}

.subtitle {
    margin-bottom: 1.34rem;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:visited {
    color: var(--link-color-visited);
}

a:active {
    color: var(--link-color-active);
}

.disabled {
    color: var(--disabled-color);
    cursor: not-allowed;
}

/* Layout styles */

.container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    margin: 0 auto;
    max-width: 510px;
    padding: 0 1em 1em;
}

@media (min-width: 768px) {
    .container {
        max-width: 700px;
    }
}

/* Component styles */

.row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

article {
    text-align: start;
}

article img {
    max-width: 100%;
    height: auto;
}

article pre {
    overflow-x: auto;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.article-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
    text-align: start;
}

.pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

hr {
    width: 100%;
}