:root {
    --sand300: #f5f0e3;
    --sand700: #5f5847;
    --navy: #031431;
    --rose: #ff445a;
    --purple: #7b61ff;
    --grey400: #d9d9d9;
    --grey700: #605e5c;
    --white: #fff;
    --black: #000;
}

html {
    font-size: 62.5%;
}

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--sand300);
            color: var(--navy);
            line-height: 1.6;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        .container {
            max-width: 1440px;
            margin: auto;
            padding: 0 1.6rem;
        }

        .container-fluid {
            max-width: 1440px;
            margin: auto;
            padding: 0 1.6rem;
        }

        header {
            background-color: var(--sand300);
            padding: 3rem 0;
        }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        header img {
            max-width: 250px;
            height: auto;
            display: block;
        }

        header h1 {
            color: var(--grey700);
            font-size: 28.8px;
            font-style: normal;
            font-weight: 400;
            line-height: 34px;
            letter-spacing: 0.562px;
        }

        .section {
            background-color: var(--white);
            padding: 4rem;
            margin: 3rem 0;
            border-radius: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        h2, h3, h4 {
            font-family: 'Inter', sans-serif;
            margin: 0;
        }

        h2 {
            font-size: 3.5rem;
            line-height: 3.5rem;
            letter-spacing: -1.4px;
            font-weight: 500;
            color: var(--navy);
            margin-bottom: 3rem;
        }

        h3 {
            font-size: 3rem;
            line-height: 3.3rem;
            letter-spacing: -1.2px;
            font-weight: 500;
            margin-bottom: 2rem;
        }
        
        h4 {
            font-size: 2.5rem;
            line-height: 3rem;
            letter-spacing: -1px;
            font-weight: 500;
            margin-bottom: 1.5rem;
        }

        p, li {
            font-size: 2rem;
            line-height: 3rem;
            letter-spacing: -0.4px;
        }
        
        ul, ol {
            padding-left: 2rem;
        }

        ul,ol li ul{
            list-style: none;
            padding-right: 2rem;
        }

        img {
            margin: 2rem 0;
        }

        table {
            width: calc(50% - 16px);
            border-collapse: collapse;
            margin-top: 2.5rem;
        }

        th, td {
            padding: 1.5rem;
            border: 1px solid var(--grey400);
            text-align: left;
            font-size: 1.6rem;
        }

        th {
            background-color: #faf9f6;
        }

        .instructions ol {
            padding-left: 2rem;
        }
        
        .field-reference, .best-practices {
            padding: 2.5rem;
            margin-top: 2rem;
            border-radius: 1rem;
        }

        .field-reference {
            background-color: #fefaf9;
            border: 1px solid var(--rose);
        }
        
        .best-practices {
            background-color: #faf9f6;
            border: 1px solid var(--grey400);
        }
        .best-practices ul {
            padding-left: 2rem;
            list-style: disc;
            margin-bottom: 0;
        }

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        code {
            font-family: 'Roboto Mono', monospace;
            background: #eee;
            padding: 0.2rem 0.5rem;
            border-radius: 0.5rem;
            font-size: 1.6rem;
        }

        a {
            color: var(--purple);
            text-decoration: none;
            position: relative;
        }

        a::after {
            content: "";
            display: block;
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 0;
            height: 1px;
            background-color: var(--purple);
            transition: 0.3s all ease-in-out;
        }

        a:hover::after {
            width: 100%;
        }

        footer {
            padding: 4rem 0;
            text-align: center;
            font-size: 1.4rem;
        }

        .tables {
            display: flex;
            justify-content: space-between;
            gap: 16px;
        }