@import 'base';

$tags-separator-color: #DDDDDD;

$spacious-min-width: 1248px;

body {
    margin-left: 10vw;
    margin-right: 30vw;
    padding-top: 66px;
}

// Semantic elements

img {
    width: 100%;
    height: auto;
}

figure {
    margin: 2rem 0;
}

figcaption {
    font-family: $support-font;
    font-size: 0.8rem;
    line-height: 1rem;
    padding-bottom: 1rem;
    margin-top: 0.5rem;
}

blockquote {
    color: $primary-light-color;
    font-family: $support-font;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.333;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: -20vw;
}

footer {
    margin-right: -20vw;
    padding-top: 1rem;
}

// Page features

.article-information {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
    margin-right: -20vw;
}

.article-title h1 {
    margin-right: -20vw;
    margin-top: 1rem;
}

.main-image {
    margin-left: -10vw;
    margin-right: -30vw;

    figcaption {
        margin-left: 10vw;
    }
}

.tags {
    padding: 2rem 0;

    a {
        color: $accent-light-color;
        font-family: $support-font;
        font-size: 0.8rem;
        font-weight: 500;
        text-transform: uppercase;
        padding: 0.2rem 0.5rem;
        margin-right: 0.3rem;
        border: 1px solid $accent-light-color;
        border-radius: 5px;

        &:hover {
            color: $accent-dark-color;
            border-color: $accent-dark-color;
        }
    }
}

.read-more {
    font-family: $support-font;
    padding-top: 1rem;
}

.tags,
.read-more {
    border-top: 1px solid $tags-separator-color;
}

// Responsive

@mixin responsive-elements($body-size) {
    html {
        font-size: $body-size;
    }
}

@include responsive-elements($body-size: 20px);


@media (min-width: $spacious-min-width) {
    @include responsive-elements($body-size: 24px);

    /* counter the effects from general selectors to align it */
    .main-image {
        margin-left: 0px;
        margin-right: -20vw;

        figcaption {
            margin-left: 0px;
        }
    }
}