@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');
body{
    background-color: hsl(0, 0%, 97%);
    font-family: "DM Sans", serif;
}


main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 30px;
    
    & .col01{
        display: grid;
        gap: 30px;
        & .el01{
            border: 2px solid;
            height: 350px;
            width: 200px;
            padding: 30px;
            font-size: 2.3em;
            background-color: hsl(31, 66%, 93%);
            border: none;
            border-radius: 20px;
            & img{
                width: 200px;
            }
            & b{
                color: hsl(256, 67%, 59%);
            }
        }
        & .el02{
            border: 2px solid;
            height: 350px;
            width: 200px;
            padding: 30px;
            font-size: 2.3em;
            background-color: hsl(39, 100%, 71%);
            border: none;
            display: grid;
            border-radius: 20px;
            & img{
                width: 225px;
            }
        }
    }
    & .col02{
        display: grid;
        gap: 20px;
        margin-bottom: 50px;
        & .par01{
            & .socialMedia{
                border: 2px solid;
                width: 363px;
                font-size: 1.0em;
                padding: 50px;
                text-align: center;
                background-color: hsl(256, 67%, 59%);
                color: white;
                border: none;
                border-radius: 10px;
                & .phrase{
                    font-size: 3.0em;
                }
                & img{
                    width: 180px;
                }
                & b{
                    color: hsl(39, 100%, 71%);
                }
            }
        }
        & .par02{
            display: flex;
            gap: 30px;
            & .accounts{
                padding: 8px;
                border: 2px solid;
                font-size: 1.5em;
                width: 200px;
                height: 200px;
                border-radius: 10px;
                border: none;
                background-color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                & img {
                    width: 200px;
                    height: 80px;
                    margin-bottom: 10px;
                }
            }
            & .posting{
                padding: 8px;
                border: 2px solid;
                font-size: 1.5em;
                width: 200px;
                height: 200px;
                border-radius: 10px;
                border: none;
                background-color: hsl(39, 100%, 71%);
                color: black;
                display: flex;
                flex-direction: column;
                gap: 4.8px;
                align-items: center;
                & img {
                    width: 150px;
                    margin-bottom: 10px;
                }
            }
        }
        & .par03{
            display: flex;
            gap: 30px;
            & .audience{
                padding: 8px;
                border: 2px solid;
                font-size: 1.0em;
                width: 200px;
                height: 200px;
                border-radius: 10px;
                border: none;
                background-color: white;
                display: flex;
                flex-direction: column;
                gap: 15px;
                & img {
                    width: 150px;
                    margin-bottom: 10px;
                }
                & .prc{
                    font-size: 3.0em;
                }
            }
            & .followers{
                display: flex;
                padding: 30px;
                border-radius: 10px;
                border: 2px solid;
                width: 450px;
                font-size: 2.3em;
                background-color: hsl(256, 67%, 59%);
                color: white;
                & img{
                    width: 200px;
                }
            }
        }
    }
    & .col03{
        border: 2px solid;
        border-radius: 10px;
        border: none;
        width: 200px;
        height: 490px;
        display: grid;
        font-size: 0.95em;
        padding: 20px;
        background-color: hsl(254, 88%, 90%);
        color: black;
        transform: translate(-290px, -155px);
        & img{
            width: 224px;
        }
        & .schedule{
            font-size: 1.5em;
        }
    }
}