/*
## Colors

### Primary

- Very dark blue (main background): hsl(233, 47%, 7%)
- Dark desaturated blue (card background): hsl(244, 38%, 16%)
- Soft violet (accent): hsl(277, 64%, 61%)

### Neutral

- White (main heading, stats): hsl(0, 0%, 100%)
- Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
- Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)
*/

:root {
    --clr-primary-main-background: hsl(233, 47%, 7%);
    --clr-primary-card-background: hsl(244, 38%, 16%);
    --clr-primary-accent: hsl(277, 64%, 61%);

    --clr-neutral-main-white: hsl(0, 0%, 100%);
    --clr-neutral-paragraph-white: hsla(0, 0%, 100%, 0.75);
    --clr-neutral-stat-white: hsla(0, 0%, 100%, 0.6);

    --fw-regular: 400;
    --fw-bold: 700;
}



body {
    display: flex;
    justify-content: center;
    font-family: Inter, Lexend Deca;
    text-align: center;
    padding: 1rem;
    background-color: var(--clr-primary-main-background);
}

h1 {
    color: var(--clr-neutral-main-white);
    padding:1rem
}

p {
    color: var(--clr-neutral-stat-white);
    padding: 1rem;
    line-height: 1.7;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    max-height: 2rem;
}

.container {
    max-width: 100vh;
    margin: 0 auto;
    overflow: hidden;
    max-height: fit-content;
    background-color: var(--clr-primary-card-background);
    border-radius: 1rem;
}

.color {
    color: var(--clr-primary-accent);
}

.header-img {
    display: block;
    max-width: 100%;
    opacity: 0.55;
}

.list {
    margin: 0;
}

/*image-color*/

.img-box {
    background-color: var(--clr-primary-accent);
}

@media (min-width: 42em) {

    h1,
    p {
        max-width: fit-content;
        text-align: left;
    }

    .container {
        display: grid;
        max-height: 25rem;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 5rem);
        grid-template-areas: 
        "head head head img img"
        "par par par img img"
        "lis1 lis2 lis3 img img"
        "it1 it2 it3 img img";
    }

    .img-box {
        grid-area: img;
    }

    .header-img {
        grid-area: img;
        min-height: 30rem;
    }

    .header {
        grid-area: head;
    }

    .main {
        grid-area: par;
    }
}