:root {
  --violet: #8f00ff;
}

@font-face {
  font-family: "Major Mono Display";
  src: url(./MajorMonoDisplay-Regular.ttf);
}

@font-face {
  font-family: "MPLUS Code";
  src: url(./MPLUSCodeLatin-Regular.ttf);
}

html, body {
  height: 100%;
}

ul {
  padding: 0;
}

li {
  padding-top: 0.4em;
}

body {
  margin: 0;
  font-family: "MPLUS Code", monospace;
  font-weight: 400;
  font-style: normal;
  color: whitesmoke;
  background-color: black;
  text-align: center;
}

h1, h2, h3 {
  color: var(--violet);
  font-family: "Major Mono Display", monospace;
}

h1 {
  font-size: 8rem;
}

a:link, a:visited {
  color: inherit;
}

main {
  height: 100%;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr auto;
}

header {
  /* grid-row: 1; */
  grid-column: 2;
}

section.socials {
  grid-column: 2;
  grid-row: 3;
}

.socials > ul {
  list-style-type: none;
}

header > h1 {
  color: var(--violet);
}

header > h1::before {
  content: "0x76";
}

header > h1:hover::before {
  content: "v";
}