@import url('https://fonts.googleapis.com/css2?family=Varela&display=swap');
@import "icons.css";

:root {
  --text-color: hsla(20, 78%, 62%);
  --background-color: hsla(0, 0%, 8%, 1);
}

* {
  box-sizing: border-box;
}


body {
  width: 100vw;
  min-height: 100%;
  margin: 0 auto;

  padding-bottom: 5rem;

  font-family: "Varela", sans-serif;
  font-size: 16px;
  line-height: 1.5;

  color: var(--text-color);
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
}

a:link, a:visited {
  color: color(from var(--text-color) srgb r g b / .7);
}

a:hover, a:active {
  color: var(--text-color);
}

nav {
  display: flex;
  justify-content: flex-end;
  text-shadow: color-mix(in hsl, var(--text-color) 29%, black 40%) 1px 1px;

  ul {
    list-style-type: none;
    li {
      text-align: right;

      & + li {
        margin-top: 0.6em;
      }

      &:has(a[data-active])::after {
        display: inline-block;
        transform: rotateZ(180deg);
        content: "\27A4";
        margin-left: 0.6em;
        opacity: 0.7;
      }
    }

  }
}

.content-wrapper {
  width: 100%;
  max-width: 1024px;

  padding: 0 1rem;
  margin: auto;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#hero {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 2rem;

  background: linear-gradient(180deg, hsla(0, 0%, 0%, 0) 10vw, var(--background-color) 25vw);
  padding-top: 16vw;

}

main {
  background-color: var(--background-color);
}

article {
  background-color: hsla(0, 0%, 75%, 7%);
  border-radius: 1rem;

  padding: 1rem;
}