@font-face {
      font-family:"DMSans";
      font-weight:400 500 550 600; 
      src: url('../assets/fonts/DMSans-VariableFont_opsz,wght.ttf');
    }

    @font-face {
      font-family:"DMSans";
      font-style: italic;
      font-weight:400 500 550 600; 
      src: url('../assets/fonts/DMSans-Italic-VariableFont_opsz,wght.ttf');
    }

    :root {
        --purple-light: hsl(254, 88%, 90%);
        --purple-dark:  hsl(256, 67%, 59%);
        --yellow-light: hsl(31, 66%, 93%);
        --yellow-dark: hsl(39, 100%, 71%);
        --white: hsl(0, 0%, 100%);
        --off-white: hsl(0, 0%, 96%);
        --gray:#F5F5F5;
        --black: hsl(0, 0%, 7%);
    
        --font-size-reg: 1.125rem;
        --font-size-s: 1.5rem;
        --font-size-m: 2.2rem;
        --font-size-m-l: 2.85rem;
        --font-size-l: 3rem;
        --font-size-xl: 4rem;
    }
    
html{
     background-color: var(--gray);
}

body {
    background-color: var(--gray);
    margin: 0;
}

    h1 {
        margin: 0 0 30px 0;
        font-weight: 500;
        font-size: var(--font-size-l);
    }

    h2 {
        font-size: var(--font-size-s);
        padding: 0px;
        font-weight: 600;
        line-height: 2rem;
    }

    img {
        max-width: 100%;
    }

    span{
        color: var(--yellow-dark);
    }

    p{
        margin-top:0;
        margin-bottom: 0;
    }

