@use "variables" as vars;

@import "services";
@import "me";
@import "posts";
@import "sidebar";

body {
    color: vars.$color-fg;
    background: vars.$color-bg;
}

.content-wrapper {
    width: vars.$content-width-norm;
    padding: 0 calc((100% - #{vars.$content-width-norm}) / 2);
}

img {
    max-width: 100%;
}

@media only screen and (max-width: 1000px) {
    .content-wrapper {
        width: vars.$content-width-mid;
        padding: 0 calc((100% - #{vars.$content-width-mid}) / 2);
    }
}

@media only screen and (max-width: 800px) {
    .content-wrapper {
        width: vars.$content-width-narrow;
        padding: 0 calc((100% - #{vars.$content-width-narrow}) / 2);
    }

    .main {
        flex-direction: column;

        &__content {
            width: 100% !important;
        }
    }
}

.header {
    // background-color: red;
    &__title {
        a,
        a:link,
        a:hover,
        a:visited {
            color: vars.$color-green-dark !important;
        }
    }

    &__nav {
        display: flex;

        &__item {
            list-style: none;
        }
    }
}

.main {
    justify-content: space-between;
    display: flex;

    &__content {
        width: 70%;
        // background-color: blue;
    }
}

.summary {
    &__title {
        a,
        a:link,
        a:visited {
            color: vars.$color-green-dark;
        }

        a:hover {
            color: vars.$color-green;
        }
    }

    &__date {
        margin-bottom: 8px;

        &__time {
            &--created {
                color: vars.$color-aqua;
            }

            &--edited {
                color: vars.$color-aqua-dark;
            }
        }
    }

    h2 {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

.footer {
    // background: purple;
    text-align: center;
}

.pagination {
    width: 100%;
    text-align: center;
    padding-top: 16px;
}

a,
a:visited,
a:hover {
    text-decoration: none;
    color: vars.$color-blue-dark;
}

a:hover {
    color: vars.$color-blue;
}

h1,
h2,
h3,
h4 {
    color: vars.$color-orange-dark;
}