@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');


:root{
    --background: #333;
    --stamp-bg: #F6E9CA;

    --body-copy:2rem;

    --spacing:2rem;

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

    --h1-size:3rem;
}

body{
    background-color: var(--background);
    color: var(--stamp-bg);
    block-size: 100vh;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    

    header{
        text-align: center;
        padding: var(--spacing);

        h1{
            font-size: var(--h1-size);
        }
    }

    .content{
        display: grid;
        grid-template-columns: 1fr;
        /* flex-direction: column; */
        gap: var(--spacing);

        .about{
            padding: 1rem;
            background-color: rgb(93, 93, 93);
            color: var(--stamp-bg);
            align-self: start; /*to make the item not take the entire section*/
            border-radius: 0.2rem;
            /* max-width: 20rem; */

            .intro{
                padding-block-end: 1rem;
                border-block-end: 0.1rem solid var(--stamp-bg);
            }

            .contact{
                padding-block-start: 1rem;
            }
        }

        .work{

            ul{
                padding-inline: var(--spacing);
                display: grid;
                grid-template-columns: 1fr;
                gap: var(--spacing);
                
                li{
                    a{
                        border: 0.5rem solid var(--stamp-bg);
                        padding: var(--spacing);
                        display: block;
                        font-size: 2rem;
                        font-weight: 600;
                        text-align: center;
                    }

                }

                li:first-child{
                    a{
                        background-color: #1D5284;
                    }
                }

                li:nth-child(2){
                    a{
                        background-color: #2E4D52;
                    }
                }

                li:nth-child(3){
                    a{
                        background-color: #6D2D3B;
                    }
                }
            }
        }
    }
}


footer{
    background-color: var(--stamp-bg);
    color: var(--background);
    padding-inline: var(--spacing);
}

@media (width>650px) {

    body{
        .content{
            display: grid;
            grid-template-columns: 1fr 2fr;
             padding: var(--spacing);

            .about{

            }
            
            .work{
                flex-grow: 1;
                
                ul{
                    padding: 0;
                    padding-inline-end: calc(var(--spacing)*2);
                    grid-template-columns: repeat(2, 1fr);
                    gap: var(--spacing);

                    li{
                        a{
                            /* background-color: white; */
                            
                        }

                        /*
                        Wanted to add elivation to card on hover.
                        So I found this https://codepen.io/nefejames/pen/emONEew
                        What is happening is:
                        on hover it is adding a box shadow behind the box and scaling its size by 1.02.
                        */
                        a:hover{
                            transform: scale(1.02);
                            box-shadow: 0 0 0 0.5rem rgb(94, 94, 94);
                        }
                    }
            }
            }
        }
    }
}