:root {
    /* some code based on Lesson 2 */

    /* Baseline Unit: We'll use this to derive all of our spacing tokens. */
    --base: 0.5rem;

    /* This is the maximum-width for our container; we'll change this value later on in our media queries to give us more room for layout elements. */
    --container-max: 68rem;
    /* Spacing Tokens: These are base upon a simple scale, derived from our baseline unit. They are used for margins, padding, and gaps. It will help us create a cohesive vertical rhythm. */

    --s-1: calc(var(--base) * 1);
    --s-2: calc(var(--base) * 2);
    --s-3: calc(var(--base) * 3);
    --s-4: calc(var(--base) * 4);
    --s-5: calc(var(--base) * 5);
    --s-6: calc(var(--base) * 6);

    /* Horizontal Page Padding: These measurements can be adapted at various breakpoints. */

    --gutter: var(--s-3);
    --radius: 16px;

    /* Typography */
    --font-body: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
    --font-heading: "Rubik", sans-serif;

    /* Base Font Size (16px) */
    --fs-base: 1rem;

    /* Font Scale / Ratio (1.200) */
    --fs-scale: 1.2;

    /* Typographic Scale Values: We're defining a geometric typographic scale (i.e., a geometic progression or sequence) useing a recursive definition, where each step is derived from the previous one. */

    --fs-0: var(--fs-base);
    --fs-1: calc(var(--fs-0) * var(--fs-scale));
    --fs-2: calc(var(--fs-1) * var(--fs-scale));
    --fs-3: calc(var(--fs-2) * var(--fs-scale));
    --fs-4: calc(var(--fs-3) * var(--fs-scale));
    --fs-5: calc(var(--fs-4) * var(--fs-scale));
    --fs-6: calc(var(--fs-5) * var(--fs-scale));

    /* Colour palette */
    /* https://www.color-hex.com/color-palette/103782 */
    --bg-color-main:#3A2141;
    --bg-color-container:#e9e4de;
    --bg-color-container-alt:#d4d4c8;
    --bg-color-black-1:rgba(0, 0, 0, 0.3);
    --bg-color-black-2:rgba(0, 0, 0, 0.8);
    
    --text: #713968;
}


/* for testing baseline */
/* body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 0, 0, 0.15) 0px,
        rgba(255, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent var(--base)
    );
    pointer-events: none;
    z-index: 9999;
} */

/* soft reset */

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(45deg, var(--bg-color-main), var(--text));
    /* i just looked up "how to do gradient background in css" */
}


h1, h2 {
    font-family: var(--font-heading);
    line-height: var(--line-height);
    margin-top: var(--s-4);
    margin-bottom: var(--s-4);
}

h1 {
    font-size: var(--fs-6);
    line-height: calc(var(--base) * 8);
    margin-top: 0;
}

h2 {
    font-size: var(--fs-4);
    line-height: calc(var(--base) * 6);
}

p {
    margin-top: 0;
    margin-bottom: var(--s-4);
    font-size: var(--fs-1);
}


body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: var(--s-4);
    margin: 0;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: var(--radius);
}

/* spacing */
.layout {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-2);
}

header,
section{
    padding: var(--s-6);
    border-radius: var(--radius);
}

header{ 
    background-image: linear-gradient(45deg, var(--bg-color-container), var(--bg-color-container-alt));
}


header > p:last-of-type{
    
    text-align: left;
}

article > section:first-of-type{ 
    background-image: linear-gradient(45deg,var(--bg-color-black-1),var(--bg-color-black-2));
    color: white;
}

section:nth-of-type(2){ 
    background-image: linear-gradient(45deg,var(--bg-color-black-1),var(--bg-color-black-2));
    color: white;
}

footer{ 
    background-color: var(--bg-color-container-alt);
    color: var(--text);
}

footer{
    border-radius: var(--radius);
}

@media (min-width: 48rem){
    .layout{
        margin: 0 auto;
        flex-wrap: wrap;
        flex-direction: row;
    }
    header:not(p){
        text-align: center;
    }
    article > section:first-of-type{ 
    flex: 2 1 1rem;
    /* background-color: red; */
    }

    section:nth-of-type(2){ 
    flex: 2 1 1rem;
    /* background-color: blue; */
    }
    /* changing the base and fs-base sizes for responsive text */
    :root{
        --base: 0.53125rem;
        --fs-base: 1.0625rem ;
    }
}

@media (min-width: 62rem) {

    img{
        max-height: 62rem;
        margin: 0 auto;
    }
    .layout{
        max-width: 62rem; 
        /*992px*/
    }
    :root{
        --base: 0.5625rem;
        --fs-base: 1.125rem;
    }
}

@media (min-width: 90rem) {
    .layout{
        max-width: 90rem; 
        /* 1440px */
    }
    :root{
        --base: 0.625rem;
        --fs-base: 1.25rem;
    }
}