@charset "utf-8";

body {
  font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
  background-color: #f6f5f5;
}

.container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.flex {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  align-items: center;
}

.flex-column {
  flex-direction: column;
}

.column {
  flex-direction: column;
}

.gap-20 {
  gap: 20px;
}

.gap-30 {
  gap: 30px;
}

.mt-20 {
  margin-top: 20px;
}

.header-wrapper {
  background-color: rgba(48, 48, 48, 0.3);
  backdrop-filter: blur(5px);
  padding: 0 20px;
  height: 65px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;

  align-items: center;

  a {
    text-decoration: none;

    h1 {
      font-size: 2.5rem;
      font-weight: 700;
      color: #fff;
    }
  }

  nav {
    display: flex;
    justify-content: center;
    gap: 20px;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 20px;

      li {
        font-size: 1.8rem;
        font-weight: 500;
        color: #fff;

        a {
          text-decoration: none;
          color: inherit;
          transition: color 0.3s;

          &:hover {
            color: #78c5ef;
          }
        }
      }
    }
  }
}

.hero-banner {
  height: 100svh;
  background-image: url('../img/gradient.jpg');
  background-size: cover;

  .hero-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;

    h2 {
      margin-top: 200px;
      font-size: 2.5rem;
      font-weight: 700;
      color: #1e1e25;
      margin-bottom: 20px;
    }

    p {
      font-size: 1.8rem;
      color: #1f242b;
      margin-bottom: 20px;
    }

    .btn {
      background-color: #51a0d5;
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      font-size: 1.8rem;
      transition: all 0.3s;

      &:hover {
        scale: 1.01;
        background-color: #78c5ef;
      }
    }
  }
}

.about {
  margin: 50px 0 50px 0;

  .parent {
    height: 600px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;

    .about-me {
      padding: 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
      grid-column: span 2 / span 2;
      grid-row: span 5 / span 5;

      .picture-me {
        padding: 15px;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background-image: url('../img/cedar-vally.png');
        background-size: cover;
        background-position: center;
      }

      p {
        font-size: 1.8rem;
        color: #1f242b;
        margin-top: 20px;
      }
    }

    .my-skills {
      padding: 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
      grid-column: span 3 / span 3;
      grid-row: span 3 / span 3;
      grid-column-start: 3;
    }

    .my-projects {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
      grid-column: span 3 / span 3;
      grid-row: span 2 / span 2;
      grid-column-start: 3;
      grid-row-start: 4;
    }
  }
}

/* Google chrome */
@-webkit-keyframes svg-text-anim {
  40% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  60% {
    stroke-dashoffset: 0;
    fill: #ffffff;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #ffffff;
  }
}
/* Most browsers */
@keyframes svg-text-anim {
  40% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  60% {
    stroke-dashoffset: 0;
    fill: #ffffff;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #ffffff;
  }
}