/* =========================================================
   CODPOX — GLOBAL STYLES

   PURPOSE:
   This file contains ONLY styles that apply globally
   across the Codpox website.

   IMPORTANT:
   Header styles belong in:
   components/header/header.css

   Hero styles belong in:
   components/home/hero/hero.css

   Other homepage sections should have their own CSS files.
========================================================= */


/* =========================================================
   GLOBAL RESET

   PURPOSE:
   Removes browser default spacing and makes box sizing
   predictable across the entire website.
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   HTML DOCUMENT

   PURPOSE:
   Enables smooth scrolling when navigating to sections
   using anchor links such as #home-section-two.
========================================================= */

html {
    scroll-behavior: smooth;
}


/* =========================================================
   BODY

   PURPOSE:
   Sets the default font, background, and text color
   for the entire Codpox website.
========================================================= */

body {
    min-width: 320px;

    font-family: Arial, Helvetica, sans-serif;

    background: #ffffff;
    color: #11111f;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   IMAGES

   PURPOSE:
   Prevents images from overflowing their containers.

   COMPONENT-SPECIFIC IMAGE SIZING:
   Keep inside the relevant component CSS file.
========================================================= */

img {
    max-width: 100%;
}


/* =========================================================
   LINKS

   PURPOSE:
   Removes the browser's default link styling only where
   global behavior is required.

   COMPONENT-SPECIFIC COLORS, HOVER EFFECTS, ETC.
   should remain inside component CSS files.
========================================================= */

a {
    color: inherit;
}


/* =========================================================
   BUTTONS

   PURPOSE:
   Makes buttons inherit the website's typography.

   COMPONENT-SPECIFIC BUTTON DESIGN belongs inside the
   relevant component CSS file.
========================================================= */

button {
    font: inherit;
}


/* =========================================================
   FORM ELEMENTS

   PURPOSE:
   Makes form controls inherit the global typography.

   Individual input/button designs belong to their
   respective component/page CSS files.
========================================================= */

input,
textarea,
select {
    font: inherit;
}