html {
    font: #{$base-font-size} $font-sans;
    color: $color-text;
}
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-size: 50.25vw;
    letter-spacing: -2vw;
    font-family: $font-serif-extra;
    color: $color-secondary;
    line-height: 1;
}

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

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

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

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

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

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

        em {
            display: inline-block;
            font-size: rem(20px);

            @include breakpoint (sm) {
                margin-left: -8px;
                font-size: rem(56px);
            }
        }
    }
}

// Parallax title: Translate X
.title-parallax {
    transform: translate3d(var(--translateX), 0, 0);
    will-change: transform;
    pointer-events: none;
    user-select: none;
}


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

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

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

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

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

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