@import './constants.css';


body {
	margin: 0;
	display: grid;
	grid-template-rows: auto 1fr; /* header, content */
	grid-template-columns: auto 1fr;  /* sidebar, main */
	grid-template-areas:
	  "header header"
	  "sidebar main";
	height: 100vh;
  }


  
  /* Assign grid areas */
  .header {
	grid-area: header;
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--color-header);
	color: white;
	padding: 1rem;
	box-shadow: var(--box-shadow-header);
	/* display: flex;
	align-items: center; horizontal centering */
	height: 1.5rem;
	display: flex;
	align-items: center;
  }
  
.header a {
	color: white;
    line-height: 1;
    font-size: 1.5rem;
	font-weight: bolder;
	padding-right: 2rem;
	align-items: center;
	margin: 0px;
}
  



  .layout {
	display: contents; /* Let children inherit grid from body */
  }
  
  .sidebar {
	grid-area: sidebar;
	background: var(--color-sidebar);
	overflow-y: auto;
	padding: 1em;
	box-shadow: var(--box-shadow-sidebar);
	width: fit-content;
  }

.sidebar a {
	font-size: 1rem;
	margin-bottom: 0.5em; 
}

.sidebar h2 {
	margin: 0%;
}


  .view-area {
	grid-area: main;
	overflow-y: auto;
	padding: 2rem;
  }





 


/* .toc {
	padding: 0px;
	background-color: aquamarine;
} */

/* .tool {
    background-color: aquamarine;
} */

.tool-input {
	display: grid;
    align-items: center;
    gap: 0.5em 1em;
    grid-template-columns: max-content max-content auto; 
}


.textarea {
    text-align: center;
}

th {
	background-color: #D1ECF1 !important;
}

/* pre {
	background-color: #D1ECF1 !important;
} */