@import url("fira.css");

:root {
  --background: hsl(282, 23%, 9%);
  --foreground: hsl(271, 64%, 88%);
  --drop-shadow-color: hsla(271, 64%, 88%, 0.235);
  --drop-shadow-size: 8px 8px;
  --links: hsl(267, 84%, 81%);
  --profile-image-size: 200px;
  --page-width: 520px;
}

body {
  color: var(--foreground);
  background-color: var(--background);
  font-family: "Fira Code";
  font-size: 13px;
}

h1,
p {
  margin: 0;
}

a {
  color: var(--links);
  text-decoration: underline dotted;
}

a:hover {
  text-decoration: underline solid;
}

ul {
  margin: 0;
  padding: 0;
  list-style: square;
  list-style-position: inside;
}

ul.social {
  list-style: none;
}

li {
  padding-left: 0;
  text-indent: 1em;
}

/* 
li:before {
    content: "-";
    padding-right: 5px;
} */

div.page-container {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: var(--page-width);
}

div.grid {
  display: grid;
  grid-template-columns: var(--profile-image-size) auto;
  grid-template-rows: auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px solid var(--foreground);
  background-color: var(--background);
  padding: 10px;
  filter: drop-shadow(var(--drop-shadow-size) var(--drop-shadow-color));
}

div.grid div:nth-child(2) {
  margin: auto 0;
  text-align: right;
  text-overflow: ellipsis;
}

div.grid div:nth-child(4) {
  vertical-align: middle;
  margin: auto 0;
}

div.grid div:last-child {
  grid-column: span 2;
}

div.grid > div {
  text-align: left;
}

img.profile-image {
  width: var(--profile-image-size);
  border: 2px solid var(--foreground);
}

p.social-heading {
  margin-top: 0.75em;
}