/* ==========================================================
   AXN Portfolio
   Reset / Normalize
   ========================================================== */

/* Box sizing */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default spacing */

* {
    margin: 0;
    padding: 0;
}

/* Better scrolling */

html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
}

/* Base */

body {

    min-height: 100vh;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    background: var(--color-bg);

    color: var(--color-text);

    font-family: var(--font-family);

    overflow-x: hidden;
}

/* Images */

img,
picture {

    display: block;

    max-width: 100%;

    user-select: none;
}

/* Videos */

video {

    display: block;

    width: 100%;

    height: auto;
}

/* Form elements */

input,
button,
textarea,
select {

    font: inherit;

    color: inherit;

    background: none;

    border: none;

    outline: none;
}

/* Buttons */

button {

    cursor: pointer;

    background: none;
}

/* Links */

a {

    color: inherit;

    text-decoration: none;
}

/* Lists */

ul,
ol {

    list-style: none;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: inherit;
}

/* Paragraphs */

p {

    max-width: 70ch;
}

/* Tables */

table {

    border-collapse: collapse;

    border-spacing: 0;
}

/* Selection */

::selection {

    background: #111;

    color: #fff;
}

/* Focus */

:focus-visible {

    outline: 2px solid #111;

    outline-offset: 4px;
}