html { font-size: clamp(0px, 1vw, 10px);}

body { margin: 0px; }

a { text-decoration: none; color: red; }

* { box-sizing: border-box; color: saddlebrown}

#container { 
    height: 100vh;
    font-size: 2.5rem;
    background-color:burlywood;
    display: grid;
    gap: 0.4rem 0.4rem;
    grid-template-columns: 1fr 30rem;
    grid-template-rows: 12rem 6rem 1fr 6rem;
    grid-template-areas:
        "header header"
        "menu menu"
        "main sidebar"
        "footer sidebar";
}

#header { grid-area: header; 
    display: grid; justify-content: center; align-content: center;
    font-size: 10rem; 
    background-color: bisque;
}

#menu { grid-area: menu; 
    background-color: bisque;
    font-size: 2rem; padding: 2rem;
    display: grid; grid-template-columns: repeat(6, 1fr);
    
}

#sidebar { grid-area: sidebar; padding: 2rem; 
    display: grid; align-content:start; grid-template-columns: 1fr; justify-items: center;
    row-gap: 2rem;
    font-size: 3rem;
    background-color: bisque;
}
    
#main { grid-area: main; background-color: white; padding: 10px;}

#footer {grid-area: footer; 
    display: grid; grid-template-columns: repeat(2, 1fr);
    justify-items: center; align-items: center;
    background-color: bisque;
}