* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

}

:root {


--cream: #FFF8E6;

--background: #faeed7;

--brown-dark: #5D3516;
--brown: #A05A32;

--orange-light: #FFDFBA;
--orange: #F5B967;
--orange-dark: #EC9336;

--checker-dark: #995F3F;
--checker-light: #AF7051;

--heading-font: "Fredoka", sans-serif;
--body-font: "Poppins", sans-serif;


}

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

::selection {


background: #E8D2B0;

color: #5D3516;


}

.sidebar,
.extra-column {


position: sticky;

top: 60px;

align-self: start;


}

body {


display: grid;

grid-template-columns:
    250px
    minmax(0, 1fr)
    280px;

column-gap: 40px;

align-items: start;

min-height: 100vh;

max-width: 1800px;

margin: 0 auto;

padding: 60px;

overflow-x: hidden;
overflow-y: auto;

background: var(--background);

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


}

/* ===========================
PAPER TEXTURE
=========================== */

body::before {


content: "";

position: fixed;

inset: 0;

background:
    url("https://i.pinimg.com/1200x/56/29/c9/5629c969513a89e940f27b0aaac8a8e7.jpg")
    center / cover no-repeat;

opacity: .08;

mix-blend-mode: multiply;

pointer-events: none;

z-index: -1;


}

/* ===========================
HEADINGS
=========================== */

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


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

color: var(--brown-dark);

font-weight: 600;

letter-spacing: .02em;


}

/* ===========================
CURSOR
=========================== */

body,
a,
button,
input,
textarea {


cursor:
    url("https://file.garden/Z-ADSNZG32_D6MFV/CARRD/AERIS%20%26%20AMBROSIA/ASSETS/donut%20cursor.cur"),
    auto;


}

/* ===========================
DEBUG
=========================== */

body.debug::after {


content:
    "WIDTH: " attr(data-width);

position: fixed;

bottom: 10px;
left: 10px;

padding: 8px 12px;

background: #000;

color: #fff;

border-radius: 8px;

font-family: monospace;

font-size: 14px;

z-index: 99999;


}

/* ===========================
MAIN CONTENT
=========================== */

.main-content {


min-width: 0;

padding: 30px 20px 40px 0;


}

/* ===========================
CUSTOM SCROLLBAR
=========================== */

body::-webkit-scrollbar {


width: 12px;


}

body::-webkit-scrollbar-track {


background: var(--cream);

border-radius: 999px;


}

body::-webkit-scrollbar-thumb {


background: var(--brown);

border-radius: 999px;

border: 3px solid var(--cream);


}

body::-webkit-scrollbar-thumb:hover {


background: var(--brown-dark);


}

body {


scrollbar-width: thin;

scrollbar-color:
    var(--brown)
    var(--cream);


}

/* ===========================
CONTENT CARD
=========================== */

.content-card {


width: min(720px, 100%);

min-height: 650px;

padding: 40px;

background: var(--cream);

border: 1px solid var(--brown-dark);

border-radius: 28px;


}

/* ===========================
HEADER
=========================== */

.content-header {


display: flex;

justify-content: space-between;

align-items: center;


}

.content-header h1 {


font-size: 2rem;


}

.content-header p {


margin-top: 8px;

color: var(--brown);


}

.content-header img {


width: 60px;


}

/* ===========================
HERO
=========================== */

.hero {


display: grid;

grid-template-columns:
    1fr
    220px;

gap: 32px;

margin-top: 50px;

align-items: center;


}

.hero-image {


width: 220px;


}

.hero-text h2 {


margin-bottom: 14px;


}

.hero-text p {


line-height: 1.8;

color: var(--brown);


}

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

.quick-links {


display: flex;

gap: 16px;

margin-top: 50px;


}

.quick-links button {


flex: 1;

height: 56px;

background: var(--orange-light);

border: 2px solid var(--brown-dark);

border-radius: 16px;

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

color: var(--brown-dark);

font-weight: 600;

transition:
    background-color .2s ease;


}

.quick-links button:hover {


background: var(--orange);


}

/* ===========================
MOBILE LAYOUT
=========================== */

@media (max-width: 1165px) {

    body {

        display: block;

        width: 100%;
        max-width: none;

        padding: 30px;

    }


    .main-content {

        width: 100%;
        max-width: 100%;

        padding: 30px 0 40px;

    }

}


/*
   The sidebar and extra column
   become drawers later.

   Do NOT set width:100% here.
*/