:root {
  --white: #f5f5f5;
  --black: #1b2021;
  --pink: #cc2867;
  --yellow: #ffba08;
  --spike-height: 3rem;
  --mouse-x: 0;
  --mouse-y: 0;
}

/* CSS Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: 500;
}

/* Site Background/Default Text Color */
html {
  background-color: var(--white);
  color: var(--black);
  scroll-behavior: smooth;
}

/* Page Width */
.wrapper {
  position: relative;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* 
        Navigation Bar 
*/

.navbar {
  background: var(--black);
  height: 6rem;
  font-size: 1.2rem;
  top: 0;
  padding-block: 1rem;
}

.navbar__container {
  display: flex;
  justify-content: space-between;

  z-index: 1;
  width: 100%;
  margin: 0 auto;
}

#navar__logo__container {
  display: block;
}

/* Name */
#navbar__logo {
  background-color: var(--white);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 2.5rem;
  font-weight: 900;
  min-width: 15rem;
  transition:
    background-color 0.2s,
    scale 0.2s;
}

#navbar__logo:hover {
  background-color: var(--pink);
  scale: 1.025;
}

/* Contact Info */
#navbar__contact {
  color: var(--white);
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 1rem;
}

/* Nav Buttons */
.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  text-align: center;
}

.navbar__item {
  background-color: var(--pink);
  margin: 0 0.5rem;
  height: 2.5rem;
  width: 8.5rem;
  border-radius: 0.75rem;
  transition:
    outline 0.25s,
    scale 0.25s;
}

.navbar__item:hover {
  outline: 0.25rem solid var(--white);
  scale: 1.05;
}

.navbar__links {
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  font-weight: 700;
}

/* 
        Default Section settings 
*/
.section__title {
  font-size: 3.5rem;
  font-weight: 700;
}

.section__subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 1.5rem 0;
}

.section__text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
}

.section__text__bold {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.text__white {
  color: var(--white);
}

section {
  padding-block: 4rem;
}

/* 
        Page Header 
*/

.header {
  position: relative;
  background-color: var(--black);
  padding-block: 8rem 4rem;
}

/* Spike Transition */
.header::after {
  content: "";
  position: absolute;
  width: 100%;
  height: var(--spike-height);
  bottom: 0;
  -webkit-mask-image: url("assets/triangle.svg");
  -webkit-mask-size: 5.48rem var(--spike-height);
  mask-image: url("assets/triangle.svg");
  mask-size: 5.48rem var(--spike-height);
  transform: translateY(var(--spike-height));
  background: var(--black);
}

/* Columns */
.header__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image__container {
  position: absolute;
  bottom: 0rem;
  left: 6rem;
}

.header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 100%;
  max-width: 18rem;
  outline-style: solid;
  outline-color: var(--black);
  outline-width: 0.5rem;
}

.header__text__box {
  background-color: var(--white);
  border-radius: 24px;
  padding: 1.5rem;
  padding-left: 4rem;
  max-width: 30rem;
  margin-left: 20rem;
}

.header h2 {
  color: #cc2867;
  font-size: 2.25rem;
  font-weight: 900;
  text-align: left;
  padding-bottom: 1rem;
}

/*
        About Me
*/

.about__me {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 6rem;
}

.about__me__container {
  max-width: 45rem;
  margin-inline: auto;
}

.about__me__text__bg {
  background: transparent
    radial-gradient(
      at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%),
      var(--white) 25%,
      #e2e2e2
    )
    no-repeat 0 0;
  padding: 2rem;
  border-radius: 24px;
}

/*
        Education
*/

.banner__title__left {
  position: absolute;
  top: -8rem;
}

/* Banner Effect */
.education {
  position: relative;
  isolation: isolate;
  margin-block: 10rem;
}

.education::after {
  content: "";
  background-color: var(--yellow);
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 4rem;

  transform: skewY(-5deg);
}

