*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html ,body {
    height: 100%;
    width: 100%;
    padding: 10px 30px;

}

main{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 10% 55% 35%;
    grid-template-areas: 
    "header header header"
    "hero hero hero"
    "bottom-left bottom-center bottom-right"
    ;
    gap: 10px;
}
header{
    background-color: rgb(172, 21, 195);
    grid-area: header;
    border-radius:20px;
    
}
#hero{
    background-color: cyan;
    grid-area: hero;
    border-radius:20px;

}
#bottom-left{
    grid-area: bottom-left;
    background-color: lightseagreen;
    border-radius:20px;
}
#bottom-center{
    grid-area: bottom-center;
    background-color: crimson;
    border-radius:20px;
}
#bottom-right{
    grid-area: bottom-right;
    background-color: slateblue;
    border-radius:20px;
}