:root {
  --base-3:  #fdf6e3;
  --base-2:  #eee8d5;
  --base-1:  #93a1a1;
  --base-0:  #839496;
  --base-00: #657b83;
  --base-01: #586e75;
  --base-02: #073642;
  --base-03: #002b36;

  --split:   #b58900;
  --tetrad:  #d33682;
  --analog:  #2aa198;
  --comp:    #cb4b16;
  --mono:    #268bd2;
  --altlog:  #6c71c4;
}

a:link {
  text-decoration: none;
  color: inherit;
}

a:visited {
  text-decoration: none;
  color: inherit;
}

body {
  font-family: sans-serif;
  font-size: 16px;

  background-color: var(--base-01);
  color: var(--base-03);
}

.title {
  font-size: 32px;
}

.subtitle {
  font-size: 18px;
}

.t_box {
  margin: 2% 0 0 7%;
  padding: 2% 2% 2% 2%;
  width: 85%;
  border: 0px solid var(--split);
  text-align: center;

  background-color: var(--base-2);
  color: var(--base-03);
}

.content{
  margin: 0 2% 2% 7%;
  margin-bottom: 32px;
  padding: .5% .5% 0 1.5%;
  width: calc(87% + 0px);
  min-height: 360px;
  text-align: left;

  background-color: var(--base-3);
}

.emph, .emph:visited, .emph:link{
  color: var(--split);
}

.high, .high:visited, .high:link{
  color: var(--tetrad);
}

#greg{
  color: var(--tetrad);
}

.stress, .stress:visited, .stress:link {
  color: var(--analog);
}

#greg:hover, #cosc102:hover {
  cursor: pointer;
}

.nav {
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  margin-left: calc(6.5% - 20px);
  height: 20px;
  min-width: 60px;
  text-align: center;
  text-transform: uppercase;
  padding: 2px 2px 2px 2px;

  background-color: var(--mono);
}

a.nav:link, a.nav:visited {
  color: var(--base-3);
}

.nav_home {
  margin-top: 50px;
}

.nav_work {
  margin-top: 175px;
}

.nav_si {
  margin-top: 245px;
}

.nav_cont {
  margin-top: 330px;
}

#sel {
  background-color: var(--tetrad);
  color: var(--base-3);
}

.nav:hover{
  background-color: var(--altlog);
  margin-left: calc(6% - 20px);
  cursor: pointer;
}

.footer {
  position: fixed;
  margin-top: 10%;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 3px 3px 3px 3px;
  font-size: 14px;

  background-color: var(--base-2);
  color: var(--base-01);
  text-align: center;
}

.sub {
  font-size: 14px;
  margin-left: 20px;
  margin-top: -.2%;
}

.divide {
  height: 100px;
  width: 100%;
  background-color: red;
}