/*Main Container*/
.container {
    font-family: "DMSans", sans-serif;
    margin: 30px 15px 30px 15px;
    max-inline-size: 1200px;
    background-color: var(--gray);
    display: grid;
    gap: 30px;
    grid-template-areas: 
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    'eight';
    min-height: 100vh; 
    }

    @media (min-width: 960px){
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-areas: 
            "seven one one four"
            "seven two three four"
            "eight two three four"
            "eight six five five";
            margin: 82px auto 65px auto;
            min-height: 65vh;
        }
        }

        .container > div {
        padding: 25px; 
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        overflow: hidden; 
        border-radius: 12px;
        }

    /*Box 1: Social Media...*/
    .container> :nth-child(1) { 
        background-color: hsl(256, 67%, 59%);
        padding: 45px;
        color: var(--white);
        text-align: center;
        line-height: 2.5rem; 
        grid-area: one;
    }
            .container > :nth-child(1) > :nth-child(2) {
                    max-width: 70%;
            } 

                @media (min-width: 960px){
                .container> :nth-child(1) > :first-child {
                    font-size: var(--font-size-xl);
                    line-height: 3.5rem;
                    margin-top: 20px;
                }

                .container> :nth-child(1) > :nth-child(2) {
                    max-width: 40%;
                }

                .container> :nth-child(1) > :last-child {
                    font-size: var(--font-size-reg);
                }
            
                }

    /*Box 2: Manage...*/
    .container> :nth-child(2) { 
        text-align: left;
        padding: top 10px;
        background-color: var(--white);
        grid-area: two;
    }

            .container> :nth-child(2)> :first-child{
                filter: drop-shadow(0 0 1rem hsl(0 0% 0% / .25));
                border-radius: 100vm;
            }

            @media (min-width: 960px) {
            .container> :nth-child(2)> :first-child{
                max-width: 150%;
            }
            .container> :nth-child(2)> :last-child{
                font-size: var(--font-size-m);
                margin: 15px 0px 0px 0px;
            }}
    
    /*Box 3: Maintain...*/
    .container> :nth-child(3) { 
        padding: 0px 20px 0 20px;
        align-items:flex-start;
        background-color: hsl(39, 100%, 71%);  
        grid-area: three;
    }
            .container> :nth-child(3) > :first-child{
                max-width: 80%;
            }
        
            .container> :nth-child(3) > :last-child {
                max-width: 70%;
                margin-bottom: -20px;
                overflow: hidden;
            }

            @media (min-width: 960px) {
            .container> :nth-child(3)> :first-child{
                font-size: var(--font-size-m);
                margin-bottom: 25px;
            }
             .container> :nth-child(3)> :last-child{
                max-width: 100%;
                margin-bottom: -100px;

            }}
    
    /*Box 4: Schedule...*/
    .container> :nth-child(4) {
        background-color: hsl(254, 88%, 90%);
        padding-top: 10px;
        align-items: center;
        grid-area: four;
    }
            .container> :nth-child(4) > :last-child {
                text-align: center;
                font-size: var(--font-size-reg);
                font-weight: 500;
                padding: 26px 26px 10px 26px;
            }

            @media (min-width: 960px) {
            .container> :nth-child(4) {
                padding: 20px 30px 20px 35px;
            }
            .container> :nth-child(4) >:first-child {
                font-size: var(--font-size-m);
                font-weight: 550;
            }
            .container> :nth-child(4) >:nth-child(2) {
                max-width: 180%;
            }
            .container> :nth-child(4) >:last-child {
                text-align: start;
                padding: 0%;
                margin: 20px 10px 30px 0px;
            }}

    /*Box 5: Grow...*/
    .container> :nth-child(5) { 
        background-color: hsl(256, 67%, 59%);
        color: var(--white);
        text-align: center;
        grid-area: five;
            
        }
            .container> :nth-child(5) > :first-child {
            max-width: 80%;
            }

            .container> :nth-child(5) > :last-child {
            font-size: var(--font-size-m);
            line-height: 2.3rem;
            font-weight: 500;
            margin: 30px 30px 0px 30px;
            }

            @media (min-width: 960px) {
            .container> :nth-child(5) {
                display:flex;
                justify-content: baseline;
            }
            .container> :nth-child(5)>:last-child {
                font-size: 2.45rem;
                margin: auto 0px auto 15px;
                text-align: left;
            }
            .container> :nth-child(5)>:first-child {
                max-width: 50%;
            }}

    /*Box 6: 56%...*/
    .container> :nth-child(6) { 
        background-color: white;
        align-items: flex-start;
        grid-area: six;
    }
            .container> :nth-child(6) > :first-child {
            font-size: var(--font-size-xl);
            margin-bottom: 0px;
            }

            .container> :nth-child(6) > :nth-child(2) {
            margin-top: 0px;
            }

            .container> :nth-child(6) > :last-child {
            max-width: 75%;
            }

            @media (min-width: 960px) {
            .container> :nth-child(6)>:nth-child(2) {
                font-size: var(--font-size-reg);
                margin-bottom: 30px;
            }
            .container> :nth-child(6)>:last-child {
                max-width: 80%;
            }}

    /*Box 7: Create...*/
    .container> :nth-child(7) { 
        background-color: hsl(31, 66%, 93%);
        padding:30px;
        grid-area: seven;
    }
            .container> :nth-child(7) > :first-child {
            font-size: var(--font-size-m);
            font-weight: 600;
            line-height: 2.1rem;
            margin-top: 0px;
            }

            #span_2 {
            color: var(--purple-dark);
            }

            .container> :nth-child(7) > :last-child {
            max-width: 65%;
            }

             @media (min-width: 960px){
                .container> :nth-child(7){
                    align-content: center;
                }
                .container> :nth-child(7) > :last-child {
                    max-width: 100%;
                }}

    /*Box 8: Write...*/
    .container> :nth-child(8) {
        font-size: var(--font-size-m);
        background-color: hsl(39, 100%, 71%);
        align-items: flex-start;
        grid-area: eight;
    }
            .container> :nth-child(8) > :first-child {
            font-size: var(--font-size-m);
            font-weight: 600;
            line-height: 2.1rem;
            margin: 0px 20px 20px 0px;
            }

            .container> :nth-child(8) > :last-child {
            max-width: 80%;
            }

             @media (min-width: 960px){
            .container> :nth-child(8)> :first-child{
                margin-bottom: 50px;
            }
            .container> :nth-child(8)> :last-child{
                max-width: 105%;
            }}

    /*Footer*/
    .attribution {
        font-family: "DMSans";
         margin: 20px 70px 20px 70px; 
        text-align: center;
        align-items: center;
        text-decoration: none;
    }

            .attribution > a {
            text-decoration: none;
            color:var(--purple-dark);
            font-weight: 600;
            }