body {
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 16pt;
  background-color: #101020;
  color: white;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  // border: 2px solid red;
}

.cell {
  // border: 2px solid yellow;
}

.row1 {
  grid-row: 1;
}

.row2 {
  grid-row: 2;
}

.row3 {
  grid-row: 3;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

.col3 {
  grid-column: 3;
}

.white {
  background-color: white;
}

.black {
  background-color: black;
}

div#content {
  text-align: center;
}

div#name {
  width: 335px;
  margin: 20px auto 0px;
  font-size: 32pt;
  font-weight: 200;
  text-transform: uppercase;
}

div#prof {
  width: 335px;
  margin: 0px auto 0px;
  font-size: 20.8pt;
  text-transform: uppercase;
}

div#emblem {
  width: 330px;
  height: 330px;
  margin: 0 auto;

  grid-row-start: 1;
  grid-row-end: 3;
}

#emblem > div {
  // width: 110px;
  // height: 110px;
  // border: 5px solid black;
}

div > a {
  text-decoration: none;
  color: white;
  margin: 0px;
  font-size: 60pt;
}

div > a:hover {
  color: #f0a000;
}

div#links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 375px;
  margin: 30px auto;
  font-size: 25pt;
}

div#links a {
  text-decoration: none;
  color: white;
  margin: 0px;
}

div#links a:hover {
  color: deepskyblue;
}

#links > div {
}