body {
  --max-width: 1024px;
  --pad: max(20px, calc((100vw - var(--max-width)) / 2));

  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100vw;
}

.nav-link {
  color: var(--dark);
  text-decoration: none;
  font-weight: 900;
  font-family: "Open Sans";
}

.shadow {
  filter: drop-shadow(0 4px 0 #0004);
}

.icon, .r-icon, .button {
  display: inline-flex;
  align-items: center;
}

.clamp-width {
  width: 100vw;
  padding-right: var(--pad);
  padding-left: var(--pad);
  box-sizing: border-box;
}

.icon::before {
  font-family: 'Material Symbols Outlined';
  content: attr(data-i);
  font-size: 36px;
  margin-right: 5px;
}

.r-icon::after {
  font-family: 'Material Symbols Outlined';
  content: attr(data-i);
  font-size: 1.5rem;
  margin-left: 5px;
}

.scroll-opacity {
  opacity: calc(1 - var(--scroll));
}

h1 {
  font-size: 40px;
  font-family: "Open Sans";
  font-weight: 900;
}

i {
  font-size: 20px;
  font-size: "Source Serif Pro";
}

p {
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 100;
}

.lighter {
  background: #fff4;
}

.darker {
  background: #0004;
}

hr {
  height: 1px;
}

.button {
  color: var(--color);
  position: relative;
  padding: 10px 40px;
}

.button::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--color);
  opacity: 50%;
  content: "";
  border-radius: 10px;
}

/*----------------------------------------------------------------------------*/

header {
  display: flex;
  gap: 40px;
  font-size: 25px;
  padding: 20px;
  font-family: "Open Sans";
  font-weight: bolder;
  color: var(--dark);
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

#header-back {
  background: var(--light);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 84px;
  z-index: -1;
}

#about {
  height: 90vh;
  background: var(--light);
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 30px;
  color: var(--dark);
}

#avatar {
  filter: grayscale(1) opacity(0.2);
  position: absolute;
  width: 900px;
  height: 900px;
  left: 70%;
  top: 35%;
  transform: translate(-50%, -50%);
}

nav {
  display: flex;
  gap: 20px;
}

#about-hr {
  max-width: 600px;
}

#about-me {
  max-width: 600px;
}

/*----------------------------------------------------------------------------*/

#projects {
  height: 100vh;
}