style.css

* {
  box-sizing: border-box;
}

html {
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
}

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Square Peg", cursive;
}

.dochead {
  text-align: center;
  background-color: lavenderblush;
  padding: 3rem 1rem;
  padding-top: 4.5rem;
  position: relative;
}

.docmain {
  max-width: 60ch;
  margin: 0 auto;
  padding: 1rem;
}

.docmain > * {
  border-top: 0.125rem solid hotpink;
  padding: 1rem;
}

nav > a {
  margin: 0.5rem;
}

.navi:link {
  color: blue;
}

.navi:visited {
  color: purple;
}

.navi:hover {
  background-color: lightcoral;
}

.navi:active {
  background-color: peachpuff;
}

.docmain > * + * {
  margin-top: 5rem;
}

.docmain *:first-child {
  border: none;
}

.dochead > p::after {
  content: " 🦄";
}

*::selection {
  background-color: purple;
  color: peachpuff;
}

.experience-heading {
  display: inline-block;
}

.experience-subheading {
  display: inline-block;
}

.hire-me {
  background-color: hotpink;
  color: whitesmoke;
  border-radius: 0.25rem;
  padding: 0.5rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.main-heading {
  position: relative;
  left: -1rem;
}

.dochead-h-p {
  font-size: 4rem;
}

.dochead-sub {
  font-size: 0.25em;
}

.name-head {
  font-size: 4rem;
}