/* colours and backgrounds are variables so they can be easily interchanged between pages */
:root {
  --lightest: #eeccff;
  --light: #d580ff;
  --dark: #550080;
  --darkest: #220033;
  --accent: #aa00ff;
  --backgroundimg: url("assets/checker.png");
  --textcolor: #220033;
}

body
{
  background-image: var(--backgroundimg);
  background-attachment: fixed;
  font-family: "Courier New", Courier;
  text-align: center;
  color: var(--textcolor);
}

* { box-sizing: border-box; }

p, i, b { font-size: 18px; }

li { text-align: left; }

/* box used for a nice border and background for elements */
.box
{
  border: 2px solid;
  border-color: var(--accent);
  background-color: var(--light);
  overflow: auto;
  color: var(--darkest);
  padding: 4px;
}

/* simple border for elements*/
.border
{
	border: 2px solid;
	border-color: var(--accent);
}

/* win95 themed window */
.window
{
  border: 2px solid;
  border-color: var(--lightest) var(--dark) var(--dark) var(--lightest);
  background-color: var(--light);
  width: 90%;
  margin: auto;
  overflow: auto;
}


.navbar { margin: 8px; }


/* links on nav bar. they appear as win9x/2000 buttons */
.navbar a
{
  border: 2px solid;
  border-color: var(--lightest) var(--dark) var(--dark) var(--lightest);
  font-size: 20px;
  color: var(--darkest);
  padding: 4px 8px;
}

.navbar a:hover
{
  border-color: var(--darkest) var(--dark) var(--dark) var(--darkest);
  background-color: var(--accent);
  color: var(--lightest);
}

@media screen and (max-width: 650px) {
 .navbar a { display:block; }	
 .window { width:100%;  }
}

/* win95 window header */
.header
{
  background-color: var(--accent);
  margin: 2px;
  color: var(--lightest);
}

/* win95 window content */
.content
{
  border: 2px solid;
  border-color: var(--darkest) var(--dark) var(--dark) var(--darkest);
  background-color: var(--lightest);
  margin: 2px;
  padding: 5px;
}