html {
    font-family: "Times New Roman", serif;
}
.top {
    width: 100%;
    /* border: 1px solid black; */ /* This is to visually see the bars. You can remove it if you don't need. */
    height: 10vh;
    }
.menu {
	height: 25px;
    width: 100%;
   /* border: 1px solid black; */
    }
.container {
            display: flex;
            height: 80vh; /* This makes the container take the full height of the viewport. Adjust as needed. */
        }        
.container .box {
            height: 100%;
           /* border: 1px solid black;*/ /* This is to visually see the bars. You can remove it if you don't need. */
        }

        .container .box.lsidebar,
        .container .box.rsidebar {
            flex: 0 0 20%; /* This means "do not grow, do not shrink, base width is 20%" */
        }

        .container .box.pages {
            flex: 0 0 60%;
        }
		.bottom {
			height: 10vh;
            width: 100%;
           /* border: 1px solid black;*/
        }