@import url(general.css);
.container {
  display: flex;
  height: 100vh;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: -65px;
  border: 1px solid var(--border-color);
  border-top-width: 0;
}

@media (min-width: 430px) {
  .container {
    flex-direction: column;
    margin-right: 0;
    margin-left: 0;
  }
}
.intro {
  position: sticky;
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  top: 40%;
  width: 43%;
  border: 1px solid var(--border-color);
  border-right-width: 0px;
  border-left-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  margin-left: 55px;
}

@media (min-width: 430px) {
  .intro {
    top: 10%;
  }
}
.intro-name {
  color: var(--header);
  font-size: var(--font-h1);
  font-weight: 600;
  margin-bottom: 4px;
}

.intro-info {
  width: 500px;
  color: var(--p1);
  font-size: var(--font-h2);
  line-height: 39px;
  margin-bottom: 20px;
}

.resume-button-container {
  background-image: linear-gradient(var(--gradient-bg));
  background-size: 400%;
  background-position: left;
  display: flex;
  gap: 4px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 55px;
  -webkit-border-radius: 40px;
  border: 1px solid var(--border-color);
  color: var(--header);
  transition: background-position 0.61s;
}

.resume-button-container:hover {
  background-position: right;
}/*# sourceMappingURL=intro.css.map */