/*


---- 01 TYPOGRAPHY SYSTEM
    FONT size system (px):
        10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

    Font weights:
        default: 400
        Medium: 500
        Semi-Bold: 600
        Bold: 700

    Line heights:
        default: 1
        small: 1.05
        Paragraph: 1.6

---- 02 COLORS

    Primery: #F1EC40
    Tints: 
    Shaders: 
    Accents: 
    Grays: #121212, #111 #6F6F6F #9F9E9E #969595

---- 03 SHADOWS

---- 04 BORDER_RADIUS
    default: 9px
    11px

---- 05 WITHSPACE
    SPACING SYSTEM (px):
        2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

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

*:focus {
    outline: none;
    /* box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); */
}

html {
    /* 
          font-size: 16px; default
          font-size: 10px; what we Want
          10px / 16px = 0.625 = 62.5%
          Percentage of users´s font-size settings
      */

    font-size: 62.5%;
    overflow-x: hidden;

    /* NOT WORKING ON SAFARI */
    scroll-behavior: smooth;
}

body {
    background-color: #121212;

    color: #fff;
    font-family: 'Oswald', sans-serif;
    line-height: 1;
    font-weight: 400;
}

.container {
    max-width: 120rem;
    padding: 0 3.2rem;
    margin: 0 auto;
}

.grid {
    display: grid;
    gap: 3.2rem;
}

.grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.primery-heading {
    margin-bottom: 2.4rem;

    color: #fff;
    font-size: 4.8rem;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 0.95;
}

.heading-secendary {
    margin-bottom: 9.6rem;

    font-size: 4.4rem;
    line-height: 1.2;
}

.subheading {
    display: block;

    margin-bottom: 1.6rem;

    color: #c1bd33;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.75px;

    text-transform: uppercase;
}
.btn,
.btn:link,
.btn:visited {
    display: inline-block;
    padding: 1.6rem 3.2rem;

    border-radius: 9px;
    border: none;

    color: #ddd;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
    font-family: inherit;

    cursor: pointer;

    transition: all 300ms;
}
.btn--full,
.btn--full:link,
.btn--full:visited {
    margin-right: 3.2rem;
    background-color: #f1ec40;

    color: #222;
}
.btn--full:hover,
.btn--full:active {
    background-color: #a9a52d;
}