@import "base.css";

header {
  padding-top: 9vw;
  text-align: center;
  background-color: var(--main-red);
  background-image: -o-linear-gradient(
    210deg,
    hsl(338deg 47% 32%) 0%,
    hsl(333deg 43% 31%) 21%,
    hsl(326deg 39% 29%) 30%,
    hsl(318deg 34% 27%) 39%,
    hsl(307deg 28% 25%) 46%,
    hsl(293deg 24% 23%) 54%,
    hsl(279deg 23% 23%) 61%,
    hsl(265deg 21% 22%) 69%,
    hsl(252deg 19% 20%) 79%,
    hsl(240deg 16% 19%) 100%
  );
  background-image: linear-gradient(
    240deg,
    hsl(338deg 47% 32%) 0%,
    hsl(333deg 43% 31%) 21%,
    hsl(326deg 39% 29%) 30%,
    hsl(318deg 34% 27%) 39%,
    hsl(307deg 28% 25%) 46%,
    hsl(293deg 24% 23%) 54%,
    hsl(279deg 23% 23%) 61%,
    hsl(265deg 21% 22%) 69%,
    hsl(252deg 19% 20%) 79%,
    hsl(240deg 16% 19%) 100%
  );
}

header h1 {
  color: var(--main-yellow);
  font-size: 7.75vmin;
  font-weight: 500;
  letter-spacing: 0.75vmin;
  line-height: 1.125;
  text-transform: uppercase;
  font-family: "Rubik", sans-serif;
  text-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
    0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
    0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
}

header div {
  margin-top: 9vw;
}

section > div {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px;
}

section div > h2 {
  font-family: "Rubik", sans-serif;
  padding-bottom: 8px;
}

section div > div > * {
  margin-top: 12px;
}

#intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
}

#intro p {
  min-width: 50%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#intro img {
  max-width: 250px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

@media (max-width: 600px) {
  #intro img {
    max-width: 160px;
  }
}

#current > div, #projects > div {
  font-size: 1rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

#projects {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 32px;
}

#projects h4 {
  color: var(--main-yellow);
}

.project_links {
  color: var(--main-yellow);
}

#bye {
  text-align: center;
}

.oracle {
  color: rgb(199, 70, 52);
}

a.oracle {
  background-image: -webkit-gradient(
    linear,
    left bottom, left top,
    color-stop(6%, rgba(199, 70, 52, 0)),
    color-stop(6%, rgba(199, 70, 52, 0.45)),
    color-stop(16%, rgba(199, 70, 52, 0.45)),
    color-stop(16%, rgba(199, 70, 52, 0))
  );
  background-image: -o-linear-gradient(
    bottom,
    rgba(199, 70, 52, 0) 6%,
    rgba(199, 70, 52, 0.45) 6%,
    rgba(199, 70, 52, 0.45) 16%,
    rgba(199, 70, 52, 0) 16%
  );
  background-image: linear-gradient(
    to top,
    rgba(199, 70, 52, 0) 6%,
    rgba(199, 70, 52, 0.45) 6%,
    rgba(199, 70, 52, 0.45) 16%,
    rgba(199, 70, 52, 0) 16%
  );
}

a.oracle:hover {
  background-image: -webkit-gradient(
  linear,
  left bottom, left top,
  color-stop(6%, rgba(199, 70, 52, 0)),
  color-stop(6%, rgba(199, 70, 52, 0.65)),
  color-stop(16%, rgba(199, 70, 52, 0.65)),
  color-stop(16%, rgba(199, 70, 52, 0))
);
  background-image: -o-linear-gradient(
  bottom,
  rgba(199, 70, 52, 0) 6%,
  rgba(199, 70, 52, 0.65) 6%,
  rgba(199, 70, 52, 0.65) 16%,
  rgba(199, 70, 52, 0) 16%
);
  background-image: linear-gradient(
  to top,
  rgba(199, 70, 52, 0) 6%,
  rgba(199, 70, 52, 0.65) 6%,
  rgba(199, 70, 52, 0.65) 16%,
  rgba(199, 70, 52, 0) 16%
);
}