@import "tailwindcss";

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/*
    --Purple100: #dacffc;
    --Purple500: #7650dc;
    --Yellow100: #f9eee1;
    --Yellow500: #ffcb6b;

    -- font-family: 'DM Sans', sans-serif;
*/

@media screen and (min-width: 1000px) {
    main {
        grid-template-areas: 
        'create social social schedule'
        'create manage maintain schedule'
        'write manage maintain schedule'
        'write faster growww growww'
        ;
    }

    div#social {
        grid-area: social;
    }

    div#manage {
        grid-area: manage;
    }

    div#maintain {
        grid-area: maintain;
    }

    div#schedule {
        grid-area: schedule;
    }

    div#growww {
        grid-area: growww;
    }

    div#faster {
        grid-area: faster;
    }

    div#create {
        grid-area: create;
    }

    div#write {
        grid-area: write; 
    }
}