:root {
    --primary-color-10: hsl(0, 0%, 90%);
    --primary-color-50: hsl(0, 0%, 50%);
    --primary-color-90: hsl(0, 0%, 15%);
    --info-color-50: hsl(194, 88%, 90%);
    --info-color-90: hsl(194, 88%, 75%);
    --warning-color-50: hsl(56, 91%, 87%);
    --warning-color-90: hsl(56, 91%, 67%);
    --success-color-50: hsl(101, 90%, 88%);
    --success-color-90: hsl(101, 90%, 68%);
    --error-color-50: hsl(3, 89%, 89%);
    --error-color-90: hsl(3, 89%, 69%);
    --white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);
    --red-color: hsl(0, 100%, 50%);
}

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

/**
 * General tags
 */
html,
body {
    position: relative;
    margin: 0;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
}

h1,
h2,
h3 {
    margin-bottom: 0.50em;
}

p {
    margin-bottom: 1em;
}

/**
 * Main page components
 */
.page-header {
    min-height: 6em;
    padding: 0 3.00em;
    background-color: var(--primary-color-90);
    color: var(--primary-color-10);
}

.page-header h1 {
    margin: 0;
}

.page-navigation {
    text-align: right;
}

.page-content {
    position: relative;
    padding: 0 0.50em 1em 0.50em;
}

.entry-item {
    padding: 0.75em 0.50em;
    margin-bottom: 1em;
    background-color: var(--primary-color-10);
}

.entry-item__content {
    padding: 0.50em;
}

.entry-item__content p:not(:last-child) {
    margin-bottom: 0.50em;
}

.entry-item__content a {
    color: var(--black-color);
}

.entry-item__author {
    text-align: right;
    font-weight: bold;
    margin-top: 1.25em;
}

.entry-item__date {
    color: var(--primary-color-50);
}

.dictionary-word {
    margin-right: 0.50em;
    margin-bottom: 0.75em;
}

/**
 * Messages box
 */
.messages {
    position: absolute;
    color: black;
    max-width: 35ch;
    margin: 0 auto;
    top: 2em;
    left: 0;
    right: 0;
    z-index: 1;
}

.messages > .message {
    padding: 1em 2em;
}

.messages > .message p {
    margin: 0;
}

.messages > .message:not(:last-child) {
    margin-bottom: 1em;
}

.messages > .message--info {
    background-color: var(--info-color-50);
    border: 1px solid var(--info-color-90);
}

.messages > .message--warning {
    background-color: var(--warning-color-50);
    border: 1px solid var(--warning-color-90);
}

.messages > .message--success {
    background-color: var(--success-color-50);
    border: 1px solid var(--success-color-90);
}

.messages > .message--error {
    background-color: var(--error-color-50);
    border: 1px solid var(--error-color-90);
}

/**
 * Flexbox
 */
.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex--margin-bottom-1em {
    margin-bottom: 1em;
}

.flex--align-center {
    align-items: center;
}

.flex--justify-center {
    justify-content: center;
}

.flex--direction-row {
    flex-direction: row;
}

.flex__item--grow {
    flex-grow: 1;
}

.flex__item-100 {
    flex-basis: 100%;
    padding-right: 0.50em;
}

.flex__item-88 {
    flex-basis: 88%;
    padding-right: 0.50em;
}

.flex__item-75 {
    flex-basis: 75%;
    padding-right: 0.50em;
}

.flex__item-65 {
    flex-basis: 65%;
    padding-right: 0.50em;
}

.flex__item-50 {
    flex-basis: 50%;
    padding-right: 0.50em;
}

.flex__item-45 {
    flex-basis: 45%;
    padding-right: 0.50em;
}

.flex__item-33 {
    flex-basis: 33.333%;
    padding-right: 0.50em;
}

.flex__item-25 {
    flex-basis: 25%;
    padding-right: 0.50em;
}

.flex__item-20 {
    flex-basis: 20%;
    padding-right: 0.50em;
}

.flex__item-16 {
    flex-basis: 16%;
    padding-right: 0.50em;
}

.flex__item-12 {
    flex-basis: 12%;
    padding-right: 0.50em;
}

.flex__item-8 {
    flex-basis: 8%;
    padding-right: 0.50em;
}

/**
 * Links
 */
a {
    color: var(--primary-color-10);
    text-decoration: none;
}

.button {
    display: inline-block;
    padding: 0.50em 1.25em;
    color: var(--black-color);
    background-color: var(--primary-color-10);
    border: 1px solid var(--primary-color-90);
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    cursor: pointer;
}

.button--active {
    color: var(--primary-color-10);
    background-color: var(--black-color);
    border: 1px solid var(--primary-color-90);
}

a:hover {
    color: var(--highlight-color-90);
}

a:focus {
    outline: 4px solid var(--highlight-color-90);
}

.button:hover,
.button:focus {
    color: var(--white-color);
    background-color: var(--primary-color-90);
    border: 1px solid var(--primary-color-10);
}

/**
 * Pagination
 */
.paginator {
    list-style: none;
    margin-top: 1em;
    text-align: center;
}

.paginator li {
    display: inline-block;
}

/**
 * Forms
 */
.form {
    width: 100%;
    margin-bottom: 1em;
}

.form input,
.form textarea,
.form select {
    width: 100%;
    border: 1px solid var(--primary-color-50);
    padding: 0.25em 0.50em;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
}

.form textarea {
    resize: vertical;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
    outline: 1px solid var(--primary-color-90);
}

.form select {
    background-color: var(--primary-color-10);
}

/**
 * General boxes
 */
.box {
    padding: 0.50em 1.25em;
    margin: 0 auto 1em auto;
    max-width: 85%;
    background-color: var(--primary-color-10);
}

.box a {
    color: black;
}

/**
 * Lists
 */
.list {
    list-style-position: inside;
    margin-bottom: 1em;
}

.errorlist {
    color: var(--red-color);
    max-width: 40ch;
    margin: 0.50em auto;
}

/**
 * Text classes
 */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-smaller {
    font-size: 0.85em;
}

.text-small {
    font-size: 0.95em;
}

.text-big {
    font-size: 1.15em;
}

.text-bigger {
    font-size: 1.5em;
}

.text-bold {
    font-weight: bold;
}

.text-italic {
    font-style: italic;
}

/**
 * Colors
 */
.color-red {
    color: var(--red-color);
}

@media (max-width: 60em) {
    .page-navigation {
        text-align: center;
    }

    .flex:not(.flex--direction-row) {
        flex-direction: column;
    }

    .box {
        max-width: 100%;
    }
}