/* Columns */
.education__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Honors List */
.education li {
  margin: 1.5rem 0;
  padding: 0 0 0 2rem;
  list-style: none;
  background-image: url(assets/kite_pink.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.75rem;
}

.education li:first-child {
  margin: 0 0 1.5rem 0;
}

/* Right Text Box */
.education__text__box {
  background-color: var(--white);
  border-radius: 24px;
  padding: 2rem;
  margin-top: 6rem;
  max-width: 24rem;
}

/*
        Certifications & Skills
*/

.banner__title__right {
  position: absolute;
  top: -7rem;
  right: 0;
  text-align: right;
}

/* Banner Effect */
.certifications {
  position: relative;
  isolation: isolate;
  margin-block: 10rem;
}

.certifications::after {
  content: "";
  background-color: var(--pink);
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 2rem;
  bottom: 0rem;
  transform: skewY(5deg);
}

/* Columns */
.certifications__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.certifications__column__right {
  padding-top: 3rem;
}

/* Lists */
.certifications li {
  margin: 1.5rem 0;
  padding: 0 0 0 2rem;
  list-style: none;
  background-image: url(assets/kite_yellow.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.75rem;
}

.certifications li:first-child {
  margin: 0 0 1.5rem 0;
}

/*
        Projects
*/

.projects {
  position: relative;
  margin-top: -5rem;
}

.projects__title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.projects__container {
  padding-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.project {
  display: grid;
  grid-template-columns: 5rem 1fr;
  padding: 1rem;
  padding-block: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: var(--black);
  border-radius: 1.5rem;
}

.project h2 {
  grid-column: span 2;
  font-size: 1.5rem;
  text-align: center;
}

.project img {
  margin-top: 3rem;
  margin-bottom: 3rem;
  align-items: center;
  max-width: 5rem;
  filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(55%)
    hue-rotate(201deg) brightness(116%) contrast(92%);
  grid-column: 1;
}

.project p {
  margin-block: 2rem;
  margin-left: 1rem;
}

.project__button {
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
  background-color: var(--yellow);
  margin: 0 0.5rem;
  height: 2.5rem;
  width: 9rem;
  border-radius: 0.75rem;
  transition:
    outline 0.25s,
    scale 0.25s;
}

.project__button:hover {
  outline: 0.25rem solid var(--white);
  scale: 1.05;
}

.project__button a {
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  font-weight: 900;
}

/*
        Footer
*/

.footer {
  height: 14rem;
  background-color: var(--black);
}

/* Spike Transition */
.footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: var(--spike-height);
  -webkit-mask-image: url("assets/triangle.svg");
  -webkit-mask-size: 5.48rem var(--spike-height);
  mask-image: url("assets/triangle.svg");
  mask-size: 5.48rem var(--spike-height);
  background: var(--white);
}

.contact__me__subtitle {
  padding-top: 5rem;
  font-size: 1.5rem;
}

.contact__me__text {
  font-size: 1.1rem;
  line-height: 1.5rem;
}

.contact__me__columns {
  display: grid;
  grid-template-columns: 5rem 15rem 4rem 4rem;
}

.footer a {
  text-decoration: none;
  color: var(--white);
}

.footer img {
  width: 3rem;
  height: 3rem;
  margin: auto;
  padding: auto;
}

@media (max-width: 960px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    position: relative;
  }

  /* Page Width */
  .wrapper {
    position: relative;
    max-width: 50rem;
    margin-inline: auto;
    padding-inline: 2rem;
  }

  .navbar__container {
    display: flex;
    justify-content: space-between;
    height: 110px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0;
  }

  .navbar__menu {
    display: grid;
    grid-template-columns: auto;
    margin: 0;
    width: 90%;
    position: absolute;
    top: -1000px;
    opacity: 0;
    transition: all 0.5s ease;
    height: 38rem;
    z-index: 1;
    background-color: var(--black);
    top: 5rem;
  }

  .navbar__menu.active {
    background-color: var(--black);
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99;
    height: 38rem;
    font-size: 1.6rem;
  }

  .navbar__toggle .bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: --white;
  }

  .navbar__item {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 60%;
    height: 4rem;
  }

  .navbar__links {
    text-align: center;
    padding: 1.1rem;
    width: 100%;
    display: table;
  }

  #mobile-menu {
    position: absolute;
    top: 20%;
    right: 5%;
    transform: translate(5%, 20%);
  }

  .navbar__btn {
    padding-bottom: 2rem;
  }

  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80px;
    margin: 0;
  }

  .navbar__toggle .bar {
    display: block;
    cursor: pointer;
    background-color: var(--white);
  }

  #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
  }

  #mobile-menu.is-active .bar:nth-child(1) {
    transform: translatey(8px) rotate(45deg);
  }

  #mobile-menu.is-active .bar:nth-child(3) {
    transform: translatey(-8px) rotate(-45deg);
  }

  /* 
        Page Header 
  */

  .header {
    position: relative;
    background-color: var(--black);
    padding-block: 8rem 4rem;
  }

  /* Columns */
  .header__columns {
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .image__container {
    position: absolute;
    top: -19rem;
    left: 2rem;
    right: 2rem;
  }

  .header img {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    justify-content: center;
    margin: auto;
    border-radius: 100%;
    max-width: 20rem;
    max-height: 20rem;
    outline-style: solid;
    outline-color: var(--black);
    outline-width: 0.5rem;
  }

  .header__text__box {
    background-color: var(--white);
    border-radius: 24px;
    padding: 1.5rem;
    padding-left: 1.5rem;
    max-width: 30rem;
    margin: auto;
    margin-top: 15rem;
  }

  .header h2 {
    color: #cc2867;
    font-size: 1.8rem;
    font-weight: 900;
    text-align: left;
    padding-bottom: 0.5rem;
  }

  /*
          Education
  */

  .banner__title__left {
    position: absolute;
    top: -10rem;
  }

  /* Banner Effect */
  .education {
    position: relative;
    isolation: isolate;
    margin-block: 8rem;
  }

  /* Columns */
  .education__columns {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  /* Right Text Box */
  .education__text__box {
    display: flex;
    justify-content: center;
    margin: auto;
    background-color: var(--white);
    border-radius: 24px;
    padding: 2rem;
    margin-top: 3rem;
    width: 90%;
    max-width: 24rem;
    grid-row: 2;
  }

  /*
          Certifications & Skills
  */

  .banner__title__right {
    position: absolute;
    top: -11rem;
    right: 0;
    text-align: right;
    padding-inline: 2rem;
  }

  /* Banner Effect */
  .certifications {
    position: relative;
    isolation: isolate;
    margin-block: 10rem;
  }

  .certifications::after {
    content: "";
    background-color: var(--pink);
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 2rem;
    bottom: 0rem;
    transform: skewY(5deg);
  }

  /* Columns */
  .certifications__columns {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .certifications__column__right {
    padding-top: 1rem;
  }

  /*
          Projects
  */

  .projects {
    position: relative;
    margin-top: -5rem;
  }

  .projects__title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .projects__container {
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .project {
    display: grid;
    max-width: 30rem;
    grid-template-columns: 5rem 1fr;
    padding: 1rem;
    padding-block: 2rem;
    margin: auto;
    margin-block: 2rem;
    background-color: var(--black);
    border-radius: 1.5rem;
  }

  .project h2 {
    grid-column: span 2;
    font-size: 1.5rem;
    text-align: center;
  }

  .project img {
    margin-top: 3rem;
    margin-bottom: 3rem;
    align-items: center;
    max-width: 5rem;
    filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(55%)
      hue-rotate(201deg) brightness(116%) contrast(92%);
    grid-column: 1;
  }

  /*
        Footer
  */

  .footer {
    height: 14rem;
    background-color: var(--black);
  }

  /* Spike Transition */
  .footer::before {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--spike-height);
    -webkit-mask-image: url("assets/triangle.svg");
    -webkit-mask-size: 5.48rem var(--spike-height);
    mask-image: url("assets/triangle.svg");
    mask-size: 5.48rem var(--spike-height);
    background: var(--white);
  }

  .contact__me__subtitle {
    padding-top: 5rem;
    font-size: 1.5rem;
  }

  .contact__me__text {
    font-size: 1.1rem;
    line-height: 1.5rem;
  }

  .contact__me__columns {
    display: grid;
    grid-template-columns: 5rem 13rem 3rem 3rem;
  }

  .footer p {
    font-size: 1rem;
  }

  .footer a {
    text-decoration: none;
    color: var(--white);
  }

  .footer img {
    width: 2rem;
    height: 2rem;
    margin: auto;
    padding: auto;
  }
}