html {
    font: #{$base-font-size} $font-sans;
    color: $color-text;
    min-width: 320px;
}
body {
    @include font-smooth;
    background: $color-primary;
    cursor: default;
    overflow-x: hidden;
}
*, *:before, *:after {
    box-sizing: border-box;
}
strong {
    font-weight: normal;
}
em {
    font-style: normal;
}
figure, p, dl, dt, dd, ul, ol, li {
    margin: 0;
    padding: 0;
}
figure img {
    display: block;
}
button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

// Selection
::selection { color: #fff; background: $color-secondary; }
::-moz-selection { color: #fff; background: $color-secondary; }

// Images glitches fix
// img {backface-visibility: hidden;}



/* Titles
========================================================================== */
#{headings(1,6)} {
    margin: 0;
    font-weight: normal;
    font-style: normal;
}

// Title: Massive
.title-massive {
    font-family: $font-serif-extra;
    font-size: pxVW(800);
    line-height: 1;
    color: $color-secondary;
    letter-spacing: -2vw;
    pointer-events: none;
    user-select: none;

    @include breakpoint (lg) {
        font-size: pxVW(700);
    }
    @include breakpoint (1920px) {
        font-size: rem(900px);
    }
}

// Title: Locations
.title-location {
    font-family: $font-serif;
    font-size: rem(68px);
    line-height: 1;
    color: $color-secondary;
    text-align: center;

    @include breakpoint (sm) {
        font-size: rem(64px);
    }
    @include breakpoint (lg) {
        font-size: rem(72px);
    }
    @include breakpoint (xl) {
        font-size: rem(96px);
    }

    em {
        display: block;
        font-size: rem(18px);
        color: $color-lightpurple;
        text-transform: uppercase;
        letter-spacing: 1px;

        @include breakpoint (sm) {
            display: inline-block;
            font-size: rem(32px);
            margin-right: -8px;
        }
    }

    // Bigger version
    &--big {
        font-size: rem(40px);

        @include breakpoint (m) {
            font-size: rem(56px);
        }
        @include breakpoint (sm) {
            font-size: pxVW(160);
        }
        @include breakpoint (md) {
            font-size: rem(160px);
        }

        em {
            display: inline-block;
            font-size: 0.35em;

            @include breakpoint (md) {
                margin-left: -8px;
            }
        }
    }

    // Inline version
    &--inline {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        em {
            margin: 8px 0 4px;

            @include breakpoint (sm) {
                margin: 2px 16px 0 24px;
            }
        }

        @include breakpoint (sm) {
            flex-direction: row;
            align-items: baseline;
        }
    }
}



/* Text Styles
========================================================================== */
.style-location {
    text-align: center;

    .street {
        margin-bottom: 8px;
        font-family: $font-serif;
        font-size: rem(24px);

        @include breakpoint (sm) {
            font-size: rem(28px);
        }
    }
}

.style-caps {
    font-size: rem(14px);
    color: $color-tertiary;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.style-description {
    color: $color-tertiary;
    font-family: $font-sans-light;
    font-size: rem(18px);
    line-height: 1.55;
    text-align: center;

    @include breakpoint (sm) {
        max-width: 572px;
        font-size: rem(28px);
        line-height: 1.64;
    }
}