@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400&family=Twinkle+Star&display=swap');


body {
    font-family: 'Balsamiq Sans', cursive;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas: "header header" "nav hero" "foot foot";
    height: 100vh;
}

.header {
    font-family: 'Twinkle Star', cursive; 
    font-size: 1.5em;
    text-align: center;
    grid-area: header;
    background-color: rgb(73, 73, 66);
    color: blanchedalmond;
    
    


}


.nav {
    grid-area: nav;
    padding: auto;
    background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);


}

.hero {
    grid-area: hero;
    /* background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
    /* background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
    background-color: #CDDCDC;
 background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
 /* background-blend-mode: screen, overlay; */
}

.foot {
    grid-area: foot;
    text-align: center;
    padding-top: 20px;
    background-color: rgb(73, 73, 66);
    color: blanchedalmond;
}