/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* Text formatting
red
soft-red
underheadingtext
*/

/* Math stuff
def
prop
proof
*/
   
   
:root {
  /* Colors */
  --white-color: #eeeeee;
  --black-color: #111111;
  --red-color: #ff0000;
  --soft-red-color: #ff5959;
  --gray-color: #999999;
  --dark-gray-color: #666666;
  
  --main-bg-color: var(--black-color);
  --normal-text-color: var(--white-color);
  --visited-link-color: var(--dark-gray-color);
  --soft-text-color: var(--gray-color);
  
  /* counters */
  counter-reset: propcount 0;
  counter-reset: defcount 0;
}

h1 {
  text-align: center;
}

h2 {
 margin-bottom: 0; 
}

body {
  transition: all 0.25s ease-in;
  background-color: var(--main-bg-color);
  color: var(--normal-text-color);
  margin-left: 20%;
  margin-right: 20%;
}

section {
 margin-left: 2em; 
}

/* Sidebar */

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: var(--main-bg-color);
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

/* Text */

#subtitle {
 font-family: serif;
 font-style: italic;
 text-align: center;
 color: var(--soft-text-color);
}

.underheadingtext {
 font-family: serif;
 font-style: italic;
 color: var(--soft-text-color);
}

.red {
 color: var(--red-color); 
}

.soft-red {
 color: var(--soft-red-color); 
}

.srit {
  color: var(--soft-red-color);
  font-style: italic;
}

/* Math */

.def:before {
  counter-increment: defcount;
  content: "Definition " counter(defcount) ".";
  margin-right: 1em;
  font-weight: bold;
}

.prop:before {
  counter-increment: propcount;
  content: "Proposition " counter(propcount) ".";
  margin-right: 1em;
  font-weight: bold;
  font-style: normal;
}

.prop {
  font-style: italic;
}

.proof:before {
  content: "Proof.";
  margin-right: 1em;
  font-style: italic;
}

.proof:after {
  width: 1em;
  height: 1em;
  border: 2px solid var(--soft-red-color);
  content:"";
  float: right;
  margin-right: 1em;
}

.examp:before {
  content: "Example.";
  margin-right: 1em;
  font-weight: bold;
  font-style: italic;
}

.examp {
 font-style: normal; 
}

/* Links */
a:link {
  color: var(--normal-text-color);
  font-weight: bold;
  text-decoration: underline;
}

a:visited {
  font-weight: bold;
  color: var(--visited-link-color);
}

/* Tables */
table {
  border-collapse: collapse;
  text-align: center;
}

th {
  transition: all 0.25s ease-in;
	border: 0.2em solid var(--normal-text-color);
	padding: 0.2em 0.5em;
}

td {
  transition: all 0.25s ease-in;
	border: 0.2em solid var(--normal-text-color);
	padding: 0.2em 0.5em;
}