*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  display: grid;
  height: 100%;
  padding: 5vh 10vw;
  font-family: "Rubik", serif;
  background-color: #dfdbe5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%236c63ff' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

h1 {
  font-size: 3.5em;
  /* font-weight: 500; */
  margin-bottom: 0;
  text-transform: uppercase;
}

a {
  text-decoration: none;
  color: #121314;
  position: relative;
}
/* 
a:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 60%;
  left: -0.1em;
  right: -0.1em;
  bottom: 0;
  transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
  background-color: #6c63ff;
} */

a:hover:after {
  top: 0%;
}

main {
  margin: auto;
}

.intro {
  /* display: flex;
  justify-content: space-around; */
}

.intro > article {
  margin: auto;
  text-align: center;
}

.intro > article > p {
  font-family: "Karla";
  font-size: 1.5em;
}

img.hi {
  width: 100%;
  max-width: 379px;
}

.contact-icons {
  display: flex;
  justify-content: center;
}

a > svg {
  width: 30px;
  height: 30px;
  margin: 9px;
}

a > svg:hover {
  fill: #6c63ff;
}