/* marcellus-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/marcellus-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crossfade between page navs */
@view-transition {
  navigation: auto;
}

/* default style resets */
* {
  margin: 0;
  padding: 0;
}

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

/* global inherited styles */
:root {
  font-family: 'Marcellus', serif;
  font-size: 16px;
  --text-primary: hsl(170, 22%, 35%);
  --text-secondary: hsl(170, 22%, 38%);
  /* --bg-primary: rgb(248, 238, 225); */
  /* --text-primary: rgb(34, 34, 34); */
  --bg-primary: white;
  --highlight: #E78651; 
  color: var(--text-primary);
}

.no-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.centered {
  /* margin: 0 100px; */
  margin: 0 auto;  
  text-align: center;
}
/* 
ul.centered {
  text-align: left;
} */

.landing-nav a:hover {
  /* text-decoration: underline; */
  color: var(--highlight);
}

::selection {
  background-color: rgb(208, 126, 156);
}

/* ---------------------------------- */
/* start non-global styles */
/* ---------------------------------- */

body {
  /* max-width: 800px; */
  /* margin: auto; */
  /* padding: 20px 0; */
  background-color: var(--bg-primary);
  /* color: var(--text-primary); */
}

header {
  position: sticky;
  top: 0;
  width: 100%;
}

h1 {
  font-size: 3.5rem;
  font-weight: 600;
  /* color: var(--text-primary); */
}

h1, h2, h3 {
  /* margin-bottom: 0.5em; */
  text-align: center;
  text-transform: capitalize;
}

img, svg, video {
  display: block;
  margin: 0.8em auto;
}

img.profile {
  min-width: 30%;
  /* height: 30%; */
  /* aspect-ratio: 1 / 1; */
  /* border-radius: 2%; */
  border: 1px solid var(--text-primary) ;
}

p {
  font-size: 1.1rem;
  /* line-height: 1.6; */
  color: var(--text-secondary);
  text-align: justify;
}

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

main > * {
  width: 90vw;
}

@media (min-width: 600px) {
  main > * {
    width: 40vw;
  }
}

ul {
  list-style-type: none;
  line-height: 2rem;
  color: var(--text-secondary);
}

/* .landing-nav {
  margin-top: 2em;
} */

.landing-nav li {
  font-size: 2.5rem;
  font-weight: 550;
  line-height: 1.5em;
  text-align: left;
}

.landing-nav a {
  text-decoration: none;
  color: var(--text-primary);
  display: inline-block;
  width: 100%;
}

.nav-bar {
  /* text-align: center; */
  /* margin-top: 1em; */
  display: flex;
  justify-content: space-evenly;
  /* position: sticky; */
  background-color: var(--bg-primary);
}

.nav-bar a {
  font-size: 0.9em;
  color: var(--text-primary);  
  text-decoration: none;
  /* container-name: navbar; */
}

@media (min-width: 600px) {
  .nav-bar a {
    font-size: 1.5em;
  }
}

.nav-bar a:hover {
  color: var(--highlight);
}

/* .nav-bar a. {
  color: rgb(186, 50, 0);
  text-decoration: underline;
} */

hr {
  /* margin: 2em auto; */
  /* width: 60%; */
  /* border: none; */
  border-top: 1px solid var(--text-secondary);
}

.genre-heading {
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 2rem;
}