html {
  scroll-behavior: smooth;
}

body {
  color: #fff;
  background-color: #121416;
  border-top: 0;
  line-height: 1.5;
}

h1 {
  font-size: 3.5rem;
  margin: 0;
}

.page-header {
  background-image: url(/img/me-2.webp);
  background-repeat: no-repeat;
  background-position: top right -8rem;
  border-bottom: 1px solid #fff3;
  height: 50rem;
  padding-right: 45%;
  padding-top: 10rem;
  text-align: left;
}

.redline {
  color: #fff8;
  margin-bottom: 2rem;
}

.redline--secondary {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5;
  width: 80%;
}

.main-cta {
  background: #0984e3;
  color: #fff;
  display: inline-flex;
  font-size: 1.5rem;
  font-weight: semibold;
  padding: 1rem 2rem;
  transition: all 0.3s ease;
}

.main-cta:hover {
  filter: brightness(1.25);
}

.box__title {
  font-size: 2rem;
}

.box--skills,
.box--academic,
.box--reading,
.box--languages,
.box--my-data {
  background-color: #424242;
  color: #fff;
}

.box--reading {
  background-color: #616161;
}

.box--languages {
  background-color: #858585;
}

@media screen and (max-width: 1024px) {
  .container {
    max-width: 480px;
    width: 100%;
  }

  .page-header {
    padding: 11rem 1rem 3rem;
    background-position: top;
    background-blend-mode: overlay;
    background-color: #333;
    height: auto;
    background-size: cover;
  }

  h1 {
    line-height: 1;
    font-size: 3rem;
  }

  .redline--secondary {
    width: 100%;
    font-size: 1.25rem;
  }

  .main-cta {
    font-size: 1.25rem;
    padding: 0.75rem 1.5rem;
  }
}