/* Variable declaration */
:root {
   --primary-header-color: black;
   --bg-color: white;
}

html {
	/* overflow-y needed for chromium browsers to not shift */
	overflow-y: scroll;
   background-color: white;
}

header {
   display: flex;
   flex-direction: row;
}

/* part of header w/ title and nav */
#left-header {
   display: flex;
   flex-direction: column;
   flex-grow: 4;}
#site-title {
   margin: 0px;
   font-family: sans-serif;
   padding-left: 0.4rem;
   background-color: var(--primary-header-color);
   color: white;}
nav {
   display: flex;
   padding-left: 0.2rem;
   padding-bottom: 3px;
	display: inline;
   background-color: var(--primary-header-color);}



/* The image portion of the header */
#right-header {
   background-image: url("/bg.gif");
   display: flex;
   background-repeat: repeat;
   min-width: 50%;}
#image-gradient {
   flex-grow: 1;
     background: linear-gradient(to right, var(--primary-header-color) 0%, var(--primary-header-color) 20%, rgba(255,0,0,0));}
.nav-item {
   color: white;}



/* everything */
body {
   margin-top: 1rem;
   background-color: var(--bg-color);
	max-width: 60%;
}

 /* main content */
main {
   padding: 1rem;
   padding-top: 0rem;
}

/* images are centered and fixed-width */
img {
   max-width: 50%;
   display: block;
   margin: 0 auto;
   image-rendering: pixelated;
}


/* Code */
pre {
   border-radius: 2px;
   background-color: rgb(16, 15, 15);
   padding: 1rem;
   overflow-x: scroll;
   background-color: black;
   color: white;
}

footer {
   text-align: center;
}