@import url("https://fonts.googleapis.com/css2?family=Cinzel&family=Libre+Baskerville:ital@0;1&display=swap");
:root {
  --header-font: "Cinzel", serif;
  --background-color: RGB(51, 47, 48);
  --font-color: RGB(249, 249, 249);
  --menu-background-color: black;
  --link-color: RGB(128, 132, 141);
  --clicked-link-color: RGB(179, 180, 184);
  --font: "Libre Baskerville", serif;
  --footer-color: gray;
  --accent-color: darkolivegreen;
  --label-color: darkslategray;
}

html {
  margin: 0;
  padding: 0;
  text-align: start;
}

body {
  color: var(--font-color);
  background-color: var(--background-color);
  display: grid;
  grid-template-columns: repeat(12, 7%);
  gap: 1em 1em;
}

strong {
  font-family: var(--header-font);
  font-size: 1.25em;
}

a {
  color: var(--link-color);
}

a.clicked {
  color: var(--clicked-link-color);
}

.homepage,
.landing,
.writing {
  grid-column: 2/span 10;
}

p {
  font-family: var(--font);
  padding: 1rem;
  line-height: 1.75;
}

blockquote {
  font-style: italic;
  font-size: 10pt;
}

footer {
  font-family: var(--font);
  color: var(--footer-color);
  font-style: italic;
  font-size: smaller;
  text-align: center;
  grid-column: 1/span 12;
}

nav {
  grid-column: 1/span 12;
}

.menu {
  font-family: var(--header-font);
  background-color: var(--menu-background-color);
}

h1,
h2,
h3 {
  font-family: var(--header-font);
}

h1 {
  font-size: xx-large;
}

header h1 {
  font-size: 36pt;
}

ul {
  list-style-type: none;
}

nav a {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav h1 {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
}

.charname {
  grid-column: 7/span 5;
  text-align: center;
}

.profile {
  grid-column: 2/span 5;
  grid-row: 2/span 2;
  align-self: center;
}

.profile img {
  height: 400px;
}

.bio {
  grid-column: 7/span 5;
  background-color: var(--accent-color);
  padding: 1rem;
}

.video {
  width: 90%;
  height: auto;
}

.label-left {
  grid-column: 1/span 3;
  padding: 1rem;
  align-self: center;
}

.label-left h2 {
  background-color: var(--label-color);
  padding: 1rem;
}

.appearance {
  grid-column: 4/span 9;
  background-color: var(--accent-color);
}

.skills {
  grid-column: 2/span 8;
  background-color: var(--accent-color);
  padding: 1rem;
}

.label-right {
  grid-column: 10/span 3;
  padding: 1rem;
  align-self: center;
}

.label-right h2 {
  background-color: var(--label-color);
  padding: 1rem;
}

.common {
  grid-column: 4/span 8;
  background-color: var(--accent-color);
  padding: 1rem;
}

.uncommmon {
  grid-column: 2/span 8;
  grid-row: 7/span 1;
  background-color: var(--accent-color);
  padding: 1rem;
}

.hook {
  grid-column: 4/span 8;
  background-color: var(--accent-color);
  padding: 1rem;
}

/*# sourceMappingURL=styles.css.map */