@font-face {
  font-family: "Akt";
  src: url("../fonts/Akt.ttf") format("truetype");
  font-weight: 300 900;
}

:root {
  --bg-colour: #141313;
  --text-colour: #EDEDEB; 
  --purple: #9282FF; 
  --light-purple: #C9C1FF;

  --margin: 100px;
  --smaller-margin: 50px;

  --sans-serif: "Akt", sans-serif;
}

body {
  background: var(--bg-colour);
  color: var(--text-colour);
  font-family: var(--sans-serif);
  font-weight: 300;
  font-style: normal;
  font-size: 1.55rem;
  line-height: 120%;
  padding: 20px;
}

.nav-home h1, .nav-home h2, .nav-home h3 {
  font-size: 1em;
  font-weight: 300;
}

.nav-home h2, .nav-home h3 {
  color: var(--purple);
}

.nav-home h1 a {
  text-decoration: none;
}


a {
  text-decoration-style: wavy;
  text-decoration-color: var(--purple);
  text-decoration-skip-ink: auto;
  text-underline-offset: 4px;
  transition: text-underline-thickness 0.2s ease-in;
}

a:hover, a:active, a:focus {
  color: var(--light-purple);
  text-decoration-thickness: 3px;
}

p {
  margin-bottom: 1em;
}

.copyright {
  color: var(--purple);
}

.category {
  color: var(--purple);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: max-content;
  column-gap: 20px;
  row-gap: 20px;
  max-width: 900px;
  margin: 2em auto;
  min-height: auto;
}

.nav-home, .nav-copyright {
  grid-column: span 6;
}

main {
  margin-top: var(--margin);
  grid-column: span 12;
}

article header {
  margin-bottom: var(--smaller-margin);
}

article header h1 {
  font-size: 1.5em;
  line-height: 1.2;
  font-weight: 100;
  margin-bottom: 10px;
}

article header h2 {
  font-size: 1em;
  font-weight: 300;
  color: var(--purple);
}

article h3 {
  font-size: 1.2em;
  line-height: 1.2;
  font-weight: 300;
  margin-top: 2em;
  margin-bottom: 1em;
  color: var(--purple);
}

figure {
  margin-bottom: 2em;
}

figure img {
  border-radius: 20px;
  max-width: 100%;
}

figcaption {
  margin-top: 15px;
  font-size: 0.75em;
  opacity: 0.9;
}

.index h1, .index h2 {
  font-size: 1em;
}

.footer.main {
  margin-top: 50px;
  grid-column: span 12;
}

.footer.left {
  grid-column: span 9;
}

.footer.right {
  grid-column: span 3;
  text-align: right;
}

.footer p {
  margin: 0;
}

@media (width <= 500px) {
  .footer.left {
    grid-column: span 12;
  }

  .footer.right {
    grid-column: span 12;
    text-align: left;
  }
}

@media (prefers-reduced-motion) {
  * {
    animation: none !important;
    transition-duration: 0s !important;
  }
}