* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --text-color: white;
  position: relative;
  max-width: 100%;
}

main {
  scroll-snap-type: y mandatory;
}

html {
  scroll-behavior: smooth;
}

article > div{
  scroll-snap-align: start;
}

section {
  width: 85%;
  margin: 0 auto;
  article {
    max-width: 100%;
    padding: 5em 0;
  }
}

p {
  max-width: 100%;
  word-wrap: break-word;
}

h1 {
  font-size: 30vmin;
  margin: auto 0;
  font-family: Helvetica, sans-serif;
  letter-spacing: -3px;

  span {
    font-family: "Allura", cursive;
    color: #ff0051;
    letter-spacing: 0px;
    font-size: 41vmin;
  }
}

h2 {
  font-size: 4.2em;
  font-family: "Major Mono Display", monospace;
  margin: 0;
}

.name {
  font-family: "Major Mono Display", monospace;
}

h3 {
  display: inline-block;
  font-size: 4em;
  font-family: "Pixelify Sans", monospace;
}

.ww {
  top: -2em;
  background-color: #ff0051;
  margin: 0 auto;
  width: fit-content;
  padding: 3px;
}

i.Sc::after { 
  position: relative;
  content: "SenCraft";
  font-family: "Allura", cursive;
  font-size: xxx-large;
  line-height: 0;
  color: #00ffae;
}

body {
  background-color: #00ffae;
  margin: 0;
}

header {
  display: flex;
  height: 0;
}

.left {
  width: 2em;
  height: 100vh;
  writing-mode: vertical-lr;
}

.right {
  margin-left: auto;
  width: 4em;
  writing-mode: vertical-rl;
}

.sidebar > ul {
  z-index: 10;
  align-items: center;
  display: flex;
  position: fixed;
  justify-content: start;
  mix-blend-mode: difference;

  li {
    list-style-type: none;
    margin-bottom: 3em;
    font-family: "Pixelify Sans", sans-serif;

    a {
      all: inherit;
      color: white;
      -webkit-font-smoothing: none;
      font-size: 1.3em;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
        /* text-decoration-thickness: 5px !important; */
      }
    }
  }
}

article {
  position: relative;
  width: 100vw;
}

h3 ~ p {
  max-width: 60%;
}

article > h2 {
  &::first-letter {
    font-size: 150%;
  }
}

#Peoples > article {
  display: flex;
  justify-content: space-between;
  &:nth-child(even) {
    flex-direction: row-reverse;
  }
  div {
    width: 47%;
    img {
      width: 100%;
    }
  }
  p {
    bottom: 0;
  }
}

h2 ~ p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
}