html {
    font: #{$base-font-size}/1.2 $font-sans;
    font-weight: 300;
    color: #fff;
    min-width: 320px;
    word-break: normal;
}
body {
    @include font-smooth;
    background: $color-primary;
    color: #fff;
    cursor: default;
    overflow-x: hidden;
    overscroll-behavior-y: none;
}
*, *:before, *:after {
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}
strong {
    font-weight: 600;
}
em {
    font-style: normal;
}
figure, p, dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
}
figure, picture {
    display: block;
}
nav li:before {
    display: none;
}
button {
    background: none;
    border: none;
    cursor: pointer;
}

// Accessibility outline
// Remove default focus styles for mouse users if :focus-visible is supported
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
    outline: none;
}
[data-focus-visible-added], *:focus-visible {
    outline: 1px dashed $color-secondary;
}

// 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;
}


/* Global elements
========================================================================== */
// Split text elements
.word, .char {
    display: inline-block;
    transform-style: preserve-3d;
    will-change: transform;
}
.words-3d {
    perspective: 800px;

    span {
        transform-origin: 0 85%;
    }
}