/* Home page */

* { 
  /* Make CSS behave more sensibly... */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Fira Sans";
  src: url("./assets/fonts/FiraSans-Regular.otf");
  font-weight: 400;
}

@font-face {
  font-family: "Fira Sans";
  src: url("./assets/fonts/FiraSans-Heavy.otf");
  font-weight: 900;
}


/* Containers */

body {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: [gutter-left] 1fr [content-column] max(25vw) [gutter-right] 1fr;
  grid-template-rows: [header] 1fr [center] 1fr [footer] 1fr;
  font-family: 'Fira Sans', sans-serif;
}

.main {
  grid-column: content-column / content-column;
  grid-row: center / center;
}


/* Monogram */

.monogram {
  width: 100%;
  aspect-ratio: 2 / 3;
  mask-image: url('assets/images/monogram.svg');
  background: black;
  background-size: cover;
}


/* Title and links */

h1 {
  display: inline;
  font-weight: bold;
  font-size: 1em;
}

.intro {
  margin-top: 2em;
  font-size: 1.5rem;
  line-height: 1.4;
}

.intro .bio {
  margin-bottom: 1em;
}

.intro .links {
  display: flex;
  gap: 1.5ch;
}

.intro a {
  color: black;
  border-left: 0.33ch solid rgba(0,0,0,0);
  border-right: 0.33ch solid rgba(0,0,0,0);
  margin-left: -0.33ch;
  margin-right: -0.33ch;
}

.intro a:visited {
  color: black;
}

.intro a:active,
.intro a:hover {
  background-color:hsl(50, 100%, 70%);
  border-left: 0.33ch solid hsl(50, 100%, 70%);
  border-right: 0.33ch solid hsl(50, 100%, 70%);
}